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

30 января 2013

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

Примером нам послужит сетка этого блога (имеется в виду предыдущая, неадаптивная, версия). Главное — понять принцип.

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

Разработка сетки сайта

Главное в любом блоге — удобочитаемость. Одним из важных факторов, влияющих на легкость восприятия текста, является длина строки. Возьмем ее за основу, от которой можно и нужно отталкиваться. Будем считать, что минимальная ширина окна браузера 1024 пикселя, максимальная — 1280 пикселей (минус ширина полосы прокрутки). Тогда ширина текстовой колонки в 50% даст нам оптимальную длину от 500 до 600 пикселей:

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

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

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

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

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

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

Остается свободное пространство справа. Его будем использовать для «записей на полях» на внутренних страницах или для вывода дополнительной информации на главной (баннеры, объявления и т. д.)

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

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

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

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

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

Затем идет ряд иконок «поделится» для социальных сетей. Обратите внимание, как нижняя граница плашки и линия футера визуально создают ощущение плашки цвета фона страницы, хотя плашки, по сути, нет. Это так называемое отрицательное пространство.

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

В итоге типовая страница блога будет выглядеть как-то так:

Показать или скрыть сетку.

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

Во-первых, видно, что появилась четвертая колонка, а у колонок появилась конкретная ширина — 18% | 50% | 7% | 25%. Откуда такие размеры? Чистая арифметика, давайте посчитаем.

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

С шириной основной области мы уже определились в начале статьи — 50%. Текст в этот размер впишется автоматически, а вот изображения должны быть не более 500 пикселей в ширину (1000×0,5).

Аналогично, 25% правой колонки обусловлены ее содержимым. Оптимальный размер для таких вспомогательных колонок — 200 пикселей или 20% (1000/200=0,2). Плюс 5% заложим на отступ до правой границы окна браузера.

Оставшиеся 25% делят между собой первая и третья колонки. Последняя должна быть минимум 5%, у автора получилось 7%, это дело вкуса. Она нужна для того, чтобы основное содержимое не «слипалось» с правой колонкой.

Обратите внимание, что колонки можно объединить (50%+7%+25%= 82%). Это может потребоваться в случае размещения картинки большого размера (1000×0,82=800 пикселей), либо при желании вывести в оглавление максимум информации:

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

Сетку блога мы рассчитали исходя из конкретных параметров (размера экрана, оптимальной длины строки и т. д.), заранее продумав расположение и размеры того или иного элемента. Фактически получился шаблон, по которому удобно и быстро создается оформление очередной статьи.

Несмотря на шаблонность решения, оно предусматривает различные варианты подачи информации:

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

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

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

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

Cбалансированность и пропорциональность

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

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

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

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

Попробуйте ответить, какой из вариантов лучше — левый или правый?

Большинство говорит, что правый. Хотя выглядят они, в общем, одинаково.

Теперь, не трогая размеры изображений, изменим их компоновку:

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

Правый вариант выглядит явно лучше!

В левом нет цельности, получилась какая-то хаотичная конструкция, размеры элементов и расстояния между ними несогласованны. Чего не скажешь о правом, в котором все расстояния и пропорции выдержаны:

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

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

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

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

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

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

Что же делать? Слишком крупный модуль дает нужные пропорции, но ими же и ограничивает. Слишком мелкий модуль делает вёрстку произвольной.

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

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

Вертикальное членение в такой сетке, как правило, задается базовой высотой строки (x). Этой величине кратны как высота модуля (на картинке — 4x), так и вертикальные «просветы» между модулями. Горизонтальное членение обычно определяется задачей: форматом листа бумаги, количеством элементов в макете, шириной экрана и т. д.

Такая сетка позволяет достаточно гибко работать с материалом (текстом, изображениями) и гарантирует пропорциональность решения:

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

Сервис расчета модульной сетки

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

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

Оглавление