Сетка в веб-дизайне: модульные системы на практике

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

Сетка нужна не только дизайнеру. Она ускоряет работу всей команды: разработчик быстрее верстает, потому что правила едины; контент-менеджер без страха добавляет новые блоки, потому что знает, как они встанут; заказчик получает сайт, который легко расширять. Это один из тех инструментов, которые экономят деньги в долгосрочной перспективе.

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

Из чего состоит сетка

У сетки есть несколько базовых элементов. Понимание терминов помогает общаться с дизайнерами и вёрсткой на одном языке.

• Колонки. Вертикальные полосы, в которые размещается контент. Обычно в десктопной версии используют двенадцать колонок: число делится на два, три, четыре и шесть, что даёт гибкость в раскладке.
• Гаттеры (желоба). Промежутки между колонками. Они определяют, насколько близко друг к другу окажутся элементы.
• Поля (маргины). Отступы от краёв экрана до сетки. На смартфонах это обычно шестнадцать-двадцать четыре пикселя, на десктопе поля бывают гораздо шире.
• Контейнер. Максимальная ширина контента. Если не ограничить её, на широком мониторе строки станут слишком длинными, а блоки растянутся.
• Модуль. Прямоугольная ячейка, образованная пересечением колонок и строк. Из модулей складываются сложные макеты.
• Базовая линия. Горизонтальная шкала, к которой привязаны строки текста и вертикальные отступы. Позволяет поддерживать вертикальный ритм.

Зачем сетка нужна бизнесу

1. Единообразие страниц. Все страницы собираются по одним правилам, поэтому сайт выглядит как продукт одной команды.
2. Скорость разработки. Дизайнеру и разработчику не нужно заново решать, какой ширины сделать блок. Новые страницы собираются из готовых элементов.
3. Гибкость контента. Сетка позволяет по-разному комбинировать блоки без потери аккуратности.
4. Предсказуемая адаптивность. Правила перестроения колонок на разных экранах заданы заранее, и страница не ломается.
5. Ясная иерархия. Расположение и ширина блоков помогают расставить акценты. Об этом подробно в статье про визуальную иерархию.
6. Меньше правок. Согласование макетов проходит быстрее, потому что решения подчинены системе, а не вкусу в конкретный момент.

Типы сеток

Колоночная сетка

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

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

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

Иерархическая (композиционная) сетка

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

Сетка базовой линии

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

Сетка из сложных блоков (bento)

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

Как выбрать параметры сетки

Количество колонок

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

Ширина контейнера

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

Размер гаттера

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

Поля

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

Базовый шаг

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

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

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

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

Адаптивность: как сетка живёт на разных экранах

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

• Смартфон: четыре колонки, узкие поля, один блок в ряд. Карточки выстраиваются в столбец.
• Планшет: шесть-восемь колонок, два блока в ряд.
• Ноутбук и десктоп: двенадцать колонок, три-четыре блока в ряд.
• Широкий монитор: контейнер ограничен по ширине и центрируется.

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

Подробнее про принципы адаптивных страниц рассказано в материале «Адаптивная вёрстка», а про проектирование с мобильных устройств в статье про подход mobile first.

Как работать с сеткой в макетах

1. Настройте сетку в редакторе до начала работы. Современные инструменты дизайна позволяют включить колонки, гаттеры и поля как направляющие.
2. Привязывайте элементы к колонкам. Блок должен занимать целое число колонок, а края картинок и текста выравниваться по их границам.
3. Используйте компоненты с адаптивными ограничениями. Карточка, кнопка, строка меню должны знать, как ведут себя при изменении ширины.
4. Определите правила нарушения сетки. Иногда изображение выходит за пределы контейнера или заходит на соседний блок. Это допустимо как приём, но должно быть осознанным и единообразным.
5. Проверяйте на крайних значениях ширины. Самый узкий смартфон и самый широкий монитор показывают слабые места.
6. Документируйте. В дизайн-системе опишите колонки, поля, брейкпоинты и шкалу отступов, чтобы разработчик и контент-менеджеры пользовались одним набором правил. См. статью про дизайн-систему.

Сетка и контент

Сетка существует ради контента, а не наоборот. Идеально выровненный макет бесполезен, если реальный текст в нём не помещается. Поэтому закладывайте запас на длинные заголовки, переносы слов и различное количество элементов в списках.

• Заголовки. Русские слова длиннее английских, и заголовок, помещающийся в две строки в демонстрации, в реальности займёт четыре.
• Карточки. Названия товаров и услуг разной длины ломают выравнивание. Решение: ограничивать число строк и выравнивать кнопки по нижнему краю.
• Изображения. Единые пропорции для всех фото в ряду. Если снимки разные, обрезайте их под общий формат.
• Нечётное число элементов. Пять карточек в трёхколоночной раскладке оставляют «дыру». Предусмотрите поведение для неполного ряда: расширение, выравнивание по центру или блок-заполнитель.

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

Когда сетку стоит нарушать

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

Правила осознанного отступления:

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

Типичные ошибки при работе с сеткой

1. Нет сетки вообще. Дизайнер выравнивает элементы на глаз, и разница в несколько пикселей накапливается.
2. Слишком много вариантов отступов. Девять, десять, одиннадцать, тринадцать пикселей. Система рассыпается.
3. Игнорирование мобильной сетки. Макет проектируется только для десктопа, а мобильная версия достраивается на ходу.
4. Контейнер на всю ширину экрана. На больших мониторах блоки растягиваются, тексты становятся нечитаемыми.
5. Разные сетки на разных страницах. Главная выглядит одним образом, внутренние страницы другим, и сайт теряет цельность.
6. Копирование раскладки без учёта контента. Красивая сетка, найденная в референсе, не подходит под реальные тексты.
7. Жёсткие размеры в пикселях без гибкости. Блоки не перестраиваются, возникает горизонтальная прокрутка.
8. Несоответствие макета и вёрстки. Разработчик получает макет без описания сетки, угадывает значения, и результат отличается.

Сетка и производительность команды

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

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

Практический пример: перестройка раскладки услуг

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

Что делает дизайнер:

1. Вводит двенадцатиколоночную сетку с гаттером двадцать четыре пикселя и полями шестнадцать на смартфонах.
2. Задаёт каждой карточке ширину в четыре колонки на десктопе, шесть на планшете, полную ширину на смартфоне.
3. Делает карточки одинаковой высоты в ряду и прижимает кнопку к нижнему краю.
4. Ограничивает заголовок двумя строками, а описание тремя, добавляя ссылку «Подробнее».
5. Вводит шкалу отступов и применяет её внутри карточки и между рядами.

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

Чек-лист по сетке

• Определены число колонок, гаттер и поля для каждого брейкпоинта.
• Задана максимальная ширина контейнера.
• Есть шкала отступов, кратных базовому шагу.
• Все блоки выровнены по колонкам и линиям сетки.
• Для каждого компонента описано поведение при изменении ширины.
• Проверено на самых узких и самых широких экранах.
• Сетка описана в документации и доступна разработчикам.
• Нарушения сетки осознанны и повторяются в похожих местах.

Итоги

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

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