Модульные сетки в веб-дизайне

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

Часть первая. «38 попугаев»

1.1. Понятие модульности. Модуль

Наше советское и постсоветское детство подарило нам замечательный мультфильм «38 попугаев». Как вы помните, у зверей стояла задача: измерить длину удава. Чем измерять — было не понятно. Инструментом измерения выбрали маленького по отношению к удаву попугая. Оказалось, что в удава «влезло» аж 38 попугаев. В этом примере попугай — это модуль.

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

Разумеется, есть более серьезные примеры модульности в жизни. Со времен древней Греции к нам пришло выражение «Человек есть мера всего». Умные греки, когда строили свои чудеса света меряли двери плечами, а высоту помещения ростом человека.

Такие единицы измерения, как косая сажень, пядь, фут и т. п. также произошли из физических характеристик человека.

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

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

Таким образом, модуль — это единица измерения, установленная для придания соразмерности, а сетка — система пропорций.

 

1.2. Задачи сетки

Ускорение работы: мы не тратим лишнего времени на поиск геометрического места элемента в макете. К тому же имеем обоснования в размещении элементов.

Сбалансированность и пропорциональность: элементы в макете соизмеримы и пропорциональны между собой. Мы можем обосновать размеры блоков, кегль и проч.

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

Рис 1.1. Примеры композиций и их сетки

Рис 1.2. Пример сайта с сеткой и без нее 

1.3. Виды сеток

Самый простой вид сетки — блочная сетка. В западной литературе ее также называют «manuscript grid». Представляет собой грубо размеченную область — блок.

 

Рис 1.4. Блочная сетка

 

То, что называют модульной сеткой, например, 960.gs или blueprintcss.org и т. д. — совсем не модульная сетка. Вернее, она-то — сетка. Но она — колоночная. Потому что состоит только из вертикального членения на колонки. 

Рис 1.5. Колоночная сетка

 

Модульная сетка характеризуется наличием как вертикального членения, так и горизонтального. То, что образуется на пересечениях, есть модуль.


Рис 1.6. Модульная сетка

 

Есть еще один вид сетки. Называется иерархической сеткой. В иерархической сетки размещение блоков интуитивное и не поддается закономерностям.

Рис 1.7. Иерархическая сетка

 

1.4. Математика

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

Имеет смысл поговорить о пропорциях. Например, о «золотом сечении». Тема «золотого сечения» не нуждается в еще одном пересказе. В Википедии можно найти больше подробной информации об этом соотношении, чем я здесь смогу пересказать.

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

 

1.5. Ряд Фибоначчи

Итальянский математик Фибоначчи открыл ряд чисел, замечательный тем, что каждое последующее число оказывалось равным сумме двух предыдущих: 1, 2, 3, 5, 8, 1З, 21 и т. д. Он обладает тем свойством что, отношения между соседними членами по мере возрастания чисел ряда, все более приближаются к 0,618, то есть, к отношению «золотого сечения».

Среди систем пропорционирования, используемых в архитектуре, дизайне, в прикладной графике следует упомянуть системы «предпочтительных чисел» и различные модульные системы.

 

1.6. «Предпочтительные числа»

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

Рис 1.8. Примеры сеток с нелинейными пропорциями между размерами модулей

 

Разумеется, это не все популярные пропорции.

 

Модульные сетки. Часть вторая. Алгоритм

Разобравшись с определениями и понятиями можно приступить к практике — к построению модульной сетки. Мы препарируем сайт

 

2.1. Начинаем с определения рабочей области

В случае веба чаще всего ширина холста колеблется от 1024 до 1280 пикселей. Разумеется, ваша задача и идея может стереть эти рамки. А вот высота макета — величина непредсказуема в большинстве случаев. В отличие от полиграфии, веб-страница чаще всего не фиксирована по высоте, и ее собственный контент может ее же и увеличить. Мне кажется, что это совсем не страшно. Сферическая сетка в вакууме никому не нужна, а при больших сплошных объемах контента никто вертикального членения и не увидит, даже если оно соблюдено.

Я ориентирую в своих макетах минимальную ширину на ~980 пикселей, оставляя место для скроллбара.

Рис 2.1. Определяем рабочую область

 

2.2. Делаем шрифтовую сетку

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


Здесь мы уже касаемся понятия модуля. Точнее микромодуля. Этим микромодулем мы будем обосновывать большинство небольших расстояний (и больших тоже).

Таким образом, мы получаем прообраз будущей сетки — «зебру». На этой сетке будет лежать весь текст: абзацы, списки, заголовки, иллюстрации, плашки и проч.

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


Рис 2.2. Шрифтовая сетка-«зебра»

 

2.3. Дальше нам необходимо определиться с шириной модуля — той самой единицы измерения

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

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

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

С сеткой работать удобнее, если сразу определить расстояния между модулями — средники или канавки. На помощь с определением ширины средника приходит понятие микромодуля из предыдущего пункта. Ширина средника равна как минимум базовой высоте строки.

Таким образом, расстояния между модулями делаем равным 18 писелям.

Рассчитать ширину модуля теперь не составит труда. Есть все данные для этого.

Сетка на 6 колонок очень неудобная и некомпактная. Увеличим количество модулей вдвое. Теперь зная то, что у меня 12 колонок, я рассчитал, что ширина колонки будет равна 65 пикселям.

 

2.4. Строим вертикальное членение по полученному значению

2.5. Делаем горизонтальное членение

Высоту одного такого пояса берем кратной базовой высоте строки.

Я объединю по 3 строки в один пояс. Просвет между поясами делаем в одну строку, тем самым сохраняем вертикальный ритм.

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

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

2.7. Регионы

Объединяем модули в регионы, создаем композицию, рисуем

 

 

Модульные сетки. Часть третья. Оптика

3.1. Микромодуль

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

Существует много ситуаций, когда микромодуль может подсказать, как решить «микропроблему».

1. Принимаем равным микромодулю расстояние между поясами и колонками. Тем самым закладываем фундамент ровного вертикального ритма.


2. Используем микромодуль для отделения абзацов друг от друга — отбивка пустой строкой, или «швейцарский абзац» Йозефа Мюллера-Брокмана.


3. Если мы не собираемся отбивать абзацы строкой, красную строку мы можем выделять отступами либо втяжкой, которые тоже равны микромодулю — высоте строки. (Брингхерст, «Основы стиля в типографике», русское издание, Аронов, 2006, стр. 45).


4. Как и абзацы, списки могут быть набраны с отступом или наоборот — заступом, когда маркеры списка «свисают» за левую вертикальную границу колонки сетки.

Использование второго способа выделения списков оправдано лишь тогда, когда это позволяет сделать пространство слева.


5. Значения внутренних полей плашек делайте соразмерным с микромодулем.


Об этом еще поговорим.


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

 

3.2. Оптические компенсации

Какими бы ни были продуманными правила построения сеток, она не может гарантировать отличный результат работы. Ведь цель дизайна совсем не сферическая сетка в Wacom’e )). Геометрия в голом виде никому не нужна. Это не цель. Сетка есть рабочий инструмент, один из рабочих инструментов. Это очень важно помнить. Картинка на выходе — цель. И главное то, как на картинку будет реагировать глаз.

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

Так, круг и квадрат [...] одинаковы по ширине, но квадрат кажется немного шире из-за того, что он прилегает обеими вертикальными сторонами к прямым, ограничивающим его в горизонтальном направлении, тогда как круг касается каждой из этих прямых только в одной точке. Можно сказать, что квадрат или прямоугольник обладают максимальной компактностью в горизонтальном и вертикальном направлениях (самых важных в любой композиции), превосходя в этом отношении изотропный, «абстрактно компактный» круг. Из-за этого, например, во всех шрифтах буквы округлой формы (как «о» или «с») выступают вниз за базовую линию шрифта — только эта небольшая (2–3%) искусственная неправильность, называемая наплывом, позволяет создать впечатление равной высоты букв в строке.

Дмитрий Кирсанов «Веб-дизайн» (СПб: Символ-Плюс, 2004)



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

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


Ломайте сетку к чертовой матери, если так будет выглядеть лучше, если это решает вашу задачу!


Выводы:

1. Геометрия не так важна. Оптика решает.
2. Сетка — это всего лишь инструмент. Причем ненавязчивый.

 

3.3. Плашки

Плашки — самый популярный и простой прием у дизайнеров, когда речь идет об акцентах. Плашки представляют собой боксовую модель. Те, кто верстает HTML знает, о существовании блочных элементов. Боксовая модель характерна наличием у элементов полей — внешних (margins) и внутренних (paddings). Если размеры этих полей понятны (микромодуль), то остается обратить на то, что эти поля сдвигают содержимое блоков. А значат ломают вертикали и сетку. Выход — сдвигать блоки на величину поля.

Или не сдвигать?

Все зависит от интенсивности цвета плашки (фона блока). Рассмотрим два примера.

 

Рис 2.9. Примеры с плашками

 

 

Рис 2.10. Примеры с плашками вместе с сеткой


На что нужно обратить внимание.

- Яркие по отношению к фону плашки никуда не выносятся.
- Яркие плашки должны «вписаться» в сетку — их высота должна быть равна кратному количеству строк. Это достигается манипулированием вертикальными внутренними полями (padding-top и padding-bottom). Текст внутри такого блока не попадает в шрифтовую сетку — заботимся об оптике.
- Выносятся плашки, которые обладают маленьким оптическим весом. Они не контрастны, поэтому не оказывают влияния на ритм.
- В случае «легковесных плашек» текста не выбивается из потока. Плашка ненавязчиво обтекает содержимое блока.

 

3.4. Висячая пунктуация

Суть висячей пунктуации изложена в «Ководстве» Артемия Лебедева. Однако я не могу не упомянуть ее в разговоре об оптической компенсации. Дело в том, что такие графемы, как кавычки, скобки и прочие знаки препинания имеют меньший визуальный вес, нежели основной текст. Поэтому их принято «свешивать» за линию выключки. Техническая сторона висячей пунктуации будет рассмотрена в шестой части.

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

3.5. Шрифты с засечками и крупные кегли

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

Рис 2.11. Пример заголовка, набраного антиквой

Во избежание этого заголовок нужно выносить на ширину засечки влево.

 

3.6. Иллюстрации

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

 

Рис 2.12. Горизонтальное выравнивание графики

 

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

Рис 2.13. Вертикальное выравнивание графики


Обратите внимание на то, где должны находится вертикальные границы графических вставок (обозначены красными линиями). Верхняя граница лежит на одной линии вместе с высотой строчного знака (x-height). Но, если вы набираете сопроводительный текст слева или справа капителью или прописными — верхняя граница картинки сместится соответственно.

Автор: Черенкевич Алексей



Источник: http://design-for-business.ru/