Что такое модульная сетка

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

Эта статья входит в цикл «Создание дизайн-системы». Здесь я рассказываю про основные преимущества модульной сетки, помогаю выбрать подходящую и понять, как применять её на практике.

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

Начнем с определения самого модуля. Модуль — это базовая единица измерения. По умолчанию в вебе это 1 px, при создании мобильных приложений — 1 dp. Однако это слишком маленькая величина, которая не помогает при создании дизайн-системы. Так какой сделать отступ: 15 или 16 пикселей? Как решить, если на глаз разницы почти нет?

Почему в мобильных приложениях применяется именно dp, а не px
Px — это относительная единица измерения. Один px может быть физически разного размера, это зависит от устройства. Если вы разрабатываете веб-интерфейс, пользуйтесь обычными пикселями. Для вас 1 dp=1 px. Если делаете мобильное приложение , лучше не используйте px, иначе ваши размеры будут сильно различаться на разных устройствах. В вебе тоже можно заметить разницу, просто она не так критична.

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

Существуют и другие варианты сеток, но в этой статье я расскажу о тех, которые сама применяю в работе. Для квадратных модулей это сетки 8, 4 и 5 px или dp.

Сетка 8 dp родом из Material Design, поэтому так широко распространена. Но 8 dp — слишком большой шаг для сложных интерфейсов. Если её выбрать, вам придется часто использовать половину модуля, чтобы интерфейс был более аккуратным. Новая версия гайдлайнов Material уже использует сетку 4 dp: она гораздо более гибкая и способна закрыть почти все потребности.

Сетка 5 dp более воздушная, но использование половины модуля станет проблемой: 5 не делится ровно на 2, а использовать 0,5 пикселя — априори плохая идея. Такая сетка подходит не для всех интерфейсов, потому что отступы кратные 5 будут довольно большими. Самым маленьким будет 5, следующий — 10, и так далее. А для отступов это весьма значительные расстояния.

Как понять, какой вариант сетки вам подходит

Примерьте понравившийся вариант на несколько макетов с максимально разным содержанием: например, на главную страницу проекта и сложную форму.

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

Если вы до сих пор сомневаетесь, стоит ли внедрять сетку в свой проект, посмотрите, сколько еще в ней пользы:

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

Пробуем сетку на практике

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

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

Мы построили наши стили, используя шаг в 4 единицы. Размер межстрочного расстояния тут важнее размера шрифта — расстояние влияет на горизонтальный ритм, а размер шрифта может как подчиниться модулю, так и отойти от него. При этом у вас ничего не поедет, если межстрочное расстояние укладывается в сетку — то есть стиль с размером 15 и межстрочным отступом 20 тоже вполне подойдет.

Удачное межстрочное расстояние для заголовков примерно равно 1,25 размера вашего шрифта, а для обычного текста — это 1,5 размера. Мы округляем эти цифры и получаем комфортное межстрочное расстояние, которое ложится в нашу сетку.

Бывают ситуации, когда нужно несколько вариантов межстрочного. Самый яркий пример — текст 16 кегля. Для коротких текстов, названий и подписей подойдет межстрочное расстояние 20, а для длинного текста лучше взять 24. Я часто так делаю: создаю два стиля 16 кегля с разным межстрочным под разные задачи, чтобы система была гибкой.

2. Теперь попробуем создать поле ввода

Выглядит неплохо. Мы применили наш модуль ко всем возможным величинам — высоте поля, скруглению углов и внутренним отступам — , а типографику взяли из сетки, которую только что создали.

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

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

3. Теперь создадим последний в этом материале компонент — кнопку, и соберем небольшую форму на основе созданного набора

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

Модульная сетка + колоночная сетка = ❤️

Колоночная сетка — это система равных колонок с одинаковыми отступами между ними. Очень часто она используется для создания гармоничных макетов. Самые популярные колоночные сетки: 12-колоночная и 16-колоночная.

Колонки могут быть горизонтальные: при наложении друг на друга они образуют модули более крупного порядка. Этот модуль тоже можно использовать, но я эту систему не применяю. Почему? На мой взгляд это слишком большие модули. Иногда они только мешают и заставляют делать неправильный выбор.

