Что такое модульная вёрстка

Главное изобретение человека — не колесо, а прямоугольник. Круг не надо придумывать: посмотрел на небо — висит солнце, бросил камень в озеро — пошли круги. А прямоугольник в природе встретить негде. В самом человеке нет ничего прямоугольного.

Прямоугольник — главная геометрическая фигура цивилизации. Вокруг человека прямоугольники: экран монитора, телефон и кошелёк в кармане, банкноты в кошельке, гитарный гриф, рабочий стол, подушка на диване, диван, книги, шкаф, комната, окна, двери, ступеньки, дорога, фасады.

Прямоугольник получил исключительное значение благодаря способности делиться на любое число прямоугольников любых пропорций:

Прямой угол — угол между вертикалью и горизонталью, двумя главными направлениями гравитации. Поэтому прямоугольник сразу нашёл применение в архитектуре. Египетские пирамиды и византийские крепости построены из прямоугольных кирпичей и обработанных каменных блоков. Деревянные дома сделаны из прямоугольных столбов и досок или сложены из круглых брёвен — но прямоугольных в проекции.

Прямоугольник не только держит крышу над головой, но и определяет планировку здания. Колонны сводов европейской архитектуры образуют прямоугольную сетку, внутренние помещения почти всегда прямоугольны.

Японский коврик «татами» — прямоугольник с пропорциями двух квадратов. Татами вмещает двух сидящих или одного спящего человека, но со временем полы комнат стали покрывать целиком, укладывая маты в разных комбинациях:

Повсеместное производство татами привело к стандартизации их размеров. А стандартизация татами привела к особой системе мер и пропорций всего японского дома. Это пример модульного дизайна в архитектуре.

С изобретением письменности и бумаги прямоугольники пришли в книгоиздание. Книги, страницы и текст прямоугольны:

Вариации макетов по модульной сетке из 32 ячеек
Йозеф Мюллер‑Брокман. Модульные системы в графическом дизайне

Последователи швейцарской типографики загоняли заголовки, колонки текста и иллюстрации в одинаковые прямоугольники без разбора:

«Прямоугольниками» выступают не только элементы вёрстки, но и пространство между ними. Дизайнер Сергей Серов пишет о швейцарской типографике: «Здесь мы экономим по будням, гуляем по праздникам. Накапливаем серый тон в одном месте, собираем по полпунктика на каждой строчке — выстреливаем чёрно‑белым в другом. Создаем спуск для рубрики, выделяем специальное белое поле для заголовка, подзаголовка, подрисунка или какого‑либо другого типографического элемента, и это автоматически придаёт такому элементу исключительную визуальную значимость».

Сайты и экранные интерфейсы состоят из разнокалиберных элементов: навигационных шапок, меню, кнопок, иконок, панелей инструментов, лент новостей, тизеров, форм ввода, виджетов и плашек. Тексты выводятся из базы данных и имеют непредсказуемую длину. Попытки впихнуть современное экранное издание в квадратно‑гнездовую систему швейцарских модульных сеток выглядят натужно и формально:

Версия дизайна сайта «Модульная система». Элементы не попадают в ячейки сетки

Модули не должны пересекаться и налезать друг на друга. Они должны иметь прямоугольную форму, согласовываться друг с другом по ширине и высоте и составлять вместе общий прямоугольник страницы или экрана. Необязательно полностью заполнять модули информацией — главное, чтобы прямоугольники читались. В вёрстке полноправно участвует пустота, или контрпространство, которое также должно иметь простую прямоугольную форму. Элементы вёрстки в модулях должны следовать правилу якорных объектов.

Модульная вёрстка — это деление прямоугольников.


Применение принципа модульности

В рубрику «Советы» на сайте бюро обратился Андрей Коржиц с просьбой помочь улучшить афишу:

• «Хотелось бы узнать ваши замечания по размещению текстовой информации. Использовалось три кегля (не считая официальной обязательной надписи внизу восьмым кеглем) и две гарнитуры».
  

Базовый принцип системы вёрстки, которую я проповедую,— модульность. Модульные сетки, о которых слышали все дизайнеры — только частный случай модульной вёрстки. Знания о сетке редко помогают дизайнеру собрать страницу.

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

Поэтому мы примем как первую аксиому: все блоки — модули макета — должны иметь прямоугольную форму и составлять вместе общий прямоугольник страницы или экрана, которым они ограничены. Это не значит, что любой макет должен быть заполнен информацией, как ванная комната плиткой — главное, чтобы прямоугольники читались. В вёрстке полноправно участвует пустота, или контрпространство, а элементы вёрстки в модулях должны следовать правилу якорных объектов.

Макет устроен по принципу сендвича:

Соседние слои вашего бутерброда контрастируют друг с другом, и это хорошо. Если не использовать принцип чередования, слои начнут сливаться, и тогда не спасут ни линейки, ни дополнительные отступы.

Но слоёв‑модулей слишком много — целых девять. Из‑за этого афиша выглядит дробной и сложной.

Кроме того, сами модули не прямоугольны и имеют разные размеры. Поэтому они плохо стыкуются друг с другом и не составляют общий прямоугольник макета:

Я рекомендую начинать с самых крупных и важных, якорных объектов. В данном случае это заголовок акции. Якорные объекты должны находиться либо у краёв своего прямоугольника, либо в визуальном центре. Поскольку мы предполагаем, что модулей будет несколько, пока выберем произвольную высоту. Заголовок, подзаголовок и начало текста лучше не разрывать:

Кстати, мелкая вертикальная строчка справа внизу — это подпись автора. Подпись должна быть скромной, но без неё нельзя.

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

Получается неплохо по смыслу — сначала что, потом уже когда и куда. Однако нарушаются сразу все принципы хорошей конструкции: якорные объекты — заголовок и даты — расплылись по макету, соседние этажи не контрастируют, большая часть макета превратилась в груду текста. Поэтому мы остановимся на предыдущей компоновке и займёмся нюансами.

Постараемся согласовать элементы макета, сделав его более цельным.

Пусть наша иллюстрация поиграет с текстом, привлечёт к нему внимание. Выдвинем папину голову в модуль с датой, для этого не грех скорректировать картинку:

Этажей — меньше, кегль — крупнее, конструкция — проще и крепче.

Якорные объекты — это самые заметные объекты на странице: иллюстрации, заголовки, фактоиды, логотипы и пиктограммы. Простой абзац наборного текста тоже выступает якорным объектом, если он окружён пустотой, или контрпространством.

Прямоугольник — базовая фигура модульной вёрстки. Все модули макета должны иметь прямоугольную форму и составлять вместе общий прямоугольник страницы или экрана, которым они ограничены.

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

Обратите внимание, как угловой привязке крупной галочки мешает её собственная форма.

У правого края флагового набора всегда должен быть дополнительный воздух. Тогда «флаг» выглядит флагом — как положено.

В жизни редко приходится верстать страницу из одного объекта. Второстепенные объекты модуля пристраиваются к якорным и иногда даже слегка сдвигают их из точек привязки: