Композиция в дизайне: 12 принципов с примерами и разбором ошибок

Хорошая композиция не сводится к тому, чтобы «расставить все красиво». Она помогает зрителю за несколько секунд понять, что главное, как связаны элементы и какое действие нужно совершить. Разбираем 12 принципов композиции на понятных примерах, учимся замечать ошибки и исправлять их без бесконечного передвигания объектов на глаз.

Что такое композиция в дизайне

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

Простыми словами, композиция отвечает на три вопроса: что человек заметит первым, что увидит следующим и какой вывод сделает. Если ответы совпадают с задачей проекта, макет работает. Если пользователь не понимает, куда смотреть, кнопка теряется, а связанные сведения выглядят разрозненными, проблема часто именно в композиционном построении.

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

Павел Алтунин — UX/UI дизайнер, веб-дизайнер

Из каких элементов складывается композиция

Дизайнер работает не с абстрактной «красотой», а с конкретными средствами:

• точкой и линией — они задают координаты, границы и направление;
• пятном и формой — создают визуальный вес и силуэт;
• размером и масштабом — показывают важность и отношения между объектами;
• цветом, тоном и фактурой — выделяют, объединяют или отдаляют элементы;
• шрифтом — формируют голос и текстовую иерархию;
• пространством — разделяют смысловые группы и дают композиции «дышать».

Один и тот же набор компонентов можно собрать десятками способов. Крупный заголовок над фотографией будет восприниматься как сообщение, а маленькая подпись рядом с тем же кадром — как пояснение. Поэтому композиция начинается не с декоративного приема, а с приоритетов.

12 принципов композиции: краткая таблица

1. Доминанта и визуальная иерархия

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

Выделить приоритет можно размером, насыщенностью цвета, контрастом, положением, свободным пространством или необычной формой. Nielsen Norman Group определяет визуальную иерархию как организацию элементов, которая ведет глаз в порядке их важности. Практический ориентир для простого экрана — три отчетливых уровня, а не десять почти одинаковых.

Хороший пример На первом экране курса крупный заголовок сообщает результат обучения, ниже короткое пояснение раскрывает смысл, а контрастная кнопка предлагает следующий шаг. Фотография поддерживает тему, но не спорит с текстом.

Как делать не нужно Заголовок, изображение, плашка со скидкой и две кнопки одинаково яркие. Все претендуют на первое место, поэтому доминанта исчезает.

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

2. Баланс: симметричный, асимметричный и радиальный

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

Симметричный баланс создает ощущение устойчивости и порядка. Он уместен в премиальной айдентике, официальных материалах, спокойных лендингах. Асимметричный строится на компенсации: крупную фотографию с одной стороны могут уравновесить заголовок и несколько небольших деталей с другой. Такое решение выглядит живее. Радиальная композиция направляет элементы от общего центра — как циферблат, розетка или круговое меню.

Хороший пример В афише крупный портрет занимает левую половину, а справа расположены название события, дата и компактный цветовой акцент. Части не зеркальны, но равны по силе.

Как делать не нужно Считать количество объектов. Один яркий круг способен перевесить пять серых строк.

Как исправить Переведите работу в оттенки серого и оцените общую массу пятен. Если один край явно тяжелее, меняйте масштаб, тон, плотность или расстояние, а не добавляйте случайный декор.

3. Контраст

Контраст возникает при заметном различии элементов: большого и маленького, светлого и темного, плотного и воздушного, геометричного и пластичного. Он выполняет две задачи — отделяет разные функции и создает акцент.

Для одного сообщения обычно достаточно одного ведущего типа контраста и нескольких поддерживающих. Например, большая черная антиква на светлом фоне уже формирует сильную доминанту; дополнительная красная обводка, тень и капслок могут только добавить шум. Чтобы глубже разобраться в сочетаниях оттенков, пригодятся материалы про цветовой круг Иттена и психологию цвета.

Хороший пример В каталоге основная цена набрана крупнее и темнее старой, а скидка выделена одним акцентным цветом. Разница сообщает не только «красиво», но и «это новая важная информация».

Как делать не нужно делать второстепенный текст слишком бледным ради эстетики. В цифровом дизайне контраст связан с доступностью. WCAG 2.2 рекомендует для обычного текста соотношение не ниже 4,5:1, для крупного — 3:1.

Как исправить проверяйте макет в оттенках серого и сервисе расчета контраста. Не кодируйте статус только цветом — добавляйте подпись, иконку или форму.

4. Масштаб и пропорции

