Если дизайнер проектирует макет «на глазок», то устраивает на странице хаос из элементов. Но есть другой путь: воспользоваться модульной сеткой. Рассказываем, что это, как её создать и использовать сетку для сайта.
Что такое модульные сетки
Модульная сетка — это система организации объектов в макете, основанная на колонках, рядах и отступах между ними. По направляющим сетки дизайнер выравнивает все элементы сайта: текстовые блоки, картинки, кнопки, фактоиды.
Если лендинг создан без использования модульной сетки, то при чтении глаз спотыкается о края невыровненных элементов и кажется, что на странице бардак.
Страница сайта, на которой элементы модульной сетки не выровнены по направляющим
Модульная сетка в дизайне сайта упорядочивает расположение элементов на странице, но у неё есть ещё несколько функций:
● Определять единый стиль. С помощью сетки дизайнер устанавливает правила выравнивания и добавления новых элементов в макет.
● Ускорять вёрстку макета. С сеткой веб-дизайнер тратит меньше усилий на размещение новых элементов на лендинге — достаточно выбрать направляющую и привязать элемент к ней.
● Делать макет эстетичным. Если элементы лендинга пропорциональны и структурированы, пользователям приятнее их воспринимать.
● Помогать пользователю легче считывать информацию. Сетка создаёт визуальный порядок, в котором проще ориентироваться. Например, если все заголовки выровнены по направляющей в левой части экрана, то при поиске пользователь будет «сканировать» взглядом только эту область, а не всю страницу.
● Упрощать разработку макета в вёрстке. Фронтенд-разработчикам проще верстать сайты, созданные дизайнерами по модульной сетке.
Узнать больше о модульных сетках можно на курсе «Дизайнер лендингов» в Яндекс Практикуме. Во время прохождения вводной части вы создадите и опубликуете первый лендинг и поймёте, подходит ли вам профессия.
Виды модульных сеток
Есть два вида сеток: модульная и колоночная. Модульная используется в графическом дизайне и полиграфии, то есть там, где пространство ограничено форматом листа. Модульная сетка состоит из вертикальных и горизонтальных направляющих.
Модульная сетка в книжном развороте: картинки и текст вписаны в блоки между направляющими
Второй вид сетки — колоночная. Это та же модульная сетка, но адаптированная для страниц в интернете: горизонтальных направляющих нет, потому что нет ограничений по формату.
Ширина веб-страницы конечна, а высота зависит от количества контента и может быть любой. Страница растягивается на много тысяч пикселей, если этого требует замысел дизайнера.
В колоночной сетке только вертикальные направляющие, горизонтальных нет
Материал по теме:
Кто такой дизайнер лендингов и как им стать
Как рассчитать сетку
Дизайнер начинает продумывать модульную сетку ещё до готовности текстов и картинки для лендинга. Если над сайтом работает несколько человек, это экономит время. Пока редактор готовит текст, графический дизайнер продумывает, как лучше разместить его в макете.
В разработке сетки выделяют пять этапов.
1. Определить, какой контент будет на лендинге.
Перед началом работы можно составить список элементов, которые появятся на сайте: например, заголовки и подзаголовки, блоки основного текста, логотипы, кнопки, иконки, карточки товаров и картинки, — и подумать о композиции, что и как будет расположено.
2. Определить базовую единицу.
Построение модульной сетки начинается с выбора базовой единицы — это значение, которое ляжет в основу сетки. Ширина колонок и межколонников, горизонтальные и вертикальные отступы будут кратны этой величине.
Обычно базовая единица равна восьми пикселям, но иногда уменьшается до пяти. Например, в случае если величина базовой единицы — техническое требование разработчика.
3. Нарисовать макет от руки.
После выбора базовой единицы нужно подумать о том, сколько колонок будет в сетке для сайта. Чтобы правильно выбрать их число, лучше сначала набросать макет будущего лендинга на бумаге.
После прорисовки черновика ясно, сколько и каких элементов предстоит вписать в сетку
4. Выбрать подходящее число колонок.
Стандартное количество колонок — 12. Это универсальное число, потому что в такой сетке есть блоки из шести, четырёх, трёх и двух колонок. Блок из одной колонки при этом получается не слишком узким, и его тоже можно использовать — например, для размещения иконок соцсетей.
В 12-колоночной сетке элементы располагаются шестью способами, в сетке из 16 колонок — только пятью
Если на лендинге предполагается простой контент — пара заголовков, текстовые блоки, картинки и больше ничего, — 12-колоночная сетка усложнит работу, а вот сетка из шести или восьми колонок, наоборот, упростит.
5. Определить параметры сетки.
Когда понятно, сколько колонок будет в модульной сетке, можно подумать об их ширине, межколоннике и полях.
В английском width — ширина колонки, gutter — межколонник, margin — поля. Так эти параметры называются в большинстве программ, где работает дизайнер
Самое распространённое сочетание такое: ширина колонки — 64 пикселя, межколонник — 24, поля — всё, что осталось. Если дизайнер только начинает работать с модульными сетками, стоит начать с этих параметров.
Если ширины колонки не хватает для расположения элементов, дизайнер сам решает, как поступить: увеличить ширину колонки, уменьшить межколонник, сделать и то и другое или изменить порядок элементов.
При проектировании модульной сетки дизайнер опирается на опыт и насмотренность — жёстких правил здесь нет.
Создание модульной сетки
Для создания модульной сетки подойдут Figma, Readymag, Adobe InDesign — дальше будем писать их кириллицей. Новичкам проще работать в Фигме, поэтому покажем, как за пять шагов создать там страницу с модульной сеткой.
1. Создаём фрейм для веб-версии лендинга.
Стандартный размер экрана — 1440 на 1024 пикселя.
Попасть в меню создания фреймов можно через клавишу F
2. Переключаемся с сетки на колонки.
Для этого в меню Layout grid ставим галочку напротив варианта Columns.
По умолчанию Фигма создаёт пять колонок
3. Устанавливаем число колонок.
Для начала поставим 12.
Как только в рабочей области появилось 12 колонок, с макетом уже можно работать
4. Выбираем тип сетки.
Всего видов четыре: Left, Right, Center и Stretch. Сетки с типом Left и Right используют для сложных интерфейсов — новичкам не подойдут.
Сетка Stretch будет растягиваться при изменении размера фрейма, сетка Center — нет. Новичкам мы рекомендуем использовать один из этих типов.
Выбор между сетками Center и Stretch — дело вкуса
5. Задать параметры сетки.
Для сетки типа Center нужно вручную задать ширину колонок и величину межколонника. Поля слева и справа рассчитаются автоматически. Для сетки Stretch, наоборот, указывать размер полей обязательно.
Ставим стандартные параметры: ширина колонки — 64 пикселя, ширина межколонника — 24
В итоге получается модульная сетка из 12 колонок, с которой можно работать. В ней есть поля, межколонник и колонки стандартной ширины.
Модульная сетка в Фигме, готовая для работы
Примеры модульных сеток
Сетка из 12 колонок — стандартная, но это не значит, что при дизайне лендингов нельзя опираться на другие модульные системы. Разберём примеры сеток из четырёх и десяти колонок, а ещё вариант с комбинированной сеткой.
Например, на сайте магазина «Рив Гош» используется сетка из четырёх колонок. Одна занята блоком меню, оставшиеся три — карточками товаров.
Сетка из четырёх колонок легко превращается в сетку из восьми. Такая подойдёт, если нужно будет добавить в карточки кнопки, иконки или дополнительный текст
Сайт Similarweb свёрстан на модульной сетке из десяти колонок. Считается, что такая сетка даёт дизайнеру меньше свободы действий: её можно разбить только на два блока по пять колонок. На сайте нет сложных элементов, поэтому сетка из десяти колонок вполне справляется.
В сетку не вписывается только бегущая строка с логотипами, но для динамичных элементов это необязательно
Модульные сетки можно совмещать, если на сайте сложный контент и его много. Например, у «Озона» основная сетка состоит из 12 колонок, но в них вписан блок на шесть колонок.
Блок занимает девять колонок слева, внутри используется другая модульная сетка, чтобы расположить мелкие карточки товаров
Дайджест блога: ежемесячная подборка лучших статей от редакции
Читать также:
