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

У вас есть макет, в котором есть заголовки H1, H2, основной текст, фото (а лучше несколько), паттерн, номер страницы, 10 логотипов спонсоров и тд. Ваша задача — собрать из этих элементов целостную композицию так, чтобы макет выполнял свою функцию и при этом был приятен глазу.

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

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

С чего начать делать композицию и как отделить главное от второстепенного?

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

Композиционный центр нужен для фокусировки внимания на деталях композиции. 

Но при этом композиционный центр и геометрический центр (центр самого макета) композиции могут не совпадать.

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

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

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

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

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

У каждого базового элемента есть свои оптические особенности, которые нужно учесть.

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

2. Треугольник
То же правило касается и острых углов треугольника.

3. Многоугольники и прямоугольники
Выравниваются по центру массы (то есть по композиционному центру, а не по геометрическому).

Как это работает в жизни?

Например, у нас есть заголовок с кирилистической буквой С (или латинской) и блоком с текстом. Чтобы композиция выглядела ок, выравниваем элементы по левой стороне и затем ручками строку с первой буквой С тянем немного влево. Получилось более сбалансировано и не кажется что строка куда-то убежала.

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

Как отделить главное от второстепенного?

Есть несколько приемов, которые ты можешь использовать, чтобы выделить главное из массива элементов. (Многие вещи метчатся с предыдущего урока по типографике).

1. Цветом

В примерах с цветом мы обращаем внимание на то, что является самым контрастным. Здесь вспоминаем, что такое комплиментарные цвета, как работает контраст.

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

2. Размером

Масштаб — вообще золотая вещь. Располагая элементы разных пропорций ты тем самым обращаешь внимание на все эти элементы: и маленькие, и большие, просто в разной последовательности. 

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

Обрати внимание на 2-ю картинку с фигурами: они разные по размеру, но за счет того, что они разного цвета, композиция выглядит сбалансированно: 

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

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

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

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

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

3. Контрастом

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

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

4. Блюр

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

5. Разрыв паттерна

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

6. Люди и лица

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

Пробуй, экспериментируй, миксуй, ищи новый взгляд и выходи за рамки, но соблюдай правила :) 

Чек-лист:

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