Зачем нужна колоночная сетка

Если коротко, она поможет вам построить страницы. А если вы договоритесь с front-end разработчиком, чтобы он использовал сетку с вашими параметрами, процесс работы станет легче для всех. Так, разработчику не придется мерить ширину каждого блока и смотреть каждый отступ, а вам не надо будет проверять, совпадают ли отступы с макетом.

Очень здорово, когда получается подружить модульную сетку с колоночной. После достаточно мучительных вычислений можно найти ту самую грань, когда колоночная сетка и модульная сходятся в идеальной гармонии. Большой вам респект, если это так на всех разрешениях экрана, которые вы делаете (для веб-проектов это обычно 1366+, 1366, 1280, 1024, 768 или 320).

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

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

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

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

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

Читайте также:
Веб-дизайнер: кто это такой, чем занимается и сколько зарабатывает

Зачем нужна модульная сетка

В дизайне этот инструмент используется для систематизации размещения элементов на веб-страницах. Это ее базовая функция, однако есть еще ряд:

• Унификация стиля. Дизайнеры определяют правила добавления новых элементов в макет и правила их размещения относительно друг друга.
• Оптимизация верстки макета. Благодаря сетке дизайнер проще и быстрее размещает элементы на странице, потому что определенные элементы прикрепляют к определенным направляющим.
• Придание макету привлекательности. Аудитория сайта будет благодарна верстальщику за соблюдение пропорций и структурированность элементов.
• Упрощение восприятия пользователями. Когда взгляд видит упорядоченность, он быстрее считывает то, что расположено на экране. Выравнивание списков, заголовков и текстовых блоков по определенному принципу ускорит сканирование текста.
• Упрощение процедуры верстки. Если дизайнер сразу же сделал все по сетке, верстальщику будет в разы быстрее и проще создать жизнеспособный макет сайта, а значит ресурс будет быстрее сдан заказчику и скорее получена прибыль за него.

Сфера применения модульных сеток

Модульные сетки используются для создания графических объектов в разнообразных сферах:

1. Разработка логотипов и эмблем.
2. Веб-дизайн, о котором уже шла речь.
3. Верстка печатных изданий.
4. Реклама (буклеты, флаеры) в типографиях.
5. Архитектура.
6. Интерьерный дизайн.
7. Строительство.
8. Написание статей о них.

Виды модульных сеток

Всего их два — непосредственно модульная и колоночная. Первая из них применяется в полиграфии, в веб-дизайне, где поле размещения элементов определяется форматом листа (А0-А6). Структурно модульная сетка представляет собой перекрещивание вертикальных и горизонтальных направляющих.

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

В веб-странице ширина является конечной величиной (и тут вспомнился горизонтальный скролл), высота же ее определяется объемом контента и может иметь произвольный размер. Если дизайнер получил ТЗ и начал работать, страница в разработке многократно разрастается от первоначального размера.

Читайте также:
Что такое контент простыми словами

Как рассчитать сетку

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

В разработке сетки выделяют пять этапов.

1. Определение макета, который будет размещен на странице

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

2. Определение единицы отсчета

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

За единицу отсчета можно принять величину в 8 px и менять ее в зависимости от обоснованного (!) требования заказчика, изложенного в ТЗ.

3. Ручная отрисовка метка

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

4. Выбор нужного числа колонок

Их общепринятое число — двенадцать. Используется именно столько, потому что в ней можно корректно расположить 2, 3, 4 и 6 колонок. В результате в сетку можно вписать блоки шириной в одну колонку. Это используется, например, когда на сайте размещают пиктограммы социальных сетей.

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

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

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

Как правило, устанавливают ширину всей сетки в 960 px (12 колонок по 60 pх плюс 20 px на межколоночное расстояние).

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

Читайте также:
Что такое верстка сайта, как сверстать сайт

Как создать модульную сетку

Для этих целей подходят разные профильные программы и сервисы, среди которых наиболее популярны Figma и Adobe Photoshop. Последний мы и рассмотрим.

1. Создаем новый файл

Открываем Figma и нажимаем на кнопку «New design file»:

