Дизайн
#статьи

Правила композиции: большой разбор

Знакомим с главными приёмами композиции в дизайне и показываем, как они работают в айдентике, рекламе и интерфейсах.

Иллюстрация: Полина Честнова для Skillbox Media

Как отличить хороший дизайн от плохого? За первое впечатление отвечает композиция. Именно благодаря ей мы находим что-то «красивым» или можем сказать: «Мне почему-то не нравится». Композиция направляет взгляд, задаёт ритм, делает изображение гармоничным или, наоборот, отталкивающим.

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

Вы узнаете:


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

Композиция — это расположение и соотношение элементов, которое заставляет их работать вместе и влияет на восприятие зрителя.

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

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

Особенности зрительного восприятия

Объединение элементов

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

Сложная композиция из простых по смыслу элементов в иллюстрации
Изображение: Bang! Bang! Studio / mina milk / Anna Manturova / Behance

Признаки, по которым мы объединяем элементы в композицию:

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

В качестве примера можно привести вёрстку поисковой страницы Google.

Скриншот: сайт Google / Skillbox Media
Изображение: Polina Vari для Skillbox Media

Акценты в композиции

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

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

Структурная решётка Рудольфа Арнхейма: круги и линии показывают области внимания и движение взгляда
Изображение: Polina Vari для Skillbox Media

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

Диаграмма Гутенберга
Изображение: Polina Vari для Skillbox Media

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

Самая важная информация для того, кто ищет жильё, — цена. В дизайне приложения она расположена слева вверху
Скриншот: «ЦИАН» / Skillbox Media

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

Строка поиска в приложении почты расположена сверху
Скриншот: Google / Skillbox Media

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

В левом нижнем углу часто располагают формально необходимые, но не самые значимые детали. Например, герб или юридическую информацию
Изображение: RZLT AGENCY / Oleg Mushta / Anna-Maria Kandales-Vorobeva / Tolya Doodko / Andrey Trukhan / Behance

Правый нижний угол — заключительная область. Здесь взгляд останавливается. Эту область часто используют для CTA, call to action, — призыва к действию: например, размещают кнопку чата с оператором или регистрации на сайте.

В минималистичном дизайне сайта кнопка для записи на сеанс занимает правый нижний угол
Скриншот: сайт «Ляг.Спиной» / Skillbox Media

Таким образом, знание принципов Рудольфа Анхейма и диаграммы Гутенберга помогает дизайнерам не только привлечь внимание к элементу, но и «спрятать» его.

Информация об организации не привлекает внимание не только потому, что набрана светло-серым нейтральным гротеском, но и потому, что находится в левом нижнем углу
Скриншот: сайт Svalka / Skillbox Media

Правило третей

Правило третей обычно применяют в плакатной графике, фотографии, рекламе.

Активные точки находятся на пересечении линий, которые делят пространство прямоугольного листа на девять равных частей, или самих линиях.

Сетка на экране в iOs и Android помогает располагать главные элементы в композиции снимка
Скриншот: Skillbox Media

Человеческий глаз естественным образом останавливается в этих точках, а возникающая асимметрия создаёт достаточное напряжение: когда композиция разделена на трети, ни одна из точек не совпадает с центром.

Главная страница сайта Flecto построена по правилу третей
Скриншот: сайт Flecto / Skillbox Media
CGI-картинка для рекламного вижуала собрана по правилу третей
Изображение: BRUDO CGI / Lew Black / Danil Koltsov / Behance

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

Центры композиции

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

Участки, которые привлекают внимание зрителя в первую очередь, называются фокальными точками.

Геометрический центр композиции — самая простая из них, поскольку находится в центре рабочей плоскости. Например, в прямоугольнике и квадрате геометрический центр располагается на пересечении двух диагоналей. Любой объект, помещённый в эту точку, будет привлекать внимание.

Изображение жеста «сердечко» — не самый крупный и яркий элемент в композиции, но на этой фотографии он привлекает внимание, потому что находится в центре
Изображение: Camille Charbonneau / Behance

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

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

Key visual парфюмерной воды Dior. Здесь три композиционных центра: портрет актрисы, продукт с названием над ним, логотип компании
Изображение: дизайн агентства Leap

Расположение фокальных точек во многом зависит и от того, какая фигура лежит в основе композиции или рабочего пространства.

В прямоугольнике и квадрате привлекают внимание объекты, расположенные:

  • На центральной оси и горизонтали, пересекающей её в оптическом центре.
Айдентика для пекарни: изображение продукта и бренд-элементов в центре
Изображение: BAKE INC. / Behance
  • На диагоналях и особенно в месте их пересечения.
Имя бренда на билборде расположено по диагонали
Изображение: Magnum / Depot
  • На границах овала или круга, вписанных в прямоугольник рабочего пространства.
