Модульная сетка — инструмент вёрстки, с помощью которого можно выстроить «скелет» дизайна. По сути это разметка макета, построенная из ячеек-модулей.
Зачем нужна
- Упрощает работу дизайнера: по направляющим линиям легко выравнивать элементы, переносить их и корректировать ошибки;
- Задаёт визуальный ритм и эстетику, пользователям легче считывать контент;
- Новым участникам процесса помогает быстрее понять структуру документа;
- Дизайнерам интерфейсов удобнее создавать адаптивные структуры.
Как говаривал классик швейцарской школы типографики Йозеф Мюллер-Брокманн:
Структурируя при помощи модульной сетки плоскости и пространство, дизайнер получает возможность организовать тексты, фотографии и графические изображения по принципам объективности и функциональности. Сокращается число форматов для изобразительных элементов. Величина иллюстрации определяется в соответствии с её значением для данной темы.
Модули бывают разные, но самые привычные прямоугольные. Для сайтов чаще используется колоночная структура, нежели полноценная модульная сетка — для расчёта колонок Гридулятор вам в помощь. Если нужны именно модули, то вот ещё инструмент. Для полиграфии есть калькуляторы, создающие сетки под Adobe InDesign и Illustrator.
Как строить
Принцип довольно простой: отталкиваться необходимо от вашего контента (текстовые блоки, изображения), формата макета (лист бумаги, печатный разворот, размер экрана) и величины шрифта (кегль), которым будет набрана основная часть информации.
1. Сперва вы берёте формат макета и вычитаете поля, которые хотите задать.
2. Дальше задаёте высоту строк: удобным считается соотношение кегля и строки — 1:1,5. То есть, величину основного кегля умножаете на 1,5 и получаете высоту строки для разлиновки макета. Например, для шрифта размером 14 pt высота строки будет 21 pt. Можно увеличить/уменьшить по необходимости.
3. Делаем горизонтальное членение кратное количеству строк. Например, так:
4. Разделяем формат вертикально. Здесь тоже стоит учитывать контент. Например, количество колонок на картинке подойдёт для макета с большим количеством разнообразного наполнения: журнального разворота или новостного сайта.
5. Объединяем получившееся в единый организм. Вот как это сделал Antonio Carusone на примере своего сайта http://thegridsystem.net:
«Скелет» построили, дальше «мясо»
Хорошая сетка — это очень гибкая структура, она допускает множество вариантов расположения элементов для каждой страницы, но при этом обеспечивает общую целостность дизайна. Вот пример из кондовой «Типографики» Эмиля Рудера:
Рудер, кстати, хитёр: пример сетки 3х3, а у самого-то в книге 6х6 😏 Чем меньше модуль, тем больше вариаций получается в итоге.
Дополнительное
- Timothy Samara, “Making and Breaking the Grid” (PDF на английском, но картинки в любом случае понятны).
- Если вы натура исследовательская и любопытная, советую почитать его «Модульные системы в графическом дизайне» и посмотреть работы. Книга издана в 1961 году, но классику лучше знать :)
Чотиньких вам сеток!