2. Задаем фрейм для страницы

В новом документе в режиме Frame (для его вызова можно нажать клавишу F или щелкнуть мышкой по иконке Frame слева вверху) выбираем размер экрана. Figma предлагает несколько вариантов стандартных размеров разных устройств. Мы же берем самый компактный из предложенных десктопных вариантов — 1280 x 832.

3. Выбираем инструмент для дальнейшей работы с фреймом

Сразу после выбора размера мы автоматически переходим в режим инструмента Move. Переход происходит клавишей V или кликом по инструменту Move на панели инструментов слева сверху.

Находим на панели инструментов справа пункт Layout Grid — с ним и будем дальше работать.

4. Задаем колонки

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

Тип (раздел Type) колонок выбираем Stretch — это удобно, т.к. такая сетка будет растягиваться пропорционально в зависимости от размера экрана. Ширину столбцов в данном случае указывать не нужно, она будет высчитываться автоматически.

Задаем параметр Gutter — это расстояние между столбцами. Мы установили 30 пикселей. Также указываем размер Margin — это поля с каждой стороны от края сетки до фрейма. Фактически этот отступ – это свободное пространство от ширины страницы сайта до рамки браузера. Мы задали значение по 100 пикселей с каждой стороны.

5. Получаем сетку, с которой можно работать

Собственно говоря, можно уже начинать делать первые прототипы.

Модульные сетки: 7 вопросов, которые помогут разобраться в этой теме раз и навсегда

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

освойте профессию
UX/UI-дизайнер с нуля
за 9 недель

Содержание

1. Что такое модульные сетки
2. Из истории вопроса
3. Какие бывают сетки
4. Модульные сетки используются везде
5. Как рассчитать сетку?
6. Система сеток – это часть дизайн-системы продукта
7. Тренды в модульных системах

Что такое модульные сетки

UX/UI-дизайнер с нуля до ПРО

Для тех, кто хочет попасть в IT без навыков программирования

пройти курс

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

Зачем нужна модульная сетка?

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

UX/UI-дизайнер с нуля до ПРО

Для тех, кто хочет попасть в IT без навыков программирования

пройти курс

Из истории вопроса

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

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

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

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

Настоящий расцвет модульных систем настал в пятидесятых-шестидесятых годах, когда их начали активно использовать для журналов и газет. Это носило не только эстетический, но и практический характер – благодаря сеткам материалы можно было стандартизировать, сэкономить место на странице и сократить время на оформление (всё это, впрочем, работает и сейчас для веб-дизайна).

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

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

Какие бывают сетки

На данный момент существует множество видов сеток, мы рассмотрим основные.

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

Колончато-горизонтальная сетка почти не отличается от предыдущей, но в ней присутствуют и горизонтальные линии.

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

Существует и так называемая «шрифтовая» сетка. Это явление перекочевало в веб из графического дизайна и полиграфии. Шрифтовая сетка состоит из горизонтальных линий – строк (как в школьной тетради). Она пригодится, когда вы работаете с текстом и ищете оптимальный межстрочный интервал.

Модульные сетки используются везде

Модульные сетки – это инструмент не только для digital, но и для работы с любым визуальным материалом. При помощи сетки вы можете выстроить композицию фотокадра, журнальной страницы или букв в логотипе.

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

Что касается айдентики, логотип Twitter также строится на основе модулей, однако, они не обычной квадратной формы, а круглые. На основе модулей выполнен и логотип Apple. Редизайн логотипа немецкого концерна Braun также сделан на основе сетки.

Как рассчитать сетку?

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

В такие инструменты, как Sketch и Figma сетки уже встроены в редактор. Также есть специальные плагины для графических редакторов. Например, плагины для Adobe Photoshop и Adobe Illustrator.

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

Система сеток – это часть дизайн-системы продукта

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

Однако, дизайн-системами могут пользоваться не только владельцы продуктов или медиа, но и агентства с множеством клиентов. Например, французское дизайн-агентство Area 17 опубликовали большой гайд, где поделились собственноручно разработанной дизайн-системой.

