Композиция в макете

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

Элементы макета

Базовые элементы макета — это заголовок, текст, иллюстрация и фон.

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

В стаканчике мы видим оформление десерта и дополнительно на ложке видны слои

Додстер развернули, хорошо видна начинка

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

Фон. Фон делаем контрастным к другим элементам. Контраст может быть и по тону, и по светлоте. Также фон не должен быть слишком пёстрым, чтобы не перетягивать на себя внимание и не затруднять чтение текста. Подробнее о цвете рассказали в гайде «Сочетание цветов».

Фон близок к продукту и по тону, и по светлое, продукт теряется на таком фоне

Фон близок по тону, но гораздо темнее продукта — контраст светлого и тёмного

Фон контрастен по тону к продукту — контраст по цвету

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

На макете стоит крупный заголовок «Баварская пицца»

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

Текст. Текстовые блоки на макете мы делаем короткие и однозначные. Где это возможно, используем бирки вместо целых предложений. Например плашка «Новинка» вместо «У нас появилась новая пицца».

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

Название продукта набрано заглавными буквами, а саблайн строчными. Бирка «Новинка» в контрастной плашке

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

Принципы размещения

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

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

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

Выравниваем. Дизайнер следит за выравниваем прямоугольников относительно друг друга, чтобы не было «почти, но не совсем». Выравниваем идеально или разносим в стороны так, чтобы это было очевидно.

Плашка «Новинка» немного сместилась вправо относительно других модулей, но и не встала по центру

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

Макет можно читать как рассказ сверху вниз: у нас появилась новинка, называется «Пицца от шефа», это пицца с пастрами из говядины с соусом ткемали. Автор пиццы — Костя Оганезов, он является бренд-шефом «Додо Пиццы»

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

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

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

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

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

На макете достаточно широкие поля, которые группируют модули

Текст стоит вплотную к краю формата, нарушено правило внутреннего и внешнего, макет рассыпается

Добавление плашки, линейки или рамки всегда создаёт новый формат с собственными полями.

Читать далее: