Модульная сетка: как и где используется

Что это? Если говорить простыми словами, то модульная сетка — расчерченное поле, в котором размещаются элементы дизайна сайта, логотипа, типографского макета. Позволяет выровнять объекты, поместить их в правильном порядке.

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

Функции модульной сетки в дизайне

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

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

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

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

Узнай, какие ИТ - профессии
входят в ТОП-30 с доходом
от 210 000 ₽/мес

Павел Симонов

Исполнительный директор Geekbrains

Команда GeekBrains совместно с международными специалистами по развитию карьеры подготовили материалы, которые помогут вам начать путь к профессии мечты.

Подборка содержит только самые востребованные и высокооплачиваемые специальности и направления в IT-сфере. 86% наших учеников с помощью данных материалов определились с карьерной целью на ближайшее будущее!

Скачивайте и используйте уже сегодня:

Павел Симонов

Исполнительный директор Geekbrains

Топ-30 самых востребованных и высокооплачиваемых профессий 2023

Поможет разобраться в актуальной ситуации на рынке труда

Подборка 50+ бесплатных нейросетей для упрощения работы и увеличения заработка

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

ТОП-100 площадок для поиска работы от GeekBrains

Список проверенных ресурсов реальных вакансий с доходом от 210 000 ₽

Получить подборку бесплатно

pdf 3,7mb

doc 1,7mb

Уже скачали 31991

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

Перечислим сферы деятельности, в которых применяются модульные сетки:

• созданиелоготипов и эмблем;
• строительство;
• веб-дизайн;
• архитектура;
• верстка печатных изданий;
• реклама (буклеты, флаеры) в типографиях;
• интерьерный дизайн.

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

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

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

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

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

Они получили широкое распространение в 50–60-х годах. Модульные сетки начали активно применять для создания журналов и газет. При этом такие системы использовались не только в эстетических, но и в практических целях. К примеру, сетки позволяли стандартизировать материалы, сэкономить место на странице и сократить время на оформление.

Йозеф Мюллер-Брокман и Карл Герстпер разрабатывали сетки для печатных материалов в 50-х годах. В результате швейцарский дизайн получил широкое распространение, а в полиграфии появилось новое направление. Очень строгая эстетика и системность в применении визуальных элементов — вот основные особенности этого стиля.

Мюллер-Брокман написал книгу «Модульные системы в графическом дизайне». В ней автор перечислил основные работы с ними. Многие принципы, описанные Мюллером-Брокманом, применяются в сфере дизайна до сих пор.

Преимущества и недостатки модульных сеток

Для начала рассмотрим основные плюсы:

• Упрощают создание организации и фокуса.
• Позволяют разрабатывать качественные, простые и при этом неустаревающие объекты. Модульные сетки логотипов многих крупнейших компаний отличаются лаконичной формой. К примеру, Apple и Shell.
• Дают возможность ориентироваться на успешные проекты. В качестве примера можно взять дизайн значка iOS. Эту сетку можно использовать в начале работы над собственным логотипом.
• Расширяют возможности. Некоторые люди полагают, что модульные сетки ограничивают творческие способности дизайнера. Однако многие специалисты считают, что ее линии помогают найти больше возможности для рисования и перемещения элементов. Дизайнеру проще комбинировать фрагменты так, чтобы они получали визуальный смысл.
• Помогают планировать пространство. Модульные сетки позволяют дизайнерам создавать визуальную гармонию в своих работах.

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

У модульных сеток есть несколько недостатков:

• Ограничения. Как уже ранее упоминалось, некоторые дизайнеры испытывают дискомфорт из-за того, что сетки стесняют их в работе. В результате появляются логотипы, которые передают одно и то же ощущение, несмотря на формальные различия. Кроме того, дизайнер, постоянно работающий с сетками, может утратить навык работы без них. Он не будет знать, когда можно нарушить правила системы.
• Сложность. Создание модульной сетки— это непростая задача, которая требует времени и усилий.
• «Сухость». Из-за математической природы таких систем при их использовании дизайнер может создать очень геометрический контур, который схож с самой сеткой, а не с настоящим логотипом.

