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

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

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

Вы узнаете:

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

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

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

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

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

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

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

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

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

Активные зоны

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

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

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

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

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

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

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

Пример диаграммы Гутенберга в действии — оформление главной страницы социальной сети «ВКонтакте».

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

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

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

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

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

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

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

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

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

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

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

• на центральной оси и горизонтали, пересекающей её в оптическом центре;

• на диагоналях и особенно в месте их пересечения;

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

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

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

• в центре и чуть выше геометрического центра;
• на сторонах пятиугольника, вписанного в этот круг.

Линии

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

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

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

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

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

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

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

Баланс

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

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

Симметрия

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ритм

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

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

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

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

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

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

Цвет

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

Тон

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

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

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

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

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

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

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

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

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

Яркость

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

Температура

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

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