Масштаб показывает значимость: крупное замечают раньше, мелкое воспринимают как уточнение. Пропорции описывают отношения размеров внутри объекта и между частями композиции. Вместе они помогают создать иерархию, глубину и выразительность.

Хороший пример На обложке подкаста лицо героя занимает около половины кадра, название — второе по площади пятно, а номер выпуска остается небольшим. Даже в миниатюре сохраняются тема, автор и серия.

Как делать не нужно Выбирать размеры по отдельности. Заголовок красив сам по себе, фотография тоже, но рядом они оказываются почти равными и начинают спорить.

Как исправить Сравнивайте не значения шрифта, а отношения. Сначала задайте крупный, средний и малый уровни, затем проверьте их на реальном носителе: рекламный баннер, экран телефона и печатный постер требуют разного масштаба.

Золотое сечение с отношением примерно 1:1,618 можно использовать как одну из пропорциональных сеток. Но это не универсальная формула красоты. В руководстве Adobe прямо отмечено, что доказательств превосходства этой пропорции над другими нет. Если отношение 2:3, 3:4 или модульная шкала лучше решает задачу, выбирайте ее.

5. Выравнивание и модульная сетка

Выравнивание связывает объекты невидимыми линиями. Сетка делает эти связи системными: задает колонки, поля, модули и базовый шаг отступов. Благодаря ей разные экраны или развороты ощущаются частью одного проекта.

Хороший пример В карточке товара название, рейтинг, цена и кнопка начинаются по одной вертикальной оси. Фотография может выходить за колонку, но это осознанный прием, а не случайное смещение.

Как делать не нужно Элементы расположены «почти ровно». Разница в несколько пикселей не создает выразительной асимметрии, зато выглядит как небрежность. Другая крайность — подгонять содержание под сетку так строго, что пропадает акцент.

Как исправить Выберите ограниченное число направляющих и единый шаг интервалов, например 4 или 8 px для интерфейса. Проверяйте привязки на всех брейкпоинтах: Material Design 3 рассматривает layout как адаптивную систему, которая меняется вместе с доступной шириной, а не как один растянутый desktop-макет.

Если вы собираете композицию в интерфейсе, полезно параллельно освоить Figma и ее базовые возможности: направляющие, Auto Layout и компоненты помогают превратить сетку в устойчивую систему.

6. Близость и группировка

По гештальт-принципу близости элементы, расположенные рядом, воспринимаются как единая группа. Иногда расстояние объясняет структуру быстрее, чем рамка или подпись.

Хороший пример В форме подпись стоит ближе к своему полю, чем к предыдущему. Между группами «Контакты» и «Доставка» интервал больше, поэтому пользователь мгновенно считывает разделы.

Как делать не нужно Одинаковые отступы между всеми объектами. Заголовок оказывается равно удален от своего текста и от предыдущего блока; карточки слипаются; подпись визуально относится не к тому изображению. Возникают ложные связи.

Как исправить Используйте правило «внутри меньше, снаружи больше». Например, 8 px между подписью и полем, 16 px между полями одной группы, 32 px между разделами. Конкретные числа зависят от системы, важна заметная разница.

Контейнеры, фоновые плашки и разделители применяйте только тогда, когда воздуха недостаточно. Nielsen Norman Group относит близость и общую область к базовым механизмам группировки: сначала попробуйте решить задачу интервалами, затем добавляйте рамку.

7. Ритм и повтор

Ритм в композиции — закономерное повторение элементов, интервалов или признаков. Он может быть регулярным, когда модули одинаковы; чередующимся — например, крупный/малый; прогрессирующим, когда размер или расстояние постепенно меняются.

Хороший пример В лонгриде повторяются пары «номер — заголовок», одинаковая ширина изображений и единый вертикальный шаг. Читатель предугадывает структуру и быстрее сканирует материал. В айдентике тот же принцип превращается в паттерн.

Как делать не нужно Механическая монотонность. Десять равных карточек в одном ряду создают порядок, но не объясняют приоритеты и утомляют взгляд. Обратная проблема — у каждого блока свой радиус, отступ и стиль иллюстрации, поэтому система рассыпается.

Как исправить Задайте основу и одно контролируемое отклонение. Например, карточки повторяются, а ключевая занимает две колонки; интервалы равны, но после смыслового раздела появляется увеличенная пауза.

ВажноПовтор работает, когда зритель способен заметить закономерность. Два случайно похожих элемента — совпадение, а не ритм.

Павел Алтунин — UX/UI дизайнер, веб-дизайнер

8. Негативное пространство, или контрформа

