Построение
макетов
Любой макет состоит из ряда элементов, которые могут меняться: это логотип, фон, заголовок и основной текст, фото и теги, но они неизменно встраиваются в сетку вёрстки
Сетка
Микромодуль — это базовый квадратный элемент, который используется для построения сетки макета, определения размеров элементов и расчёта отступов между объектами, обозначается как «х».
Сетка каждого из наших макетов всегда состоит из 60 микромодулей по узкой стороне макета, независимо от его формата.
Сетка в Figma
Если последний микромодуль не помещается в формат, его направляющая сдвигается к границе макета, а расстояния между остальными направляющими пропорционально корректируются.
В таком случае сетка в Figma создаётся с помощью строк (rows) и колонок (columns), а не просто через grid, при этом:
- поля (margin) и середник (gutter) всегда равны 0
- тип распределения строк (type) всегда настроен на растяжение (stretch) по всему формату
Сетка в Illustrator
В Illustrator сетка строится через преобразование макета в Split into grid и задаётся только через значения rows и columns, а gutter всегда — 0 мм
Поля
Чтобы сохранить в макетах достаточно воздуха, нужно соблюдать отступ от краёв макета. Поля в digital-формате и в принте всегда — 4 модуля.
Логотип в сетке
Стандартное расположение логотипа в макетах равно 4 модуля по высоте. Но также допустимо использование логотипа и в 3 модуля по высоте в очень насыщенных контентом макетах. И 6 модулей по высоте для макетов с кобрендингом.
Это может быть полезно
Система контрастов
Контраст заголовка к подзаголовку бывает 5 видов: самый высокий, высокий, средний, низкий и очень низкий. Какой из них использовать в макете — определяется количеством символов и строк заголовка.
Размер шрифта всегда кратен сетке макета и может варьироваться с шагом 0,5х.
Очень низкий
Заголовок — 3х
Размер основного текста — 2x
Низкий
Заголовок — 3,5х
Размер основного текста — 2x
Средний
Заголовок — 4х
Размер основного текста — 2x
Высокий
Заголовок — 5х
Размер основного текста — 2x
Самый высокий
Заголовок — 5х
Размер основного текста — 2x
Имя Фамилия — 2х
Должность — 1x
Фигуры скругления и наклоны
Большие фигуры со скосом
Скругления — 5 микромодулей.
Скос по высоте — 5 микромодулей
Фигуры с острыми углами
Отступ от края фигуры до угла со сгибом —2 микромодуля. Скругления острых углов = 1/4 от скругления большой фигуры
Овальные формы
Скругления всегда максимальные.
Скос — 2 микромодуля
Теги
Стандартный тег — 3 модуля в высоту, встраивается в текстовый блок, используется в более строгих макетах, где не помещаются акцентные теги.
Акцентный тег для придания вёрстке индивидуальности, может располагаться в любом месте макета по сетке и занимает 6 модулей в высоту. Графический элемент для акцентного тега всегда слева с нахлёстом в 1 модуль.
Кегль в тегах — 2 модуля. Если в теге используются цифры, текст располагается бейслайном на второй снизу модуль.
Отступы в теге от текста до его края — 2,5 модуля.
Отступы
Если композиция содержит более двух тегов, для Стандартного тега устанавливается отступ минимум в 1 модуль со всех сторон между тегами
Стандартный тег
3 модуля в высоту, встраивается в текстовый блок. Расстояние между тегами — 1 модуль.
Акцентный тег
6 модулей в высоту. Графический элемент для акцентного тега всегда слева с нахлёстом в 1 модуль. Теги располагаются свободно по сетке.
Отступы
внутри плашек
Минимальный отступ от края фигур до типографического блока — 3 модуля. В макетах с большими фигурами рекомендуется соблюдать отступ в 4 модуля.
Примеры макетов
