Структура и сетки
Updated 28.12.2024
Структура
и сетки
Сетки помогают организовать элементы дизайна, задавая визуальный ритм и баланс.
Они обеспечивают единообразие и структурность в размещении контента на цифровых
и печатных носителях, что создаёт целостное и гармоничное восприятие бренда.
Консистентность
Мы придерживаемся единой структуры и принципов при создании макетов как продуктов,
так и коммуникационных материалов. Это позволяет нам поддерживать единый стиль
и обеспечивать узнаваемость бренда у наших пользователей и аудитории. Мы стремимся
к тому, чтобы каждый лэйаут (layout) соответствовал общему зрительному образу.
Модульность
Модульная сетка является основой структурирования информации, где каждый элемент
дизайна располагается в пределах модулей, что обеспечивает их чёткое выравнивание
и единообразие в отступах.
Единый модуль сетки необходим для поддержания общей визуальной логики
как при разработке макетов интерфейсов, так и при подготовке медиаконтента.
Для построения макетов и размерностей в интерфейсе используется сетка 4px.

Для построения макетов в медиа мы используем сетку 20 px.

Отступы и брейкпоинты
Отступы и сетки также играют важную роль в организации размещения
контента, помогая поддерживать порядок и логику.
Mobile 360 px
Tablet 768 px
Desktop 1024 px
Desktop 1440 px
Desktop 1920 px
Sidebar
16 px
16 px
360 px
1080х1080 px
1080х1920 px
1920x1080 px
100 px
100 px
100 px
100 px
1080 px
1080 px
Примеры использования
Мы уделяем особое внимание тому, чтобы наши макеты были адаптивными к различным носителям
и экранам. Это необходимо для удобства использования и приятного пользовательского опыта
независимо от носителя, на котором находится наш продукт или сайт. Для этого мы используем
гибкие сетки и адаптивные компоненты, обеспечивая максимальную доступность.
Product



Visual
example
of banner
title name
Подпись к заголовку,
c сопутствующей информацией
example
of banner
title name
Подпись к заголовку,
c сопутствующей информацией
example
of banner
title name
Подпись к заголовку,
c сопутствующей информацией
example
of banner title name
Подпись к заголовку,
c сопутствующей информацией