Негативное пространство — незаполненная область вокруг объектов и между ними. Это не «место, которое забыли занять», а полноценный элемент. Оно отделяет группы, увеличивает значимость доминанты, облегчает чтение и формирует контрформу — силуэт пространства рядом с фигурой или внутри нее.

Хороший пример На минималистичном постере небольшое название окружено большим полем. Пустота создает ощущение тишины и премиальности. В логотипе просвет между деталями может складываться в дополнительный образ.

Как делать не нужно Заполнять каждый угол, потому что заказчик просит «использовать место». В результате фон, подписи и декор конкурируют с сообщением. Другая ошибка — делать большие поля без связи с идеей: композиция становится не воздушной, а пустой.

Как исправить Анализируйте позитивные и негативные пятна одновременно. Временно закрасьте основные объекты черным и проверьте силуэт. Пустота должна поддерживать маршрут взгляда и группировку, а не просто увеличивать высоту страницы.

9. Направление и визуальное движение

Линии, диагонали, перспектива, жесты и направление взгляда персонажа создают визуальный маршрут. Горизонтали воспринимаются спокойнее, вертикали усиливают ощущение роста и устойчивости, диагонали добавляют динамику. Это не жесткие психологические формулы, а распространенные визуальные ассоциации, которые зависят от контекста.

Хороший пример На рекламном баннере герой смотрит в сторону заголовка и кнопки. Его поза, линия руки и контрастный фон приводят к целевому действию. В фотографии дорога или ряд зданий может вести к продукту как направляющая.

Как делать не нужно Лицо или стрелка направлены к краю, поэтому взгляд уходит из кадра. Еще одна проблема — несколько пересекающихся диагоналей ведут в разные стороны и создают беспорядок.

Как исправить Нарисуйте поверх макета 2–3 главные траектории. Они должны приводить к доминанте или связывать ключевые этапы. Учитывайте формат, язык и сценарий чтения: исследования сканирования страниц показывают несколько паттернов, а не единственную универсальную схему движения слева направо.

10. Правило третей и композиционные направляющие

По правилу третей формат делят двумя вертикальными и двумя горизонтальными линиями на девять частей. Важные объекты ставят на линии или возле четырех точек пересечения. Прием помогает уйти от случайного центрирования и быстро построить асимметричный баланс.

Хороший пример В карточке мероприятия портрет расположен вдоль правой вертикали, глаза героя — около верхнего пересечения, а текст занимает левую треть. Между ними остается естественная пауза.

Как делать не нужно Переносить каждый объект точно на пересечение. Сетка становится самоцелью, а длинный заголовок, логотип и кнопка тесно сталкиваются в одной зоне.

Как исправитьИспользуйте трети как стартовую гипотезу. Сначала найдите доминанту и баланс, затем скорректируйте положение с учетом текста, безопасных полей и адаптивности. Геометрический центр и композиционный центр не обязаны совпадать: главный объект может находиться сбоку, если остальные элементы направляют внимание к нему.

Правило третей, золотая спираль, диагональная сетка и схема Гутенберга — не законы восприятия, а направляющие. Хорошая композиция подтверждается тем, насколько быстро пользователь считывает смысл и выполняет задачу.

Правило третей, золотое сечение или модульная сетка: что выбрать

У этих инструментов разные задачи. Правило третей помогает быстро найти положение акцента, золотое сечение предлагает пропорциональное отношение частей, а модульная сетка организует большой объем элементов. Они не конкурируют и могут работать вместе: например, сетка удерживает карточки и текст, а доминанта располагается возле пересечения третей.

Как выбрать Начните с количества и типа контента. Для одного изображения с короткой подписью часто достаточно третей. Для лендинга или интерфейса нужна адаптивная сетка. Золотое сечение можно использовать как гипотезу для пропорций, но результат все равно проверяют по иерархии, читаемости и задаче. Adobe также рассматривает золотое сечение как направляющую, а не обязательный закон.

11. Единство, подобие и нюанс

Единство означает, что части воспринимаются как одно целое. Его создают повторяющиеся цвета, формы, шрифтовые роли, толщина линий, характер изображений и логика расстояний. По принципу подобия похожие элементы кажутся связанными, поэтому одинаковое оформление должно обозначать одинаковую функцию.

Нюанс — небольшое различие внутри общей системы. Он делает решение живым: например, все карточки имеют одинаковую форму, но у важной немного иной тон или масштаб. Контраст разделяет роли резко, нюанс — мягко.

