Неопытный пользователь может не заметить, где сетку не использовали и верстка получилась кривой, а дизайнер и человек с насмотренностью увидят все огрехи. Ниже разбираем, из чего сетка состоит, как ее рассчитать и построить в Figma.
- Что такое модульная сетка
- Зачем нужна сетка в дизайне
- Какие виды сеток бывают
- Как рассчитать сетку
- Адаптивная сетка для разных экранов
- Как создать модульную сетку в Figma
- Примеры модульной сетки и ошибки
- Книга о модульных системах в графическом дизайне
- Коротко о главном
Что такое модульная сетка
Модульная сетка — это инструмент размещения объектов на макете, где в основе лежат вертикали (колонки), горизонтали (ряды) и учитываются отступы между ними. Он задает визуальный порядок страницы и помогает выровнять любые элементы веб-сайтов, куда входят текстовые блоки, изображения, таблицы, кнопки и формы.
Сегодня на сетке строят макеты веб-дизайнеры и верстальщики, а в печатных изданиях ею пользуются давно. Сетка состоит из пяти частей, которые вместе образуют систему направляющих:
- Колонки — вертикальные полосы, в которые встают элементы.
- Ряды — горизонтальные полосы, которые вместе с колонками образуют модули.
- Модуль — ячейка на пересечении колонки и ряда.
- Межколонное расстояние (gutter) — промежуток между колонками.
- Поля (margin) — отступы от края макета до сетки.
Зачем нужна сетка в дизайне
В дизайне сайтов сетка помогает систематизировать размещение элементов на веб-страницах. Это ее базовая функция, однако есть и другие:
- Унификация стиля. Дизайнеры определяют правила добавления новых элементов в макет и правила их размещения относительно друг друга.
- Быстрая верстка. Благодаря сетке дизайнер проще и быстрее размещает элементы, потому что их прикрепляют к направляющим, а верстальщику проще создать жизнеспособный макет сайта.
- Упрощение восприятия. Когда взгляд видит упорядоченность, он быстрее считывает то, что расположено на экране. Выравнивание списков, заголовков и текстовых блоков по единому принципу ускорит сканирование длинного текста.
Порядок на странице отражается на поведении посетителей. В кейсе Kokoc для интернет-магазина сейфов специалисты разобрали шаблоны коммерческих и информационных страниц по тепловым картам, проверили десктоп и мобильную версию и подготовили аудит с прототипами. После внедрения аудита показатель отказов снизился на 44%, а просмотры страниц выросли на 22%. Результат дал весь аудит юзабилити, а не одна сетка.
Сетки применяют не только в веб-дизайне:
| Сфера | Как применяют сетку |
|---|---|
| Веб-дизайн | Блоки, текст, формы и кнопки выравнивают по колонкам |
| Разработка логотипов и эмблем | Сетки построения показывают пропорции и форму знака |
| Верстка печатных изданий, реклама (буклеты, флаеры) в типографиях | Газеты, книги, журналы и рекламные материалы строят на сетках |
| Архитектура и строительство | Размеры кратны основному модулю 100 мм, а сетку осей строят на укрупненных модулях от 300 до 6000 мм |
Какие виды сеток бывают
Основные виды сеток — колоночная и модульная. В модульной к вертикальным направляющим добавляются горизонтальные, и на их пересечениях получаются модули. Такая схема помогает заранее продумать структуру сайта и место каждого блока.
Колоночная сетка по сути тоже модульная, но без горизонтальных направляющих, и ее применяют не только онлайн, но и в печати. У веб-страницы ширина ограничена экраном и зависит от устройства, а высота определяется объемом контента и может быть произвольной.
В UI-дизайне принято выделять шесть видов сеток: манускриптную, колоночную, модульную, иерархическую, по базовой линии и квадратную. Три из них устроены так:
| Вид сетки | Как устроена |
|---|---|
| Колоночная | Вертикальные колонки, обычно 4, 8 или 12, без горизонтальных рядов |
| Модульная | Колоночная сетка с горизонтальными рядами, на пересечениях получаются прямоугольные модули |
| По базовой линии | Горизонтальные линии с шагом 4 или 8 px, которые задают вертикальный ритм текста |
%201.png)
%201.png)
%201.png)
%201.png)
%201.png)
Как рассчитать сетку
Дизайнер начинает продумывать модульную сетку еще до готовности текстов и картинки для лендинга. Если над сайтом работает несколько человек, пока редактор готовит текст, графический дизайнер продумывает, как лучше разместить его в макете. Расчет состоит из пяти шагов: состав элементов, эскиз, единица отсчета, число колонок и параметры сетки.
Состав элементов. Еще до начала работ дизайнер определяется с первоначальным составом элементов, которые будут на странице — иконки, текстовые блоки, списки, таблицы, изображения, заголовки разного уровня. Также он прикидывает, как они будут расположены относительно друг друга.
Эскиз. Чтобы не ошибиться с числом колонок, набросайте макет будущей страницы от руки на бумаге.
Единица отсчета и число колонок
Выбор единицы отсчета — решение, с которого начинается непосредственное построение сетки. От нее отталкиваются, чтобы межколонные расстояния и отступы были кратны одному значению. В справке Figma описана система 8-point grid, где все значения кратны 8, поэтому за единицу отсчета можно принять 8 px и менять ее по обоснованному требованию заказчика, изложенному в ТЗ.
Общепринятое число колонок — двенадцать. Используется именно столько, потому что 12 делится на 2, 3, 4 и 6, и на такой сетке можно корректно расположить блоки в две, три, четыре или шесть колонок. Блок шириной в одну колонку подходит для мелких элементов, например для пиктограмм социальных сетей.
Двенадцатиколоночную сетку рационально использовать, когда структура страницы достаточно сложная. Если же планируется 2–3 заголовка, пять текстовых блоков и изображения, хватит и шестиколоночной, чтобы не затруднять работу.
Ширина колонки, поля и промежутки
Теперь надо установить ширину колонок, расстояние между ними и размеры полей. Для этого пригодится формула, ее работу покажем на макете шириной 1200 px:
- Ширина колонки = (ширина макета − 2 × поле − (число колонок − 1) × межколонник) ÷ число колонок.
- Подставляем значения: поля по 72 px, 12 колонок, межколонник 24 px, то есть (1200 − 144 − 11 × 24) ÷ 12.
- Получаем колонку шириной 66 px. Проверка: 12 × 66 + 11 × 24 + 2 × 72 = 1200 px.
Бывает, что колоночных ширин не хватает, чтобы расположить на них элементы корректно. Тогда дизайнер либо меняет колоночные ширины, либо снижает межколоночные расстояния, либо делает оба этих изменения, а также перетасовывает расположение элементов.
Адаптивная сетка для разных экранов
Сетка, которая перестраивается под размер экрана, чтобы страница читалась на разных устройствах, в дизайне UX/UI называется адаптивной. В Material Design 2 ширина колонок задается в процентах, а число колонок зависит от диапазона ширины экрана, причем промежутки и поля тоже могут меняться. Ширина экрана в руководстве Google указана в dp, то есть в пикселях, не зависящих от плотности экрана.
| Ширина экрана | Число колонок |
|---|---|
| Телефон, до 599 dp | 4 |
| Планшет, от 600 до 904 dp | 8 |
| Широкие экраны, от 905 dp | 12 |
Фреймворк Bootstrap делит строку на 12 колонок и меняет раскладку на шести точках перестройки, так что его готовую сетку можно взять, когда своя не нужна. Адаптивную версию стоит проверить и с точки зрения SEO: о том, почему важен веб-дизайн как фактор ранжирования Яндекса, мы рассказывали в отдельной статье.
Как создать модульную сетку в Figma
Разберем построение сетки в Figma по шагам, а строится она в разделе Layout guide на панели фрейма.
Шаг 1. Новый файл. Создайте файл Figma Design по ссылке figma.new или кнопкой «Create» в разделе Drafts (на скриншоте прежний интерфейс с кнопкой «New design file»):
Шаг 2. Фрейм для страницы. В новом документе включите режим Frame, для этого нажмите клавишу F или щелкните по иконке Frame на панели инструментов. В списке пресетов берем Desktop, в нашем примере размером 1280 x 832.
Шаг 3. Layout guide. После выбора размера в правой панели находим раздел Layout guide и нажимаем Add layout guide. До мая 2025 года функция называлась Layout Grid.
Шаг 4. Колонки. По умолчанию Figma добавляет uniform grid, а нам нужны колонки, поэтому в выпадающем списке выбираем Columns: задача — упорядочить именно ширину элементов макета сайта. В поле Count задаем количество столбцов. Мы делаем сетку из 12 колонок.
Тип (раздел Type) колонок выбираем Stretch. Такая сетка растягивается пропорционально размеру экрана, ширину столбцов указывать не нужно, она высчитывается автоматически. Gutter — это расстояние между столбцами, мы установили 30 пикселей. Margin — это отступ от края фрейма до крайних колонок, то есть свободное пространство по бокам сетки. Мы задали значение по 100 пикселей с каждой стороны. При такой настройке на фрейме 1280 px ширина колонки равна 62,5 px, а сетка готова для первых прототипов.
Примеры модульной сетки и ошибки
Как сетка выглядит на сайтах
Пример модульной сетки проще всего увидеть на скриншотах реальных сайтов. Обратите внимание на блоки по 12, 6 и 4 колонки.
Нетология. Самый верхний блок занимает всю ширину отведенного пространства — все 12 колонок. Следующий блок делит 12 колонок на два равных столбца с информацией — уже по 6 колонок каждый. И в нижнем блоке 12 колонок делятся на 3 столбца по 4 колонки в каждом:
Т-Банк. Банк, который до 5 июня 2024 года назывался «Тинькофф», на скриншоте показывает те же блоки ровно по 12, 6 и 4 колонки:
Журнал «Максим». По скриншотам видно, что этот сайт делался не по строгой сетке. Главная страница с некоторыми условностями укладывается в двенадцатиколоночный шаблон, но рекламный блок выходит за границы верстки:
На внутренней странице блок с текстом и блок с рекламой неупорядоченно делят место между собой:
Ошибки и осознанные отступления
Журнал «Максим» показывает типичную ошибку, но встречаются и другие:
- Элементы не лежат на направляющих.
- Для отступления от сетки нет причины, которую можно назвать.
Wikipedia отмечает, что типографскую сетку преподают и сегодня как полезный инструмент для некоторых проектов, а не как обязательное условие любого макета. Накладывайте направляющие на готовый макет. Сразу видно, какие элементы выпадают из колонок.
Передавая макет верстальщику, зафиксируйте число колонок, межколонник, поля и единицу отсчета в самом макете и в ТЗ. О том, что еще нужно знать при сборке страницы, читайте в материале про SEO-основы для веб-разработчика.
Отступление от сетки оправдано, когда у него есть причина, которую можно назвать, например акцент на всю ширину макета. Если причины нет, элемент возвращают в колонки.
Книга о модульных системах в графическом дизайне
Современная типографская сетка сложилась после Второй мировой войны, а основополагающим трудом на эту тему считают книгу Йозефа Мюллера-Брокманна «Модульные системы в графическом дизайне» (Grid Systems in Graphic Design, 1981). Чтобы научиться работать с сетками профессионально, мы рекомендуем прочитать эту книгу:
Коротко о главном
- Модульная сетка состоит из колонок, рядов, модулей, промежутков и полей.
- Она унифицирует стиль, ускоряет верстку и применяется в вебе, печати, логотипах и архитектуре.
- В UI-дизайне выделяют шесть видов сеток, например колоночную, модульную и по базовой линии.
- Ширину колонки считают по формуле, опираясь на единицу отсчета.
- Адаптивная сетка меняет число колонок под экран, а построить сетку можно в Figma через layout guide.
.png)
.png)
Комментарии (6)
Оставить комментарий