Алгоритм расчета модульной сетки

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

Читайте также!

Adobe Illustrator: как и где используется

Подробнее

Рассмотрим пять основных этапов расчета модульной сетки в веб-дизайне:

Этап 1: Выбор контента лендинга

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

Этап 2: Определение базовой единицы

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

Дарим скидку от 60%
на обучение «Веб-дизайнер» до 24 ноября

Уже через 9 месяцев сможете устроиться на работу с доходом от 150 000 рублей

Забронировать скидку

Как правило, в качестве базовой единицы выбирают восемь пикселей. В некоторых случаях это значение может быть снижено до пяти (к примеру, если это важное техническое требование, предъявляемое разработчиком).

Этап 3: Рисование макета модульной сетки от руки

Определив базовую единицу, специалист должен представить, сколько колонок будет содержать модульная сетка. Для этого рекомендуется сделать набросок макета лендинга на бумаге.

Этап 4: Определение количества колонок

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

Этап 5: Определение параметров сетки

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

Как правило, используется следующее сочетание: ширина колонки — 64 пикселя, межколонник — 24, поля — всё остальное пространство. Дизайнерам, которые еще не имеют опыта работы с модульными сетками, лучше воспользоваться этими параметрами.

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

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

Этапы создания модульной сетки

Как её сделать? Специалисты используют следующие программы: Figma, Readymag, Adobe InDesign. Первый вариант является наиболее удобным для неопытных дизайнеров. Рассмотрим пять этапов создания модульной сетки в «Фигме»:

Этап 1: Разработка фрейма для веб-версии лендинга

1440 на 1024 пикселя — это стандартный размер экрана.

Этап 2: Переключение с сетки на колонки

Необходимо зайти в меню Layout grid. После этого следует выбрать вариант Columns.

Этап 3: Выбор количества колонок

Можно выбрать самый распространенный вариант — 12.

Этап 4: Определение типа сетки

Существует четыре разновидности: Left, Right, Center и Stretch. Первые две применяются для сложных интерфейсов, так что при отсутствии соответствующего опыта их лучше не выбирать.

Только до 28.11

Скачай подборку материалов, чтобы гарантированно найти работу в IT за 14 дней

Список документов:

ТОП-100 площадок для поиска работы от GeekBrains

20 профессий 2023 года, с доходом от 150 000 рублей

Чек-лист «Как успешно пройти собеседование»

Чтобы получить файл, укажите e-mail:

Введите e-mail, чтобы получить доступ к документам

Подтвердите, что вы не робот,
указав номер телефона:

Введите телефон, чтобы получить доступ к документам

Скачать подборку бесплатно pdf 2,5mb

Уже скачали 52300

Я подтверждаю согласие на обработку персональных данных.

Сетка Stretch способна растягиваться при корректировке размера фрейма. У сетки Center такой функции нет. Начинающим дизайнерам лучше остановить свой выбор на одном из этих двух вариантов.

Этап 5: Определение параметров сетки

Если была выбрана сетка Center, то потребуется собственноручно указать ширину колонок и величину межколонника. После этого поля слева и справа будут рассчитаны автоматически. Если же пользователь выбрал сетку Stretch, то определять размеры полей нет необходимости. В результате будет сформирована модульная сетка, состоящая из 12 колонок. Она будет включать в себя поля, межколонник и колонки стандартной ширины.

Основные принципы работы с модульными сетками

Веб-дизайнер должен учитывать непредсказуемость онлайн-медиа. К примеру, трудно заранее определить, какая часть лонгрида расположится на экране при его перемотке. Таким образом, сначала нужно сосредоточиться на работе с вертикальными линиями. При этом горизонталям сетки, как правило, уделяется внимание в верхней и нижней частях сайта, а также при работе со списками.