Хороший пример В серии афиш сохраняются сетка, гарнитура и цветовая база, а композиционный акцент меняется от выпуска к выпуску. Серия узнаваема, но не выглядит копипастой.

Как делать не нужно Стилизовать каждый блок независимо или, наоборот, делать все одинаковым. В первом случае нет целостности, во втором — иерархии.

Как исправить Составьте короткий набор правил: 1–2 гарнитуры, 3 текстовых уровня, шкала отступов, палитра и семейство форм. Подробно о шрифтовой системе можно прочитать в статье про типографику и шрифты на сайте.

12. Фигура и фон

Принцип «фигура — фон» описывает, как зритель отделяет объект внимания от окружения. Четкий силуэт, достаточный тональный или цветовой контраст и свободное поле помогают быстро распознать фигуру. Намеренная неоднозначность подходит для логотипа или арт-плаката, но может мешать в интерфейсе.

Хороший пример Белая карточка на светло-сером фоне читается как отдельная область благодаря тени, границе или достаточному различию тона. В постере фигура человека частично сливается с фоном, но лицо остается узнаваемой точкой фокуса.

Как делать не нужно Фотография, текст и фон имеют близкую яркость. Заголовок проваливается в детали изображения, кнопка выглядит частью декора, границы интерактивной области непонятны.

Как исправить Проверьте макет в черно-белом режиме и с сильным уменьшением. Затемнение фотографии, локальная подложка, смена кадрирования или перенос текста часто работают лучше, чем тяжелая тень. В интерфейсе не жертвуйте читаемостью ради эффектного наложения.

Какие бывают виды композиции

Виды композиции удобнее рассматривать не как взаимоисключающие категории, а как независимые характеристики. Один макет может быть одновременно асимметричным, динамичным и открытым.

Закрытая композиция удерживает взгляд внутри: объекты повернуты к центру, линии замыкаются, поля заметны. В открытой части изображения обрезаны краем, а направление продолжается за пределы кадра. Статичность часто поддерживают симметрия, горизонтали и прямоугольники; динамику — асимметрия, диагонали, разный масштаб и активное кадрирование.

Разбор композиции лендинга: до и после

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

В исправленном варианте текст занимает левую часть сетки, а изображение — правую. Лицо героя повернуто к заголовку и не выводит взгляд за край. У экрана остается одна доминанта и один основной сценарий; цена и социальное доказательство заметны, но относятся ко второму уровню.

Почему стало лучше Пользователю не требуется сравнивать несколько равнозначных сигналов. Близость объясняет связи, сетка создает порядок, а контраст отделяет основное действие от вспомогательного. Это тот же подход, который применяется в работе над интерфейсами: подробнее о задачах специалиста можно прочитать в статье «Кто такой дизайнер интерфейсов и как им стать»

Как построить композицию с нуля: 7 шагов

1. Сформулируйте задачу. Что человек должен понять, почувствовать или сделать?
2. Расставьте смысловые приоритеты. Выберите одну доминанту и 2–3 уровня поддержки.
3. Определите формат и ограничения. Учтите носитель, безопасные поля, текст и адаптивные версии.
4. Сделайте 5–10 маленьких черно-белых эскизов. Работайте пятнами, не деталями.
5. Выберите тип композиции и сетку. Решите, нужны ли устойчивость, динамика, открытость или строгая группировка.
6. Добавьте типографику, изображения и цвет. Не ломайте иерархию, которая уже работала в монохроме.
7. Проверьте макет на реальном размере, соберите обратную связь и исправьте маршрут взгляда.

ВажноЦвет не спасает слабую структуру. Если черно-белый эскиз не показывает доминанту и баланс, сначала исправьте размеры, положение и интервалы.

Павел Алтунин — UX/UI дизайнер, веб-дизайнер

Для тренировки полезно делать композиционный конспект: превратить чужой макет в набор серых прямоугольников и отметить порядок внимания. Затем собрать новый вариант с теми же смысловыми уровнями, но другой сеткой и формами. Так развивается насмотренность без прямого копирования.

3 упражнения для тренировки композиции

Упражнение 1. Три решения из одинаковых элементов

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

Упражнение 2. Иерархия без цвета

Переведите макет в оттенки серого и замените изображения нейтральными прямоугольниками. Настройте три уровня внимания только масштабом, тоном и отступами. Когда маршрут станет понятен, верните цвет и проверьте, не появился ли случайный новый акцент.

Упражнение 3. Композиционный конспект

Выберите сильный сайт или постер и уменьшите его до схемы из 5–7 пятен. Подпишите доминанту, поддерживающие элементы, оси и основные интервалы. Затем создайте собственный макет с той же логикой, но другим содержанием и визуальным языком. Работать со схемами удобно в Figma — основные инструменты разобраны в обзоре программы.

