Когда веб-дизайнер берется за новый проект, он, конечно, полагается на свой вкус и воображение. Но без модульной сетки даже самые крутые задумки могут остаться просто идеями.
Модульная сетка в дизайне — это система вертикальных и горизонтальных направляющих, которая делит рабочую область на колонки, модули и поля. Она задает единые правила выравнивания, ритма и пропорций. С ней отступы становятся кратными, блоки соразмерными, а визуальная иерархия читается с первого взгляда.
В статье объясняем без сложных терминов:
- что такое модульная сетка и как она устроена;
- какие виды модульных сеток бывают и в каких проектах их применять;
- как рассчитать сетку для страницы или экрана;
- как сделать модульную сетку в Figma с конкретными настройками;
- типичные ошибки новичков и способы их исправить;
- отвечаем на частые вопросы и даем простой пошаговый план для первых учебных макетов.
Определение модульной сетки
Модульная сетка — это невидимый каркас из колонок, рядов и отступов, который нарезает рабочую область на прямоугольные ячейки-модули. По ним выравниваются и распределяются все элементы макета — текстовые блоки, изображения, кнопки и другие объекты.
Принцип модульной сетки строится на четырех основных понятиях:
- Формат. Размер рабочей области: лист А4, экран 1920×1080 или мобильный фрейм.
- Колонка. Вертикальный столбец, в который выравнивается контент
- Модуль. Прямоугольник, образованный пересечением колонки и горизонтального шага.
- Направляющая. Вспомогательная линия, по которой строится выравнивание.
Все элементы модульной сетки формируют четкий визуальный ритм и иерархию: заголовок, подзаголовок, основной текст, кнопки встают на свои места.
Разрешение экрана
Прежде чем разбираться, как устроена сетка, нужно понять размер экрана, на котором этот сайт будут смотреть. Этот размер измеряется в пикселях (это такие крошечные точки, из которых складывается картинка на мониторе).
Например, если у вас экран с разрешением 1080p, это значит, что по ширине у него 1920 таких точек, а по высоте — 1080. Именно от этого числа зависит, сколько места у дизайнера есть для работы. Чем шире экран, тем больше пространства для контента.
Но проблема в том, что у всех пользователей экраны разные. Кто-то сидит за большим монитором, кто-то открывает сайт на планшете, а кто-то — на крошечном телефоне. Поэтому дизайнеры заранее готовят несколько вариантов страницы:
- 1920 пикселей — для домашних и офисных компьютеров;
- 768 пикселей — для планшетов;
- 320 пикселей — для самых маленьких экранов смартфонов.
Под каждый такой размер нужно подгонять и саму сетку, по которой выстраиваются блоки сайта.
У самой сетки всегда есть две главные части:
- Поля — пустые полосы по краям страницы. На них нельзя ставить никакой информации: ни текст, ни картинки, ни кнопки. Это как бы «заповедная зона», которую трогать запрещено.
- Рабочая область — основное пространство посередине, которое уже разбито на колонки (вертикальные столбцы) и отступы (промежутки между ними). Внутри этой области и размещается все содержимое сайта.
Зачем нужны поля?
Представьте: вы сделали сайт на широком экране (1920 пикселей) и разместили текст прямо от края до края. А теперь этот сайт открывает человек с экраном поуже — например, 1366 пикселей. Что случится? Края просто обрежутся, и важные надписи или картинки могут исчезнуть.
А если вы заранее оставили пустые отступы по бокам, то при уменьшении экрана они сожмутся первыми, а содержимое останется целым и читабельным. Благодаря этому ваш сайт будет хорошо выглядеть на любых устройствах.
Элементы рабочей области: колонки и отступы
Внутри сетки, там, где размещается сам сайт, есть две главные детали: колонки (их еще называют модулями) и отступы (промежутки между ними).
Колонка — это как полка в шкафу. На нее вы кладете все, что хотите показать: текст, картинки, кнопки, любые блоки. У каждой такой полки есть четкие границы — левая и правая сторона. Все содержимое должно строго помещаться между этими границами, не вылезая за них.
Отступы — это пустое пространство между колонками. Они нужны, чтобы элементы не слипались, а между ними был воздух. Это делает дизайн легким и приятным. Глазу есть за что зацепиться, и структура сразу читается.
В большинстве сайтов для компьютеров дизайнеры используют сетку из 12 колонок. Почему именно 12? Это число выбрано не случайно — его можно разделить на 2, 3, 4, 6 частей, поэтому вы легко можете создавать блоки разной ширины. Например, один блок занимает три колонки, другой — четыре, третий — шесть. Получается множество вариантов компоновки.
Для мобильных телефонов, где экран маленький, столько колонок не нужно. Там используют сетки проще — на 3, 4 или 6 колонок. Это позволяет не перегружать экран и оставлять контент читаемым.
Чтобы сайт выглядел аккуратно и профессионально, запомните два простых правила.
Все должно стоять ровно по границам колонок
Представьте, что ваша колонка — это коробка. Если вы кладете в нее предмет (блок с текстом, картинку, кнопку), он должен начинаться ровно с левого края коробки и заканчиваться ровно у правого края. Нельзя ставить что-то почти у края или чуть левее середины. Все должно быть четко привязано к направляющим — тем самым левым и правым границам.
Если вы проигнорируете это правило и разместите элементы кое-как, то программисту, который будет превращать ваш дизайн в рабочий сайт, станет очень сложно. Верстка поплывет, блоки съедут, и на разных экранах сайт будет выглядеть криво.
Все блоки должны быть согласованы между собой
Если один блок начинается с третьей колонки, а другой — с середины четвертой, гармонии не получится.
Модульная сетка — это удобно, потому что:
- элементы привязываются к готовым направляющим, ничего не нужно двигать вручную;
- все объекты легко размещать и выдерживать расстояния;
- адаптация под мобильные устройства делается быстро;
- результат выглядит гармонично и профессионально.
Но когда открываешь пустой макет, сразу появляются вопросы: сколько колонок ставить, какой шаг выбрать. Нужна практика и кто-то, кто подскажет.
В онлайн-школе «Логомашина» обучение так и устроено. На курсе «Графический дизайн» студенты с первого модуля работают с настоящими проектами — лендингами, визитками, упаковкой. Наставники проверяют каждый макет, показывают, где сбился ритм или поехали отступы, и помогают исправить. По окончанию курса собирается портфолио из аккуратных и уверенных работ.
Виды модульных сеток
Сегодня их довольно много, но начинать знакомство стоит с базовых, которые лежат в основе большинства макетов.
Колоночная сетка
Страница делится вертикальными направляющими на несколько столбцов. Чем их больше, тем вариативнее становится макет: узкие колонки позволяют точнее управлять расположением множества элементов. Особенно это выручает в интерфейсах и лендингах, где блоки нужно часто двигать и менять местами.
Колончато-горизонтальная (модульная) сетка
Если в колоночной сетке есть только вертикальные полосы, то в модульной к ним добавляются горизонтальные — получаются ячейки. Под них подгоняют размеры картинок, отступов и блоков.
Есть еще базовая и иерархическая сетки.
Базовая (шрифтовая) — это просто горизонтальные линии, как в школьной тетради. Она помогает выровнять строки текста, чтобы заголовки и абзацы не прыгали по высоте.
В иерархической сетке нет одинаковых колонок или модулей, только зоны разного размера: важному элементу — больше места, второстепенному — меньше. Применяют ее в сложных макетах, постерах, на упаковке.
В типографике базовая направляющая привязана к интерлиньяжу.
Интерлиньяж — это расстояние между строками. Когда все строки лежат на направляющих, а абзацные отступы кратны им, текст читается плавно. В вебе такой подход обеспечивает вертикальный ритм: карточки товаров, заголовки и кнопки отстоят друг от друга на одинаковых отступах, создавая пропорциональный и опрятный вид на любом экране.
Чтобы сравнить типы модульных сеток, удобно воспользоваться таблицей:
| Тип сетки | Из чего состоит | Где применять | Сложность для новичка |
|---|---|---|---|
| Колоночная | Колонки, межколоночные отступы | Статьи, лендинги с непрерывным текстом | Низкая |
| Модульная | Колонки + строки = модули | Журналы, каталоги, промостраницы | Средняя |
| Базовая | Горизонтальные линии с шагом, равным интерлиньяжу | Книги, типографика, многостраничные документы | Средняя |
| Иерархическая | Зоны, свободные пропорции | Постеры, интерфейсы, упаковка | Высокая |
Если перед вами длинная статья, где важно лишь горизонтальное выравнивание, достаточно колоночной сетки.
Но если нужен еще и вертикальный ритм, например, когда на посадочной странице чередуются блоки с картинками и текстом, без модульной сетки не обойтись. Она задает и ширину, и шаг по вертикали, что делает композицию стройной.
Модульная сетка в типографике и веб-дизайне: где она по-настоящему нужна?
Инструмент одинаково эффективен при работе с любым визуальным материалом. Будь то композиция фотокадра, верстка журнальной полосы или построение букв в логотипе — сетка задает структуру и порядок.
Даже в кино и фотографии модульная сетка помогает применять правило третей, направляя взгляд зрителя и выстраивая гармоничный кадр.
Кадр из фильма «Великий Гэтсби» (2013)
В айдентике же сеточный подход проявляется особенно наглядно. Логотип Twitter, например, построен на круглых модулях, а не на привычных квадратных.
Логотип Apple — тоже продукт модульного проектирования. Даже редизайн логотипа немецкого концерна Braun был выполнен с опорой на сетку.
Как рассчитать модульную сетку и задать ее параметры?
На первый взгляд кажется, что построение модульной сетки — это формулы, дроби и высшая математика. Процесс же сводится к нескольким логическим шагам, которые стоит понять один раз, чтобы дальше спокойно пользоваться готовыми инструментами.
Шаг 1. Определите формат и рабочую область.
Все начинается с размера будущего макета: лист А4 (210×297 мм), экран 1440 px, фрейм мобильного приложения.
Размеры модульной сетки зависят от того, с чем вы работаете.
Шаг 2. Задайте внешние поля.
От краев страницы или фрейма отступите внутрь, чтобы контент не прилипал к границам. В вебе поля обычно делают 80–120 px, в полиграфии — 12–20 мм. Это пространство для воздуха, которое влияет на восприятие композиции.
Шаг 3. Разберитесь с колонками и отступами между ними.
Решите, на сколько вертикальных столбцов вы хотите поделить рабочую область. Для простого лендинга хватит 4–6 колонок, для сложного интерфейса берут 8–12. Межколоночный интервал (gutter) лучше выбирать фиксированным — например, 20 или 24 px.
Если вам интересна точная ширина колонки, из полезной ширины вычтите суммарный gutter и поделите на число колонок.
Но запоминать формулу необязательно — дальше объясним почему.
Шаг 4. Настройте вертикальный ритм.
Шаг модульной сетки по вертикали задает расстояние между горизонтальными направляющими. Чтобы текст, кнопки и картинки выравнивались без скачков, шаг делают кратным интерлиньяжу основного текста. Например, если базовая высота строки 24 px, шаг в 8 или 12 px даст ровное выравнивание.
Боитесь, что расчеты окажутся слишком сложными и вы не разберетесь? Это нормально для новичка.
На самом деле мучить себя формулами и высчитывать каждый пиксель вручную сегодня совершенно не обязательно. В современных редакторах — Figma, Sketch, Photoshop — сетки уже встроены. Вы просто задаете число колонок, отступы и поля, а все остальное программа делает за вас. Существуют и отдельные онлайн-калькуляторы, где можно наглядно покрутить параметры и сразу увидеть результат.
Но если хочется по-настоящему понять логику построения и научиться применять ее в реальных проектах, на курсе «Веб-дизайн» с нуля в Логомашине эту тему разбирают подробно с поддержкой наставников.
Создание модульной сетки в Figma
Сетка в Figma — это встроенный инструмент. Освоить его можно за пару минут, а дальше он будет работать на вас в каждом проекте. Если вам нужна максимально подробная инструкция со всеми настройками и горячими клавишами, загляните в нашу статью как сделать сетку в Figma.
Выбираем фрейм и включаем сетку
Сначала выделите фрейм (или группу), к которому хотите применить сетку. Это может быть экран целиком, отдельный блок или карточка. Если вы еще не знакомы с созданием фреймов, прочитайте наше руководство как сделать фрейм в Figma — оно поможет быстро освоить этот базовый элемент.
Затем в правой панели свойств найдите раздел Layout Grid и нажмите «+». По умолчанию появится колоночная сетка — самый востребованный вариант для веб-дизайна.
Настройка колонок
Кликните на только что созданную сетку, чтобы открыть параметры:
- Count — сколько колонок вам нужно. Для десктопа обычно берут 12, для планшета 8, для телефона 4.
- Gutter — расстояние между колонками. Оно не дает контенту слипаться.
- Margin — поля по краям фрейма. В них не размещают основной контент, это зона дыхания.
- Type — тип выравнивания: Stretch тянется по ширине фрейма, Center фиксирует сетку по центру с заданной шириной, Left/Right прижимают ее к соответствующему краю и позволяют указать смещение.
Добавляем строки: строчная и модульная сетка
Чтобы получить горизонтальные направляющие, смените в настройках Columns на Rows. Здесь все работает так же, только линией отсчета становится высота строк.
Для создания полноценного модульного каркаса добавьте второй слой сетки: одна будет колоночной, другая строчной.
Figma позволяет накладывать несколько сеток друг на друга, и на их пересечении как раз образуются модули.
Простые правила работы с сеткой
Не выносите контент на поля (margin) — они должны оставаться свободными.
Каждый блок начинайте и заканчивайте строго по границам колонок, не захватывая межколоночные промежутки.
Не подменяйте внешние поля боковыми колонками — поля уже заданы настройками, и контент должен заполнять колонки полностью.
Тип сетки подбирайте под задачу: для текстовых лендингов хороша колоночная, для сложных многослойных макетов — модульная.
Адаптивность для разных устройств
При создании сайта закладывайте разные параметры под экраны:
- Десктоп: 12 колонок, gutter 16 px, margin 24 px (или больше, в зависимости от дизайна).
- Планшет: 8 колонок, gutter 20 px, margin 32 px.
- Смартфон: 4 колонки, gutter 12 px, margin 16 px.
Эти цифры можно менять под конкретный проект, но общий принцип сохраняется. С уменьшением экрана снижается и количество колонок, а отступы чуть сжимаются.
Сохраняем и переиспользуем
Если вы часто работаете с одними и теми же параметрами, сохраните их как стиль. Нажмите на иконку с четырьмя точками в разделе Grid styles, выберите Add, дайте название и подтвердите создание.
Теперь этот шаблон доступен для любого фрейма в проекте.
Чтобы еще ускорить процесс, используйте плагины вроде AutoGrid. Они автоматически перестраивают сетку при изменении структуры макета, перетаскивании или удалении элементов.
А когда нужно, чтобы блоки сами адаптировались под контент, на помощь приходит автолейаут в Figma — инструмент, который сделает вашу работу с отступами и выравниванием еще более гибкой.
Как применять модульную сетку в реальном макете?
Чтобы понять, как модульная система выглядит в живом продукте, посмотрим на сайт Lamoda. Здесь применена 12-колоночная структура — классический выбор для крупных интернет-магазинов.
Ширина каждой колонки подобрана таким образом, чтобы контент распределялся равномерно, без скученности и пустот.
Межколоночное расстояние, или gutter, составляет 15 пикселей. Это небольшой, но достаточный зазор, который визуально отделяет блоки друг от друга и не дает им слипнуться, сохраняя чистоту восприятия.
Боковые поля (margin) установлены на уровне 180 пикселей — довольно широкий отступ, который формирует воздушный коридор по краям экрана.
Благодаря этому контент не жмется к границам, интерфейс выглядит просторным и удобным для чтения.
Макет сайта работает на удержание пользователя, которому комфортно скользить взглядом по карточкам товаров, не отвлекаясь на хаотичную расстановку.
Зачем будущему дизайнеру уметь работать с модульной сеткой?
Понимание модульной сетки — базовый навык для графдизайна, UX/UI и типографики. В портфолио такой макет смотрится профессиональнее: сразу видно, что автор владеет принципами построения модульной сетки. Заказчику проще принять работу, когда структура макета логична. Правки вносятся быстрее, потому что любое изменение можно привязать к направляющим.
Кроме того, освоение базы открывает путь и к более смелым экспериментам. Сегодня дизайнеры осознанно нарушают строгие колонки, создавая динамичные и запоминающиеся проекты. Вот несколько актуальных трендов, которые выросли из классической модульной системы.
Сломанная сетка
Один из самых заметных приемов последних лет. Элементы намеренно выбиваются из ровного ритма: текст съезжает в сторону, изображение перекрывает несколько колонок, блоки сталкиваются под неожиданными углами. Это придает странице живой, бунтарский характер.
Пример — сайт dada-data.net, где разрушение привычного порядка превращено в художественный прием.
Диагональные сетки
Диагональные сетки развивают идею слома: горизонталь уходит по диагонали, задавая динамику и напряжение. Даже поворот всего на десять градусов полностью меняет восприятие страницы. Такой подход использовал stripe.com — их диагональная сетка стала одним из ярких визуальных решений, которое обсуждали многие порталы.
Главная страница Stripe
Разделенный экран
Тренд не новый, но стабильно актуальный. Экран или основное изображение делится на две контрастные зоны, что позволяет элегантно совместить несколько идей в одном кадре. Часто такой прием работает со скроллом: левая и правая части ведут себя по-разному, создавая интерактивный опыт. Увидеть это в действии можно на сайте jaunedechrome.com.
Далеко не все сказанное надо заучивать наизусть, но важно понимать глобальный принцип сетки — системы, вокруг которой выстраиваются все элементы вашего дизайна. Гибкость, соразмерность, гармоничность — все это легко привнести в свой дизайн, научившись правильно работать с модульными сетками. Все эти примеры — результат осмысленной работы с сеткой, которую сначала изучают, а потом творчески переосмысляют.
Хотите так же уверенно обращаться с композицией, внедрять тренды и собирать проекты, которые потом будут разбирать на уроках начинающие дизайнеры? Освоить сетку с нуля и прокачать портфолио можно на курсах в школе «Логомашина». На курсе «Веб-дизайн» вы научитесь создавать адаптивные макеты с современной структурой, а на графическом — работать с полиграфией и фирменным стилем. Обучение построено на реальных задачах и обратной связи от наставников, так что вы выйдете с готовыми кейсами для первых заказов.
Типичные ошибки при разработке модульной сетки
Ошибки в построении структуры страницы — частая проблема у новичков. Разберем самые распространенные и подскажем, как их исправить.
| Ошибка | Как выглядит | Чем мешает | Как исправить |
|---|---|---|---|
| Слишком много колонок | Сетка из 16 колонок на простом лендинге | Дробит макет, элементы теряются | Уменьшить до 4–6 колонок, ориентируясь на контент |
| Случайные отступы | Поля 73 px, gutter 17 px | Нет системы, глаз цепляется за нерегулярности | Привязать все отступы к единому шагу, например 8 или 10 px |
| Слабая иерархия | Все блоки одинакового размера | Непонятно, что важнее: заголовок или кнопка | Менять ширину блоков по сетке, использовать разный масштаб |
| Игнорирование адаптивности | На мобильном колонки просто сжимаются | Текст становится нечитаемым, кнопки — мелкими | Закладывать контрольные точки и перестраивать сетку для каждого экрана |
Как не сломать сетку в адаптивном макете?
Одна и та же сетка не переносится на мобильный экран без изменений. Адаптивность требует гибкости: для планшета можно оставить 8 колонок, для смартфона — 4. Сохраняется иерархия и ритм, а не буквальное число колонок. В Figma это легко проверить через плагин Breakpoints или вручную, меняя ширину фрейма.
Заключение
Модульная сетка помогает управлять вниманием зрителя. Она дает систему, в которой все элементы работают вместе, и не спорят друг с другом. Главная задача дизайна — сделать так, чтобы человеку было понятно и удобно, и чтобы ничто лишнее его не отвлекало. Сетка убирает визуальный мусор и оставляет чистую структуру, где важное видно сразу.
Для новичка это скорая помощь. Вы больше не гадаете, куда поставить блок и сколько отступить. Появляется простая логика. Все кратно одному шагу, все ровняется по колонкам. После пары учебных макетов приходит уверенность, а портфолио выглядит более профессиональным. А еще сетка здорово экономит время. Настроил один раз — дальше работа идет быстрее, результат всегда аккуратный.
Вот вам мини-задание. Прямо сейчас откройте Figma, создайте фрейм 1440×900 px и постройте модульную сетку из 6 колонок с gutter 24 px и полями 80 px. Добавьте несколько текстовых блоков и картинку, привяжите их к сетке. Сравните результат с чистым макетом без сетки. Получилось аккуратнее? Теперь вы знаете, зачем нужны модульные сетки и как они работают.
- Научим создавать логотипы, дизайн упаковки, фирменный стиль, рекламные баннеры, айдентику
- Дадим безлимитную обратную связь по учебным и реальным проектам
- Подарим 2 курса: нейросети и английский для дизайнеров
Краткое содержание
Можно ли сделать хороший макет без модульной сетки?
Да, если у вас сильное чувство композиции. Но сетка дает надежный каркас и ускоряет выравнивание. Для новичка это лучший способ избежать хаоса. Кстати, о композиции у нас есть подробный материал — основы композиции в дизайне, который ответит на многие вопросы о гармонии в макете.
Чем модульная сетка отличается от колоночной?
Колоночная делит макет только по ширине. Модульная сетка добавляет горизонтальные направляющие, создавая ячейки-модули.
Сколько колонок выбрать для первого макета?
Начните с 4 или 6 колонок. Для интерфейсов часто берут 8–12, но это зависит от плотности контента. Лучше меньше, чем слишком много.
Нужна ли модульная сетка для логотипа?
Иногда — да, чтобы проверить пропорции и выравнивание. Но модульная сетка не заменяет идею знака. Используйте ее как вспомогательный инструмент.
Какой шаг модульной сетки использовать?
Берите шаг, кратный интерлиньяжу основного текста (например, 8 px при высоте строки 24 px). Так текст будет лежать на направляющих.
Как новичку тренировать создание модульной сетки?
Начинайте с одного формата. Лендинг, журнальная полоса или карточка товара — выберите то, что ближе. Соберите 2–3 учебных кейса, где будет видна сетка страницы, выравнивание, типографика и адаптивность. Это станет отличной базой для портфолио.