Несколько рекомендаций, которые помогут создать качественную модульную сетку:

• Лучше сразу адаптировать дизайн для разных видов устройств. Нужно разработать несколько сеток для различных разрешений экрана. После этого необходимо наложить их друг на друга. Рекомендуется следить за тем, чтобы между ними была логическая преемственность. К примеру, 12 колонок десктопа можно легко адаптировать в восемь колонок на планшете и четыре — для смартфона.
• Нельзя забывать о контенте. Дизайнеру нужно учитывать заголовки, списки, цитаты, форматирование картинок и мультимедийных форм. Все эти элементы оказывают непосредственное влияние на целесообразность применения той или иной сетки.
• Можно нарушать правила. Не стоит придавать слишком большое значение рамкам, которые имеются в модульной сетке. Однако стоит учесть, что если во время прорисовки дополнительных страницу дизайнера появляются все новые элементы, которые не вписываются в макет, то необходимо скорректировать сетку. Скорее всего, она не подходит для конкретных задач.
• Не стоит забывать о пропорциях. В процесс определения ширины полосы набора необходимо обращать внимание на высоту строки и кегль (высоту букв). Одна строка должна содержать 7–10 слов. Интерлиньяж (межстрочный интервал) нужно подбирать с учетом кегеля.
• Можно обойтись без заголовков и подзаголовков. Эти элементы выступают в качестве своеобразных якорей, которые приковывают внимание посетителей сайта. Однако дизайнер может разместить текст и без них. Для этого применяются другие акценты, которые призваны упростить процесс восприятия информации.

  Читайте также!

  Шрифты в Figma: как выбрать и установить

  Подробнее
  
• Необходимо анализировать страницу, наполненную контентом. К примеру, дизайнеру нужно понять, как будет выглядеть длинное интервью на сайте. Нередко такой контент «подвисает» в воздухе и съезжает к краю экрана. При этом колонки справа и слева остаются незадействованными. В результате страница выглядит неаккуратно. Посетители испытывают дискомфорт, попав на неё.
• Нужно помнить о том, что картинка или блок текста могут занимать один или несколько модулей как по вертикали, так и по горизонтали.
• Навигационная колонка с меню должна быть уже, чем колонка с функцией информационного модуля.
• Не стоит слишком сильно фокусироваться на геометрической выверенности сетки. Основная задача дизайнера — создать приятное и хорошо воспринимаемое оформление, а не сделать проект очень сложным.
• Проектировщик сайта может обнажить модульную сетку, сделав из нее элемент дизайна. Это усилит ощущение точности и системности.
• Создав модульную структуру перед разработкой макета, дизайнер должен придерживаться ее вплоть до самой последней страницы сайта.
• Сетки из 12 колонок лучше всего подходят для гибкой верстки.
• Дизайнер может разделить блоки на симметричные и несимметричные части.
• Сетка может применяться для отражения атрибутов бренда. Это позволяет подчеркнуть его идентичность.

Тренды модульных сеток

• Сломанная сетка

На данный момент это один из самых распространенных вариантов, применяющихся в процессе разработки веб-сайтов.

• Диагональные сетки

Такие сайты выглядят очень стильно. На сегодняшний день это один из самых популярных типов модульной сетки.

• Разделённый экран

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

Часто задаваемые вопросы о модульных сетках

Сетки используют только в веб-дизайне и полиграфии?

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

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

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

Как правильно определить структуру модульной сетки для сайта?

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

Если контент отличается своей простотой и предсказуемостью, то лучше ориентироваться на него. Если же он не известен дизайнеру заранее (к примеру, user-generated — пользовательский), то сетку нужно выстраивать в зависимости от формата носителя, учитывая общие принципы типографики и композиции.

Обязательно ли использовать сетку?

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

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

Автор статьи:

Редакция сайта GeekBrains Шеф-редактор раздела Программирование