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

Это система направляющих, которая помогает организовать контент страницы структурно и системно, и связать отдельные элементы в единую композицию.

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

Сетки использовались задолго до появления веб-дизайна.

Их применяли в типографике при создании:

• книг;
• газет;
• журналов;
• другой печатной продукции.

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

Веб-дизайн перенял этот принцип и адаптировал его к интерфейсам.

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

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

Наоборот, они помогают быстрее принимать решения.

Вместо того чтобы каждый раз определять положение объекта на глаз, дизайнер получает понятную систему координат.

Свобода в дизайне не всегда облегчает работу.

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

Ограничением может стать:

• фирменный цвет;
• определённый шрифт;
• стилистика бренда;
• пожелания заказчика;
• технические требования;
• модульная сетка.

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

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

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

Макет может выглядеть:

• неаккуратно;
• хаотично;
• нестабильно;
• визуально несобранно.

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

Сетка важна не только с визуальной точки зрения. Дизайн сайта должен впоследствии превратиться в работающий интерфейс. Разработчику необходимо понимать:

• ширину контейнера;
• расположение элементов;
• расстояния;
• правила поведения блоков;
• систему адаптации.

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

Одной из самых распространённых систем является 12-колоночная сетка, используемая, в частности, во фреймворке Bootstrap.

Число 12 удобно тем, что легко делится на несколько значений:

• 12 ÷ 2 = 6
• 12 ÷ 3 = 4
• 12 ÷ 4 = 3
• 12 ÷ 6 = 2

Благодаря этому можно создавать множество композиций, например:

• один широкий блок — 12 колонок;
• две части — по 6 колонок;
• три карточки — по 4 колонки;
• четыре карточки — по 3 колонки.

Это позволяет использовать одну систему для самых разных блоков сайта.

Не существует правила, что каждый элемент обязательно должен занимать одинаковое количество колонок. Композиция может быть асимметричной, например:

• текст — 5 колонок;
• изображение — оставшаяся часть;
• основная карточка — 8 колонок;
• дополнительный элемент — 4 колонки.

Сетка определяет систему, но не диктует конкретную композицию.

Сетка располагается внутри определённой рабочей области — контейнера. Контейнер ограничивает пространство, в котором находится основной контент сайта. Внутри него желательно располагать:

• тексты;
• кнопки;
• формы;
• навигацию;
• важные изображения;
• основной функциональный контент.

Сам фон страницы или отдельные декоративные элементы могут выходить за его пределы.

Одна из распространённых ошибок — попытка привязать абсолютно каждый элемент к глобальным колонкам.

Допустим, три карточки располагаются по 4 колонки каждая. Этого уже достаточно для формирования общей структуры блока.

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

Поэтому важно различать:

• Глобальную сетку страницы — определяет расположение крупных объектов;
• Внутреннюю систему блока — определяет расположение элементов внутри конкретной карточки или плашки.

Нет. Модульная сетка должна помогать дизайну, а не становиться математическим ограничением. Есть несколько ситуаций, когда объект может не совпадать с границами колонок.

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

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

Не вся графика должна помещаться внутри контейнера. За его пределы могут выходить:

• фоновые фотографии;
• декоративные изображения;
• фигуры;
• графика;
• отдельные части иллюстраций.

Это позволяет сделать композицию более динамичной и использовать пространство всей ширины экрана. Но важно разделять декоративное и смысловое содержание.

Любая информация, потеря которой повлияет на понимание сайта, должна находиться в безопасной области. К ней относятся:

• заголовки;
• основной текст;
• кнопки;
• формы;
• меню;
• важные лица;
• ключевые части предметов;
• изображения продукта, если они несут смысл.

При уменьшении экрана края изображения могут обрезаться. Если обрезается фоновая гора — пользователь, скорее всего, ничего не потеряет.

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

Сетка помогает создавать адаптив

Модульная сетка полезна не только для одного десктопного разрешения. Если элементы уже объединены в понятную систему, их проще перестраивать под:

• ноутбуки;
• планшеты;
• мобильные устройства.

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

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

Принцип 2. Не пытайтесь привязать к колонкам абсолютно всё.
Внутренний контент карточек может использовать собственную систему отступов.

Принцип 3. Не бойтесь центрированных элементов.
Они могут занимать произвольное количество колонок.

Принцип 4. Выходите за контейнер только осознанно.
Это хороший приём для декоративных элементов, но не для важной информации.

Принцип 5. Всегда думайте об адаптации.
Ключевой контент должен оставаться читаемым и понятным при изменении ширины экрана.

Главная ошибка при изучении сеток — начать воспринимать их слишком буквально. Сетка не должна заставлять дизайнера строить каждую композицию одинаково. Она создаёт фундамент. Внутри него можно:

• менять ширину блоков;
• создавать асимметрию;
• использовать центрированные элементы;
• выпускать графику за контейнер;
• комбинировать разные композиционные решения.

Главное — чтобы все эти решения оставались логичными и не разрушали общую систему страницы.

Она позволяет:

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

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

Перейти к следующему уроку