Структура и сетки

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 сопутствующей информацией