Модуль это единица измерения установленная для придания

Модуль — это единица измерения, установленная для придания соразмерности, а сетка — система пропорций.

Задачи сетки Ускорение работы: мы не тратим лишнего времени на поиск геометрического места элемента в макете. К тому же имеем обоснования в размещении элементов. Сбалансированность и пропорциональность: элементы в макете соизмеримы и пропорциональны между собой. Мы можем обосновать размеры блоков, кегль и прочее. Ускорение и шаблонирование, единообразность элементов: разработав сетку, мы делаем основу для решений на будущее. Касательно веб-дизайна, мы можем с легкостью предусмотреть тривиальные макеты для всего сайта и сделать заготовку для единичных случаев.

Примеры композиций и их сетки

Пример сайта с сеткой и без нее

Виды сеток Самый простой вид сетки — блочная сетка. В западной литературе ее также называют «manuscript grid» . Представляет собой грубо размеченную область — блок.

Блочная сетка

То, что называют модульной сеткой, например, 960. gs или blueprintcss. org и т. д. — совсем не модульная сетка. Вернее, она-то — сетка. Но она — колоночная. Потому что состоит только из вертикального членения на колонки. Колоночная сетка

Модульная сетка характеризуется наличием как вертикального членения, так и горизонтального. То, что образуется на пересечениях, есть модуль. Модульная сетка

Есть еще один вид сетки. Называется иерархической сеткой. В иерархической сетки размещение блоков интуитивное и не поддается закономерностям. Иерархическая сетка

Рабочая область В случае веба чаще всего ширина холста колеблется от 1024 до 1280 пикселей. Разумеется, ваша задача и идея может стереть эти рамки. А вот высота макета — величина непредсказуема в большинстве случаев. В отличие от полиграфии, веб-страница чаще всего не фиксирована по высоте, и ее собственный контент может ее же и увеличить. Минимальная ширина ~980 пикселей

Определяем рабочую область

Делаем шрифтовую сетку Выбираем высоту строки единую для всего макета. Все элементы рубрикации с кеглем, отличным от кегля основного текста, должны иметь интерлиньяж кратный выбранной высоте строки; в сумме со всеми вертикальными полями высота каждого такого элемента должна содержать целое количество строк шрифтовой сетки. Здесь мы уже касаемся понятия модуля. Точнее микромодуля. Этим микромодулем мы будем обосновывать большинство небольших расстояний (и больших тоже). Таким образом, мы получаем прообраз будущей сетки — «зебру» . На этой сетке будет лежать весь текст: абзацы, списки, заголовки, иллюстрации, плашки и прочее. Чаще всего используют такие параметры для шрифтовой сетки: кегль — 12 пикселей, высота строки — 18 пикселей.

Шрифтовая сетка- «зебра»

Определяемся с шириной модуля — той самой единицы измерения Исходя из чего мы можем вычислить размер модуля. Первое — это присутствие какого-то блока постоянной величины, от которого нам приходится отталкиваться. В вебе постоянными величинами чаще всего бывают баннеры, иллюстрации, видео-контент и проч. Такие константы могут содержать в своей ширине уже несколько модулей. Примером второго способа выбора ширины модуля — задача например, в размещении в ряд 9 элементов. Тогда, зная ширину всего холста и количество модулей (в этом примере 9) мы с легкостью определим размер модуля. Будем придерживаться этого в нашем примере. Скажем, заказчик попросил внизу сайта разместить 6 его любимых элементов.

С сеткой работать удобнее, если сразу определить расстояния между модулями — средники или канавки. На помощь с определением ширины средника приходит понятие микромодуля из предыдущего пункта. Ширина средника равна как минимум базовой высоте строки. Таким образом, расстояния между модулями делаем равным 18 писелям. Рассчитать ширину модуля теперь не составит труда. Есть все данные для этого. Сетка на 6 колонок очень неудобная и некомпактная. Увеличим количество модулей вдвое. Теперь зная то, что у меня 12 колонок, я рассчитал, что ширина колонки будет равна 65 пикселям.

Строим вертикальное членение по полученному значению

Делаем горизонтальное членение. Высоту одного такого пояса берем кратной базовой высоте строки. Объединяем по 3 строки в один пояс. Просвет между поясами делаем в одну строку, тем самым сохраняем вертикальный ритм.

Регионы Объединяем модули в регионы, создаем композицию, рисуем

Микромодуль Микромодулем называют величину, равную высоте строки. Представьте, что сетка атомарна, а высота строки — неделимая частица. Существует много ситуаций, когда микромодуль может подсказать, как решить «микропроблему» . 1. Принимаем равным микромодулю расстояние между поясами и колонками. Тем самым закладываем фундамент ровного вертикального ритма. 2. Используем микромодуль для отделения абзацов друг от друга — отбивка пустой строкой, или «швейцарский абзац» Йозефа Мюллера. Брокмана. 3. Если мы не собираемся отбивать абзацы строкой, красную строку мы можем выделять отступами либо втяжкой, которые тоже равны микромодулю — высоте строки.

Иллюстрации Главная особенность при работе с графическим контентом — понимание того, что иллюстрация есть не тупо прямоугольник, а набор пятен с разной интенсивностью. Пример: Горизонтальное выравнивание графики

Вертикальное выравнивание графики