Видеоурок

Софья Филиппова

Время чтения 6 минут

Главная идея

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

1. Классическая композиция

Самый простой и предсказуемый тип.
Она:

• симметричная;
• структурная;
• легко читается;
• не перегружает пользователя.

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

2. Сеточная композиция

Основана на строгой работе с модульной сеткой.

Характеристики:

• четкий ритм;
• аккуратное выравнивание;
• логичная структура блоков.

Чаще всего используется в:

• каталогах;
• карточках товаров;
• списках услуг;
• бенто-структурах.
• Это базовый инструмент системного дизайна.

3. Асимметричная композиция

Более динамичный и “живой” подход. Суть в том, что визуальный вес элементов распределен неравномерно.

Это дает:

• ощущение движения;
• современность;
• креативность.

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

4. Центрированная композиция

Все внимание собирается в центре экрана.

Особенности:

• сильный визуальный фокус;
• простота восприятия;
• универсальность.

Подходит для:

• лендингов;
• промо-блоков;
• ключевых сообщений.

Минус — может быть слишком «спокойной» и нейтральной.

Практические выводы

6. Комбинирование композиций

На практике композиции почти никогда не используются по отдельности.

Чаще всего:

• база строится на сетке или классике;
• асимметрия и диагонали добавляются как акценты;
• центрированные блоки выделяют ключевые смыслы.

Так дизайн становится живым, но не хаотичным.

5. Диагональная композиция

Самая редкая и выразительная. Она направляет взгляд пользователя по диагонали, создавая динамику.

Используется:

• в отдельных блоках;
• на первом экране;
• как акцент внутри более спокойной системы.
• Полностью строить сайт на диагоналях неудобно, но как акцент — это сильный инструмент.

Видео

Middle

Анимация в Figma

Статья

Junior

Работа со стилями