Рекламный плакат Nike. Три ключевых элемента композиции — лицо, ракета и грудь спортсменки образуют треугольник
Изображение: Nike / дизайн компании Wieden Kennedy

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

Логотип Prada на застёжке сумки
Изображение: Prada

В круге фокальные точки расположены:

  • в центре и чуть выше геометрического центра;
  • на сторонах пятиугольника, вписанного в этот круг.
Логотип Tilda Publishing
Изображение: Wikimedia Commons

Линии

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

Горизонтальная линия в состоянии покоя и равновесия даёт ощущение устойчивости и комфорта.

Шот из рекламы смартфона Honor: изображения линз расположены вдоль линии горизонта
Изображение: Ollie studio / SaMa Youth / L Joey / Yibing Wan / NC FAN / Ori. F / Behance

Вертикальная линия создаёт впечатление роста, мощи и стабильности, потому что противостоит силе тяжести.

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

Иллюстрация для The New Yorker. Композиция построена на вертикальной линии
Изображение: Joseph Gerardi / Tobie Giddio / Q Studios Inc. / Behance
Вертикаль — классическое решение в киноплакатах
Изображение: Disney+ / HBO

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

  • Нисходящая диагональ. Она идёт от левого верхнего угла к правому нижнему и даёт визуальный эффект ускорения, движения, поэтому её часто называют динамической диагональю.
Реклама Decathlon. Люди с лёгкостью занимаются пробежкой в хорошую погоду — нисходящая диагональ подчёркивает это настроение
Изображение: Decathlon / VMLY& R
  • Восходящая диагональ — идёт от левого нижнего угла к правому верхнему и создаёт в композиции ощущение замедления или прилагаемых усилий. Её называют статической диагональю.
Если перевернуть плакат, то бег фигур становится гораздо тяжелее, а догоняющая их волна несёт опасность — это ощущение создаётся восходящей диагональю
Изображение: Decathlon / VMLY& R

Движение взгляда слева направо всегда происходит быстрее, чем справа налево. Это необходимо учитывать при построении сюжета. На примере выше тревожное ощущение вызывает нисходящая диагональ: люди бегут медленно, и их вот-вот накроет волна.

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

Фото: muratcankaragoz / Shutterstock
Фото: muratcankaragoz / Shutterstock
Восходящая диагональ символизирует взлёт и передаёт идею успеха, которого Юрий Пименов достиг трудом, то есть художник прилагал усилия
Изображение: Katya Yumasheva / Behance

Баланс

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

Баланс в композиции заключается в расположении элементов таким образом, чтобы они были стабильны и устойчивы или, наоборот, обладали динамикой за счёт неуравновешенности.

Симметрия

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

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

Симметрия по центральной оси в дизайне лендинга
Изображение: Paul Russell / Kallan & Co / Behance
Мелкие дополнительные элементы в «клеточках» не нарушают доминирование симметрии на этом фото
Изображение: Anna Rosa Scognamillo / Behance

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

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

Асимметрия в минималистичном дизайне конверта для пластинки
Изображение: Non-Format / Behance
Баланс и асимметрия в фотокомпозиции делают её динамичной, несмотря на спокойную палитру и текстуры
Изображение: IBEA Design / Iris Fan / GuoHao Yuan / Behance

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

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

Логотип компании, которая занимается энергетикой и инженерией, радиально симметричен и выглядит простым, хотя в нём заложена визуальная метафора
Изображение: Mauricio Zanon® / Behance

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

Логотип Microsoft — пример мозаичного баланса
Изображение: Wikimedia Commons
Организованный хаос плаката
Изображение: Federica Musumeci / Studio K95 / Danilo De Marco / Behance

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

Золотое сечение

Соотношение объектов, которое имеет наиболее приятные для восприятия пропорции формы или структуры, получило название золотого сечения.

Оно определяет отношение большей части к меньшей так же, как и большей к целому. Из-за этого его удобно применять для подбора размеров элементов. Древние греки вывели универсальное число этой пропорции — 1,68. Увеличивая элементы относительно друг друга согласно этому соотношению, можно получать гармоничные структуры.

Изображение: Polina Vari для Skillbox Media

Также для создания гармоничных композиций используется золотая спираль, организованная по принципу золотого сечения — на её линии располагают ключевые элементы.

Построение золотой спирали
Изображение: Oleh Svetiukha / Shutterstock

Негативное и позитивное пространство

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

Негативное пространство значимо при группировке элементов, отделении главного от второстепенного. Оно же делает дизайн воздушным.

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

