Булат Гарипов · 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 пикселей), либо при желании вывести в оглавление максимум информации:
Сетку блога мы рассчитали исходя из конкретных параметров (размера экрана, оптимальной длины строки и т. д.), заранее продумав расположение и размеры того или иного элемента. Фактически получился шаблон, по которому удобно и быстро создается оформление очередной статьи.
Несмотря на шаблонность решения, оно предусматривает различные варианты подачи информации:
Если в процессе создания очередной страницы у вас появились элементы, не ложащиеся в принятую сетку — значит, вы уделили её проектированию недостаточно внимания.
Давайте теперь поговорим об одном моменте, который одинаково важен для обоих вариантов, будь то «дизайн, который вписывается в сетку» или «сетка создается под дизайн».
Назначение сетки — не только выравнивание элементов, как могло показаться до текущего момента. Действительно, часто пишут о сбалансированности и пропорциональности решений, основанных на сетках. На самом деле это не всегда так. Убедимся в этом на конкретном примере.
Представьте, что у нас есть четыре фотографии, которые требуется разместить на странице буклета:
Возьмем сетку с квадратной ячейкой небольшого размера и расположим по ней наши изображения, причем сделаем два немного отличающихся варианта (сетку пока показывать не будем):
Попробуйте ответить, какой из вариантов лучше — левый или правый?
Большинство говорит, что правый. Хотя выглядят они, в общем, одинаково.
Теперь, не трогая размеры изображений, изменим их компоновку:
Правый вариант выглядит явно лучше!
В левом нет цельности, получилась какая-то хаотичная конструкция, размеры элементов и расстояния между ними несогласованны. Чего не скажешь о правом, в котором все расстояния и пропорции выдержаны:
Если пропорции выдерживаются всюду, результат обычно выглядит лучше, чем когда они не выдерживаются.
Понятно, что в сетке с крупными ячейками нужные пропорции будут возникать автоматически:
Сетка же с небольшими ячейками удобнее, она дает больше возможностей для маневра, однако верстка чаще всего получается случайной:
Что же делать? Слишком крупный модуль дает нужные пропорции, но ими же и ограничивает. Слишком мелкий модуль делает вёрстку произвольной.
Компромиссным решением будет использование модульной сетки, в которой модули отделены один от другого небольшими промежутками:
Вертикальное членение в такой сетке, как правило, задается базовой высотой строки (x). Этой величине кратны как высота модуля (на картинке — 4x), так и вертикальные «просветы» между модулями. Горизонтальное членение обычно определяется задачей: форматом листа бумаги, количеством элементов в макете, шириной экрана и т. д.
Такая сетка позволяет достаточно гибко работать с материалом (текстом, изображениями) и гарантирует пропорциональность решения:
Сервис расчета модульной сетки
В заключение хочется сказать, что тема сеток слишком обширная, чтобы делать какие-то однозначные выводы. Действительно, сетка — это просто один из инструментов в арсенале дизайнера, а как им пользоваться — каждый для себя решает сам.
P. S. Новые статьи — в «Школе дизайна»:
Визуальный и смысловой ритм, как основа удачного решения
Вьюпорт и медиа-запросы
Переделка дизайна листовки