🚫 10 частых ошибок композиции

1. Нет одного главного сообщения. Исправление: сформулируйте цель макета одним предложением и подчините ей доминанту.
2. Все элементы одинаково заметны. Исправление: разведите три уровня по размеру, тону и расстоянию.
3. Случайные отступы. Исправление: задайте шкалу интервалов и отличайте близкие связи от больших пауз.
4. Объекты стоят почти на одной оси. Исправление: либо выровняйте точно, либо сделайте смещение очевидным.
5. Текст теряется на изображении. Исправление: смените кадр, положение, тон фона или добавьте спокойную подложку.
6. Слишком много декоративных приемов. Исправление: оставьте один ведущий контраст и повторяющуюся систему.
7. Пустоту принимают за свободное место для рекламы. Исправление: защищайте негативное пространство, если оно формирует иерархию.
8. Дизайн работает только на одном экране. Исправление: пересобирайте приоритеты для мобильного формата, а не просто уменьшайте desktop.
9. Правило применено без задачи. Исправление: объясните, что именно дают трети, симметрия или диагональ. Если ответа нет, прием лишний.
10. Намеренное нарушение выглядит случайным. Исправление: сначала покажите систему, затем нарушьте одно правило и сохраните остальные связи.

✅ Чек-лист: как проверить композицию

1. За 2–3 секунды понятно, что главное?
2. Есть ли один ожидаемый маршрут от доминанты к действию или выводу?
3. Различаются ли минимум три уровня иерархии?
4. Уравновешены ли левый и правый, верхний и нижний края?
5. Связанные элементы сгруппированы расстоянием или общей областью?
6. Совпадают ли оси, колонки и повторяющиеся интервалы?
7. Не возникает ли ложных связей между соседними объектами?
8. Читаются ли текст, кнопки и важные границы на реальном устройстве?
9. Сохраняется ли структура в оттенках серого, при уменьшении и легком размытии?
10. Решает ли выбранная композиция задачу, а не только следует модному приему?

FAQ

Что такое композиция в дизайне простыми словами?

Это порядок, по которому элементы собраны в макете и воспринимаются зрителем. Композиция показывает, что главное, как связаны части и куда двигаться дальше.

Какие основные правила композиции нужно знать новичку?

Начните с доминанты, визуальной иерархии, баланса, контраста, выравнивания, близости, ритма и свободного пространства. Правило третей и золотое сечение полезны как направляющие, но не заменяют смысловую структуру.

Чем композиционный центр отличается от геометрического?

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

Что такое открытая и закрытая композиция?

В закрытой композиции движение и основные связи остаются внутри формата. В открытой линии, фигуры или кадрирование подразумевают продолжение за его пределами.

Как понять, что в композиции нарушен баланс?

Один край кажется тяжелее, взгляд застревает в случайной детали или макет визуально «падает». Переведите работу в оттенки серого и сравните массу крупных пятен относительно центральной оси.

Можно ли нарушать принципы композиции?

Да, если нарушение усиливает задачу и выглядит намеренным. Обычно меняют один параметр — например, ломают сетку ради акцента, — но сохраняют иерархию, читаемость и логику связей.

Главное

Сильная композиция не обязана быть симметричной, построенной по золотому сечению или визуально спокойной. Она должна быстро передавать приоритеты, поддерживать смысл и соответствовать носителю. Начинайте с задачи и черно-белых пятен, выстраивайте доминанту, баланс и группы, а затем подключайте цвет, шрифт и детали.

Правила дают опору, но профессиональный навык появляется в практике: через десятки эскизов, анализ удачных решений и обратную связь. Именно так композиция перестает быть набором терминов и становится рабочим инструментом дизайнера.

Авторитетные источники

1. Nielsen Norman Group — 5 Principles of Visual Design in UX: масштаб, иерархия, баланс, контраст и гештальт-принципы.
2. Nielsen Norman Group — Visual Hierarchy in UX: цвет, масштаб, близость, группировка и проверка размытием.
3. W3C Web Accessibility Initiative — WCAG 2.2: Contrast (Minimum): требования к контрасту текста.
4. Material Design 3 — Layout overview: адаптивный layout и работа с доступным пространством.
5. Adobe Creative Cloud — An introduction to the golden ratio: значение пропорции и границы ее применения.
6. Nielsen Norman Group — Text Scanning Patterns: паттерны сканирования веб-страниц.