Мини-композиции, построенные на взаимодействии негативного и позитивного пространства, в анимированном рекламном баннере
Изображение: Vasilii Oleshko / Anna Zhitkova / Roma Cicada / QB SOUND / Olya Kuzevanova / Maksim Tleubaev / Behance
Логотип проекта под названием «23»
Изображение: Ala Kallala / Behance

Ритм

Ритм в композиции создаёт упорядоченное движение. Ритмические узоры строятся из похожих элементов и интервалов между ними.

Существует три основных типа ритма:

  • Регулярный ритм: интервалы между элементами предсказуемы или сами элементы схожи по размеру и длине. Регулярный ритм статичен, но делает дизайн живым за счёт контраста.
Регулярный ритм форм в логотипе
Изображение: Alex Monzó / Behance
  • Плавный ритм: повторяющиеся элементы следуют изгибам и волнистым линиям. Каждый из них при этом уникален, хоть и похож на предыдущий. В природе подобный ритм встречается в окрасе животных — тигров или зебр, он образуется на годовых кольцах деревьев или отпечатке пальца. Такое ритмическое построение создаёт ощущение плавного движения.
Логотип для компании, которая производит мебель из дерева
Изображение: Abderraouf gh / Behance
  • Прогрессирующий ритм возникает, когда формы или фигуры при каждом своём повторении последовательно меняют форму, размер, также он задаётся изменяющимися интервалами между элементами. Это создаёт иллюзию движения.
Композиция на упаковке «излучает» движение за счёт прогрессирующего ритма
Изображение: KJ Zhang / Behance

Вариации в структуре всегда заставляют её выглядеть интереснее. Ритм предсказуем, а неожиданное отличие элемента выпадает из структуры и на мгновение приостанавливает движение взгляда.

Логотип Центра Помпиду состоит из линий с равномерным ритмом, которые рассекает диагональ, изображающая лестницу на фасаде здания
Изображение: официальный сайт Centre Pompidou
Фасад Центра Помпиду
Фото: официальный сайт Centre Pompidou

Цвет

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

Наиболее гармонично сочетание цветов работает по правилу 60–30–10: 60% составляет основной цвет, 30% — поддерживающий, а 10% — яркий акцент.

Тон

Большой вклад в исследования цвета внёс Иоханнес Иттен, предложив модель цветового круга. Согласно ей, все цвета (тона) можно разделить на три категории: комплементарные, аналоговые и триадические.

В этой статье мы подробно рассказываем об устройстве цветового круга и о работе с ним.

Цветовой круг Иттена
Изображение: Skillbox Media

Комплементарные, или дополнительные, цвета — это противоположности на цветовом круге, например красный и зелёный.

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

Фирменная типографика для WeWork: композиции из текстов и изображений комплементарных цветов
Изображение: дизайн студии Gretel

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

В дизайне журнального разворота использовали снимки с аналоговыми цветами: зелёным, салатовым и голубым
Изображение: Roman U / Behance

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

Использование триадической цветовой схемы создаёт визуальный контраст, но не делает образ кричащим.

Скриншот: https://vespahistory.tilda.ws/ / Skillbox Media

Читайте также:

Что может цвет

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

Насыщенность

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

Насыщенный голубой среди монохромных цветов сразу привлекает внимание
Изображение: Konstantin Kapustin / ktonado .digital / Avramov Arseniy / Vladimir Melnikov / Lev Portnykh / Ksenia Kozhevnikova-Bergel / Behance
Если на изображении основные цвета яркие, «собрать» композицию и добавить ей динамики поможет пятно насыщенного чёрного или белого
Изображение: Konstantin Kapustin / ktonado .digital / Avramov Arseniy / Vladimir Melnikov / Lev Portnykh / Ksenia Kozhevnikova-Bergel / Behance

Яркость

Яркость влияет на то, насколько оттенок светлый или тёмный. Она используется для направления взгляда зрителя и создания акцента в композиции: светлый цвет будет более заметен на тёмном фоне, и наоборот.

Изображение: Jennifer Esseiva / Behance
Яркое пятно на чёрном и белый текст на чёрном привлекают больше внимания, чем чёрный текст на белом
Изображение: Dima Litvinov / Matt Stasyuk / Anastasiia Zueva / SETTERS AGENCY / Kseniya Zhavoronok / Behance

Температура

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

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

Жёлто-бежевые и серые элементы находятся примерно в одной плоскости, но первые кажутся ближе и значимее
Изображение: Julia Potato / Behance

Больше интересного про дизайн в нашем телеграм-канале. Подписывайтесь!

Жизнь можно сделать лучше!
Освойте востребованную профессию, зарабатывайте больше и получайте от работы удовольствие.
Каталог возможностей
Понравилась статья?
Да

Пользуясь нашим сайтом, вы соглашаетесь с тем, что мы используем cookies 🍪

Ссылка скопирована