Знакомая ситуация: вы сделали макет. Вроде всё на месте - и логотип есть, и текст, и картинки. Но смотрите на него и чувствуете: что-то не так. Элементы будто живут своей жизнью, взгляд не знает, за что зацепиться, нет ощущения целостности.
Скорее всего, проблема в одном - у макета нет сетки.
Сетка - это фундамент, на котором держится любая профессиональная вёрстка. Она не видна пользователю, но именно она создаёт тот самый порядок, который мы подсознательно считываем как «качественно», «дорого», «понятно».
Сегодня разбираем, какие бывают сетки, как их настраивать и почему даже опытные дизайнеры не начинают работу без них.
Что такое сетка в дизайне простыми словами
Сетка - это система вертикальных и горизонтальных направляющих, которые помогают расположить элементы в макете по единой логике.
Представьте, что вы вешаете картины на стену. Можно прибивать их «на глаз» - получится криво и хаотично. А можно расчертить стену невидимыми линиями и расположить всё на одинаковом расстоянии друг от друга и от краёв. Результат будет выглядеть как продуманная композиция.
В диджитал-дизайне сетка выполняет ту же функцию. Она не ограничивает творчество, а даёт ему прочную опору.
Зачем нужна сетка: 4 ключевые причины
1. Порядок и предсказуемость
Когда есть сетка, элементы не разлетаются. Каждый блок знает своё место. Глаз двигается по макету без усилий, потому что всё подчиняется единой логике.
2. Скорость работы
Сетка избавляет от мучительного вопроса «а куда поставить этот блок?». Ответ уже заложен в структуре. Дизайнер принимает меньше решений на уровне интуиции и больше - на уровне системы. Это ускоряет работу в разы.
3. Единый ритм
Одинаковые отступы, одинаковое количество колонок на всех экранах, повторяющиеся интервалы - всё это создаёт визуальную музыку. Макет перестаёт быть «сборной солянкой» и становится цельным произведением.
4. Адаптивность (responsive design)
Сетка - это мост между дизайном для десктопа, планшета и телефона. Если вы заложили правильную сетку с самого начала, адаптировать макет под разные экраны становится просто: блоки перестраиваются по тем же правилам, а не «рисуются заново».
Виды сеток: какую и когда использовать
Модульная сетка
Самый популярный вид в веб-дизайне и дизайне интерфейсов. Страница делится на одинаковые ячейки - модули. Контент занимает целое число модулей по горизонтали и вертикали.
Где используется: сайты, приложения, презентации, сложные интерфейсы.
Почему это удобно: модули можно группировать. Баннер может занимать 6 модулей, карточка товара - 3, боковая колонка - 2. При этом все блоки остаются выровненными относительно друг друга.
Колоночная сетка
Страница делится на вертикальные колонки. Контент занимает целое количество колонок, а между колонками есть отступы (gutter).
Классический вариант: 12 колонок. Почему 12? Потому что 12 делится на 2, 3, 4, 6. Это даёт максимальную гибкость: можно сделать две широкие колонки (6+6), три (4+4+4), четыре (3+3+3+3) или неравномерные комбинации (8+4, 3+6+3 и т.д.).
Где используется: газеты, журналы, лендинги, корпоративные сайты.
Базовая сетка (Baseline Grid)
Это горизонтальные линии с одинаковым шагом. Они помогают выровнять текст и держать вертикальный ритм.
Как это работает: базовый шаг сетки обычно привязывают к межстрочному интервалу (line-height) основного текста. Например, если line-height = 24px, то все элементы (заголовки, отступы между абзацами, кнопки) должны быть кратны 24px.
Где используется: типографика, многостраничные тексты, блоги, издательский дизайн.
Результат: текст не «плывёт» по вертикали. Строки на соседних колонках совпадают по уровню, что создаёт ощущение идеального порядка.
Иерархическая сетка
Самый свободный вид. Блоки привязаны друг к другу, но не обязательно к строгим колонкам. В основе лежит визуальная логика, а не математическая структура.
Где используется: креативные макеты, плакаты, постеры, сайты с нестандартной вёрсткой, дизайн, где важна выразительность, а не стройность рядов.
Важно: иерархическая сетка - это не «отсутствие сетки». Это осознанный выбор, когда дизайнер достаточно опытен, чтобы нарушать правила, не разрушая композицию.
Главные правила работы с сеткой
1. Придерживайся её
Сетка существует не для украшения. Если элемент не попадает в линии сетки - скорее всего, он либо лишний, либо его нужно подвинуть. Профессиональный дизайн держится на дисциплине.
2. Нарушай осознанно
Да, иногда элемент выходит за сетку. И это может быть правильным решением - если вы понимаете, зачем это делаете:
- Чтобы создать акцент
- Чтобы привлечь внимание к важному блоку
- Чтобы добавить динамики в монотонную структуру
- Но если элемент вылезает просто так, потому что «так захотелось» - это бардак.
3. Отступы должны быть системными
Между блоками должны быть одинаковые или кратные интервалы. Чаще всего отступы задают базовым числом: 4px, 8px, 16px, 24px, 32px, 48px, 64px.
Почему именно 8? Потому что большинство экранов имеют разрешения, кратные 8. Система отступов на базе 8px (или 4px для мелких деталей) называется «8pt grid» и считается стандартом индустрии.
4. Сетка невидима для пользователя
Пользователь не должен видеть сетку. Он должен видеть порядок. Сетка - это каркас, который остаётся в файле дизайнера, а не на экране готового продукта.
5 ошибок новичков при работе с сеткой
1. Игнорировать сетку вообще
Макет плывёт, отступы хаотичные, элементы «висит в воздухе». Глазам не за что зацепиться, информация воспринимается как шум.
2. Ставить всё в одну колонку
Текст и картинки растянуты на всю ширину, нет структуры. Это работает только для очень простых страниц (как лендинг «одна картинка - один текст»), но в сложных проектах быстро надоедает.
3. Делать слишком много колонок
14, 16, 24 колонки - это уже перебор. В большинстве проектов 12 - золотой стандарт. Больше колонок = больше сложности, но не больше гибкости.
4. Забывать про отступы
Элементы слипаются, текст прилипает к краям, нет воздуха. Макет становится «душным», как комната без окон.
5. Менять сетку внутри одного проекта
На главной странице 12 колонок, на внутренней - 8, на мобильной версии - вообще без сетки. Макет рассыпается, как карточный домик, теряется целостность. Сетка должна быть единой для всего проекта (или иметь чёткие правила перестроения на разных разрешениях).
Лайфхаки для работы с сеткой
- В Figma сетка включается одной кнопкой
- Выделяете фрейм, в правой панели находите Layout Grid, нажимаете «+». Можно настроить количество колонок, их ширину, отступы (gutter) и внешние поля (margins).
- Классическая настройка для десктопа: 12 колонок. Отступы между колонками (gutter): 16px или 20px. Внешние поля (margins): 40–80px в зависимости от ширины макета
- Для текста используйте базовую сетку
- Настройте вертикальный ритм. Шаг базовой сетки привяжите к line-height основного текста (например, 24px). Тогда все элементы - заголовки, отступы, кнопки - будут кратны этому числу. Строки текста на соседних колонках совпадут по высоте, и макет заиграет.
- Сохраняйте сетку в компонентах
- Если вы работаете над большим проектом, создайте мастер-компонент с настроенной сеткой и используйте его для всех экранов. Не придётся настраивать каждый раз заново.
- Используйте плагины. В Figma есть плагины, которые помогают работать с сеткой: AutoLayout для создания отзывчивых компонентов, Grid Generator для быстрого создания модульных сеток, TypeScale для настройки вертикального ритма.
Сетка - это не ограничения. Это эффективность. Она не убивает креативность, она даёт ей пространство, потому что освобождает мозг от рутинных решений «куда это поставить». Вы перестаёте гадать и начинаете строить.
Освоите сетку - ваши макеты перестанут «плыть». Появятся порядок, ритм и та самая профессиональная чистота, которую заказчики называют словом «дорого».