Булат Гарипов · 14 ноября 2012
Представьте, что к вам должны прийти гости, а у вас по квартире разбросаны вещи. Как вы думаете, каким образом можно быстро «прибраться», если времени на уборку нет? Ответ прост: нужно разложить вещи небольшими кучками. Это сразу создаст ощущение порядка, квартира будет выглядеть убранной.
Модульная сетка, которая представляет собой набор направляющих, работает аналогичным образом. Направляющие (обычно вертикальные и горизонтальные) образуют некий каркас. Допустим, такой:
Модульная система вёрстки
в Википедии
Размещая в «ячейках» сетки элементы верстки (текст, заголовки, иллюстрации), мы их упорядочиваем, обеспечивая целостность восприятия дизайна:
Эмиль Рудер. Типографика. М.: Книга, 1982, c. 226
К сожалению, большинство статей про модульную сетку грешит одним и тем же. Сначала автор рассказывает о сетке, затем предлагает ее построить и в итоге читатель остается один на один с таким вот малопонятным результатом:
Сетку то нарисовали, но вот что с ней делать? Почему в ней десять колонок, а не семь или тринадцать? В статье ответа нет, читатели спрашивают:
— Всегда, когда читаю статьи про модульные сетки, информация только о том, что это такое. Но нигде не пишут, какие правила и как разрабатывать. Правил нет?
Один из комментариев к статье С.И. Серова «Сетка»
Да, правил нет, но есть здравый смысл. Говоря иначе, сначала нужно подумать, для чего нужна сетка, и только потом уже ее строить. Например, нарисованный выше каркас может послужить отличным полем для игры в крестики-нолики ;)
Кстати, результатом использования сетки может быть ... сама сетка. В качестве примера можно привести картины Пита Мондриана, который строил композиции на основе свободно сконструированной и заполнявшей холст пространственной сетки.
Ярким примером промежуточного варианта, когда сетка одновременно является частью дизайна и решает конкретную задачу, служит интерфейс мобильной операционной системы Windows Phone.
Итак, на что же можно и нужно опираться при создании модульной сетки?
Достаточно часто в статьях про модульные сетки можно встретить предложение, которое звучит следующим образом:
Не вписывайте дизайн в сетку, наоборот, создавайте сетку под дизайн.
На первый взгляд, вроде бы все верно: сетка — это, прежде всего, рабочий инструмент, который не имеет смысла без инструкции по использованию, описывающей расположение основных элементов (текста, изображений и т. д.).
Однако, как показывает практика, возможны и имеют место быть оба варианта:
Рассмотрим каждый из них по отдельности.
Пример первый: нужно создать дизайн сайта для научного журнала. При этом клиент хочет, чтобы журнал был «лицом» сайта и просит поместить его на главной странице. Обложка выглядит, мягко говоря, не очень хорошо:
Не будем обсуждать художественную ценность данной обложки. Сосредоточимся лучше на исполнении — оно явно хромает:
Очевидно, что какой бы хороший дизайн сайта мы не придумали, такая обложка сведет его на «нет». Её нужно довести до ума и в этом нам поможет сетка. Возьмем за основу высоту бордовой полосы (7 мм) и нарисуем сетку с аналогичным шагом по вертикали и горизонтали. Кстати, верхняя и нижняя полосы удивительным образом в нее «попадают».
Сетка наглядно демонстрирует всю плачевность ситуации: объекты не выровнены относительно друг друга, имеют непонятные размеры, в общем, «кто в лес, кто по дрова».
Для наведения порядка впишем дизайн в сетку, только учтем один небольшой нюанс. Отдельно взятые элементы (название журнала, логотип APEL, номер) имеют избыточный размер, из-за них обложка получается тяжеловесной. Уменьшим шаг сетки на 1 мм, это даст нам в итоге легкий и цельный в восприятии дизайн:
Обложка с сеткой или без сетки
В итоге мы получаем такую вот замечательную картинку для главной страницы сайта:
Двигаемся дальше. В одной из предыдущих статей автор подробно разобрал этапы создания сайта-визитки. Прочитайте ее, если еще не читали, и обратите внимание, как идет построение дизайна: объекты на странице размещаются последовательно — от общего к частному, от главных элементов к второстепенным.
При таком подходе, когда компоновка определяется задачей, элементы обычно располагаются на странице «на глаз», они, пусть и не сильно, но «пляшут» относительно друг друга. Опять-таки непонятно, на что ориентироваться при выборе размера картинок, блоков текста и т. д. В такой ситуации нам вновь поможет вписывание дизайна в сетку:
Во всех примерах этой статьи расстояние между направляющими одинаковое — это частный случай, колонки не обязаны быть равной ширины.
Зададимся вопросом, аналогичным тому, что уже звучал выше. Почему в сетке двадцать четыре колонки? Откуда появилась эта цифра и почему именно она?
Дизайн у нас получился фиксированный ширины, его в любом случае нужно верстать, поэтому можно опереться на готовое решение в виде какого-либо CSS-фреймворка. Большинство из них строятся на 12, 16 или
CSS-фреймворк
в Википедии
Еще раз обратите внимание на то, что сначала мы продумали дизайн, расположили на странице главные и второстепенные элементы и только потом с помощью сетки придали нашему решению окончательный вид.
С первым вариантом, когда дизайн вписывается в сетку, разобрались. В следующей части нашей статьи разберем обратную задачу: проектирование сетки под дизайн.
P. S. Новые статьи — в «Школе дизайна»:
Визуальный и смысловой ритм, как основа удачного решения
Вьюпорт и медиа-запросы
Переделка дизайна листовки