Area17 жёстко следуют принципу 5×5 px – строят все макеты на основе микромодуля шириной в 5 px. Как ни странно, это помогает работать с макетами каждый раз по-разному, сохраняя собственный стиль.

Московская студия Charmer, специализирующаяся на дизайне медиа-пространств (за их авторством – сайты Афиши, Медузы и Ведомостей), также следуют этому принципу. Это помогает разрабатывать дизайн для постоянно обновляемых площадок с множеством материалов.

Обновившийся в прошлом году «Рамблер» не только изменился внешне, но и приобрёл внятную дизайн систему, которой продуктовая команда сервиса поделилась со всеми желающими. Эта система тоже построена по принципу 5×5 px.

Ещё один популярный подход – система «чётного модуля». В этой системе сетка состоит из двух, четырёх- или восьмипиксельных колонн. На основе «чётного модуля» была разработана дизайн-система продуктов Google – знаменитый «Material Design» . Эта система учитывает работу всех элементов страницы или приложения, вплоть до анимации, и легла в основу множества продуктов и сайтов по всему миру.

Компания VK Group использует свою дизайн-систему Paradigm, которая также строится на основе «чётного модуля».

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

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

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

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

Вслед за трендом на сломанную сетку появился тренд направлять «горизонталь» по диагонали. Это по-прежнему выглядит свежо и отмечается многими порталами как один из главных трендов 2018 года. Посмотрите, как изменение угла всего на десять градусов меняет визуальное восприятие страницы:

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

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

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

16 месяцев
профессия UX/UI-дизайнер
с нуля до ПРО

Хотите делать мир удобнее и работать в IT-индустрии? Научитесь создавать интерфейсы приложений и сайтов без навыков программирования.

Что такое модульная сетка и для чего она нужна дизайнерам

Дизайнер — не свободный художник, который рисует с чистого листа. Обычно он начинает работу с создания сетки.

Иллюстрация: Dana Moskvina / Skillbox Media

Редакция «Дизайн» Skillbox Media

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

Что это такое?

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

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

А как это выглядит?

Например, вот так. Слева вы видите сетку, в центре — надписи, наложенные на эту сетку, а справа — готовый дизайн.

Что-то непонятное. Неужели без такой сетки нельзя, например, сделать сайт?

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

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

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

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

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

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

Также модульную сетку можно использовать при создании логотипа:

Ого! Любой логотип можно сделать по модульной сетке?

Нет. По модульной сетке, состоящей из сходных элементов, можно создавать только простые лаконичные логотипы. Детализированные картинки делают совсем без сетки. Например, посмотрите на логотип ниже — слово «рынок» было написано от руки тушью. Естественно, сетку для неё построить не получится.

Значит, сетка — не универсальный инструмент?

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

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

Подробнее о том, когда использовать модульную сетку, читайте в ответе Игоря Штанга.

А как делают сетки?

Зависит от того, над чем вы работаете: сетки для сайта и для логотипа, естественно, будут разными. Если дизайнер составляет макет рекламной листовки, журнала или сайта, сетку обычно делают из прямоугольников или квадратов. Так элементы дизайна будут легко укладываться на прямоугольный монитор или на печатную страницу. Размеры сетки тоже могут быть разными. Например, страницу печатного журнала легко можно разделить на 12 колонок, а вот в мобильной версии сайта достаточно будет и четырёх — из-за небольшого экрана.

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

Дизайнеры чертят сетки сами с нуля?

Сетки для логотипов нужно делать вручную, потому что они сложные. Если же речь о сетке для печати или веб-дизайна, в Google можно найти много онлайн-генераторов: они выдают расчерченные колонки и клеточки по заданным размерам. В Figma, Sketch и InDesign уже есть встроенные инструменты для создания сеток.

О том, как работать с модульными сетками в Figma, читайте в нашей инструкции.

Больше интересного про дизайн в нашем телеграм-канале. Подписывайтесь!

Больше о веб-дизайне

• Какие скиллы помогут попасть в профессию веб‑ и UX‑дизайна
• Чем занимается веб-дизайнер на самом деле и куда ему развиваться
• 5 книг для начинающих веб‑дизайнеров
• Анимация в веб-дизайне: ключевые параметры и способы презентации