Модульная сетка

14 ноября 2012

Представьте, что к вам должны прийти гости, а у вас по квартире разбросаны вещи. Как вы думаете, каким образом можно быстро «прибраться», если времени на уборку нет? Ответ прост: нужно разложить вещи небольшими кучками. Это сразу создаст ощущение порядка, квартира будет выглядеть убранной.

Модульная сетка, которая представляет собой набор направляющих, работает аналогичным образом. Направляющие (обычно вертикальные и горизонтальные) образуют некий каркас. Допустим, такой:

Модульная сетка

Модульная система вёрстки
в Википедии

Размещая в «ячейках» сетки элементы верстки (текст, заголовки, иллюстрации), мы их упорядочиваем, обеспечивая целостность восприятия дизайна:

Модульная сетка

Эмиль Рудер. Типографика. М.: Книга, 1982, c. 226

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

Модульная сетка

Сетку то нарисовали, но вот что с ней делать? Почему в ней десять колонок, а не семь или тринадцать? В статье ответа нет, читатели спрашивают:

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

Один из комментариев к статье С.И. Серова «Сетка»

Да, правил нет, но есть здравый смысл. Говоря иначе, сначала нужно подумать, для чего нужна сетка, и только потом уже ее строить. Например, нарисованный выше каркас может послужить отличным полем для игры в крестики-нолики ;)

Модульная сетка

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

Модульная сетка

Ярким примером промежуточного варианта, когда сетка одновременно является частью дизайна и решает конкретную задачу, служит интерфейс мобильной операционной системы Windows Phone.

Модульная сетка

Итак, на что же можно и нужно опираться при создании модульной сетки?

Построение модульной сетки

Достаточно часто в статьях про модульные сетки можно встретить предложение, которое звучит следующим образом:

Не вписывайте дизайн в сетку, наоборот, создавайте сетку под дизайн.

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

Однако, как показывает практика, возможны и имеют место быть оба варианта:

Рассмотрим каждый из них по отдельности.

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

Модульная сетка

Не будем обсуждать художественную ценность данной обложки. Сосредоточимся лучше на исполнении — оно явно хромает:

Очевидно, что какой бы хороший дизайн сайта мы не придумали, такая обложка сведет его на «нет». Её нужно довести до ума и в этом нам поможет сетка. Возьмем за основу высоту бордовой полосы (7 мм) и нарисуем сетку с аналогичным шагом по вертикали и горизонтали. Кстати, верхняя и нижняя полосы удивительным образом в нее «попадают».

Модульная сетка

Сетка наглядно демонстрирует всю плачевность ситуации: объекты не выровнены относительно друг друга, имеют непонятные размеры, в общем, «кто в лес, кто по дрова».

Для наведения порядка впишем дизайн в сетку, только учтем один небольшой нюанс. Отдельно взятые элементы (название журнала, логотип APEL, номер) имеют избыточный размер, из-за них обложка получается тяжеловесной. Уменьшим шаг сетки на 1 мм, это даст нам в итоге легкий и цельный в восприятии дизайн:

Обложка с сеткой или без сетки

Модульная сетка
Модульная сетка

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

Модульная сетка

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

Модульная сетка

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

Модульная сетка

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

Зададимся вопросом, аналогичным тому, что уже звучал выше. Почему в сетке двадцать четыре колонки? Откуда появилась эта цифра и почему именно она?

Дизайн у нас получился фиксированный ширины, его в любом случае нужно верстать, поэтому можно опереться на готовое решение в виде какого-либо CSS-фреймворка. Большинство из них строятся на 12, 16 или 24-колонной сетке. Для нашей задачи больше подходит 24-колонная сетка, в нее наш дизайн будет проще вписать.

CSS-фреймворк
в Википедии

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

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

Поделиться
Отправить

Оглавление