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

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

Причина часто не в отдельных элементах.

Проблема в том, что они не работают вместе.

На макете всё может быть «красиво», но непонятно:

• куда смотреть сначала;
• что здесь вообще рекламируют;
• где главное предложение;
• что вторично;
• что нужно сделать после просмотра.

Вот это и есть задача композиции.

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

Условно: зацепился → понял предложение → увидел важную деталь → понял, что делать дальше.

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

А рекламу обычно так не смотрят.

Что вообще такое композиция рекламного баннера

Если совсем просто, композиция — это отношения между всеми элементами на макете:

• текстом;
• изображением;
• продуктом;
• ценой;
• логотипом;
• плашками;
• фоном;
• CTA;
• свободным пространством.

Важно не только где находится элемент, но и насколько он заметен относительно остальных.

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

То есть формально заголовок главный.

Визуально — уже нет.

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

С чего начинать композицию баннера

Одна из самых частых ошибок — начинать с дизайна.

Открываем Figma.

Ставим фотографию.

Добавляем заголовок.

Потом цену.

Потом какую-нибудь плашку.

Потом стрелку.

Потом понимаем, что места больше нет.

Гораздо проще сначала ответить на один вопрос:

Что человек должен увидеть первым?

Это может быть:

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

Но желательно выбрать что-то одно.

Не бывает композиции, где одновременно главные:

• заголовок;
• цена;
• товар;
• CTA;
• логотип;
• скидка.

Если всё главное — по факту ничего не главное.

1. Сначала определите визуальную точку входа

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

Допустим, мы делаем рекламу кофе.

Есть два совершенно нормальных варианта.

Вариант 1

Главный элемент — фотография стакана.

Тогда:

• стакан крупный;
• текст работает вокруг него;
• цена или CTA вторичны;
• остальная графика не спорит с изображением.

Вариант 2

Главный элемент — оффер:

Тогда главным может стать текст.

Фотография кофе уже поддерживает сообщение.

Оба решения рабочие.

Проблема появляется, если и стакан огромный, и заголовок огромный, и цена огромная, и рядом ещё красный круг «ТОЛЬКО СЕГОДНЯ».

Глаз начинает прыгать между элементами.

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

2. Не путайте размер с важностью

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

Но визуальная иерархия строится не только размером.

На внимание влияют:

• контраст;
• цвет;
• положение;
• насыщенность;
• свободное пространство вокруг объекта;
• форма;
• необычность элемента.

Например, маленькая ярко-красная плашка на спокойном светлом фоне иногда заметнее огромного серого заголовка.

Поэтому полезно периодически смотреть на макет немного издалека.

Не читать текст.

Просто спросить себя:

Если ответ отличается от задуманного — иерархия уже нарушена.

3. Композиция должна работать без чтения мелкого текста

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

Представьте, что текст слегка размыт.

Остаётся только:

• крупный заголовок;
• изображение;
• цветовые пятна;
• цена;
• кнопка;
• акцентные элементы.

Понятно ли, что здесь главное?

Если нет — добавление ещё одного текста ситуацию обычно не спасёт.

Наоборот, станет только тяжелее.

Это хороший тест для любого рекламного креатива.

4. Не заполняйте всё свободное пространство

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

Остаётся свободный участок?

Надо поставить:

• иконку;
• стрелку;
• текст;
• градиент;
• маленькую подпись;
• декоративный объект.

Но свободное пространство — это тоже элемент композиции.

Оно помогает:

• отделить смысловые блоки;
• усилить главный объект;
• сделать текст легче;
• дать взгляду остановиться.

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

Если вокруг неё ещё:

• старая цена;
• скидка;
• три преимущества;
• звезда;
• стрелка;
• подпись;

то визуальный акцент исчезает.

Поэтому хороший вопрос при финальной проверке макета:

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

5. Текст лучше собирать в группы, а не рассыпать по макету

Допустим, на баннере есть:

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

И пользователю приходится самому понимать, что с чем связано.

Гораздо лучше собрать информацию в смысловые группы.

Основной блок

Онлайн-курс английского
Первый урок бесплатно

Коммерческий акцент

-30% до 15 сентября

Действие

Начать обучение

Так макет становится проще даже при том же количестве текста.

Композиция — это не только координаты объектов.

Это ещё и логическая группировка информации.

6. Изображение должно помогать тексту, а не бороться с ним

Есть очень типичный сценарий.

Берём красивую фотографию.

Она сама по себе уже насыщенная:

• человек;
• предметы;
• яркий фон;
• свет;
• детали.

И сверху пытаемся поставить ещё:

• заголовок;
• цену;
• кнопку;
• плашку.

В итоге фотография мешает информации, а информация портит фотографию.

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

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

Например:

• человек справа — текст слева;
• товар снизу — заголовок сверху;
• центральный объект — текст вокруг;
• объект на спокойном фоне — текст поверх фона.

Это особенно важно при генерации изображений через нейросети.

Вместо «девушка держит телефон» лучше сразу задавать:

Тогда изображение создаётся под будущую композицию, а не наоборот.

Как подготовить изображение под макет с помощью Nano Banana →

7. CTA не обязан быть самым заметным элементом

Иногда кнопку специально делают огромной, красной и контрастной.

Но пользователь ещё даже не понял предложение.

Зачем ему нажимать?

Обычно логика должна быть примерно такой: интерес → предложение → детали → действие.

CTA важен, но он необязательно должен первым попадать в глаза.

Например:

Здесь заголовок и скидка могут быть визуально сильнее кнопки.

И это нормально.

CTA завершает маршрут.

Он не обязан начинать его.

7 рабочих композиционных схем для рекламного баннера

Нет одной универсальной схемы.

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

Схема 1. Объект справа — текст слева

Одна из самых универсальных.

Слева:

• заголовок;
• предложение;
• CTA.

Справа:

• товар;
• человек;
• изображение.

Когда подходит:

• товарная реклама;
• услуги;
• приложения;
• образовательные продукты;
• рекламные Stories.

Главное преимущество: текст и изображение физически не мешают друг другу.

Частая ошибка: забивать обе стороны одинаковым количеством деталей.

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

Схема 2. Центральный объект

Товар или персонаж находится в центре.

Информация располагается:

• сверху;
• снизу;
• вокруг.

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

Например:

• обувь;
• косметика;
• техника;
• напитки;
• упаковка.

Главная опасность: начать окружать объект десятком декоративных деталей.

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

Схема 3. Крупная типографика

Главный объект — сам текст.

А товар становится вторичным.

Такой подход полезен, когда:

• оффер очень сильный;
• изображение не является главным аргументом;
• нужно быстро передать простое сообщение.

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

Схема 4. Диагональная композиция

Элементы идут условно по диагонали: от верхнего левого угла к нижнему правому или наоборот.

Она добавляет движение.

Хорошо подходит для:

• спорта;
• мероприятий;
• молодёжной рекламы;
• динамичных продуктов.

Но диагональ сама по себе не делает дизайн интересным.

Если пользователь не понимает маршрут, получится просто хаос под углом.

Схема 5. Разделение макета на две части

Например:

50% фотография + 50% текст

или:

верх — изображение / низ — информация

Одна из самых безопасных схем.

Особенно полезна, если:

• информации много;
• изображение сложное;
• текст должен оставаться максимально читаемым.

Минус только один: если сделать всё слишком аккуратно, баннер может выглядеть скучно.

Это решается не хаосом, а хорошей типографикой, цветом и акцентами.

Схема 6. Карточная структура

Информация собирается в отдельные блоки:

• цена;
• характеристики;
• преимущества;
• CTA.

Хорошо работает для:

• тарифов;
• курсов;
• сервисов;
• приложений;
• мероприятий.

Но здесь легко превратить рекламный баннер в интерфейс приложения.

Если карточек становится слишком много, человек перестаёт видеть рекламное сообщение.

Схема 7. Свободная асимметрия

На первый взгляд элементы располагаются свободно.

Но у хорошей асимметричной композиции всё равно есть система:

• визуальный баланс;
• направление;
• иерархия;
• повторение форм;
• интервалы.

Это более сложный вариант.

Его не стоит понимать как «просто раскидаем элементы как-нибудь необычно».

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

Как понять, что композиция не работает

1. Вы не можете назвать главный элемент

Если на вопрос «Что здесь главное?» ответ:

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

2. Взгляд мечется

Сначала видите:

• цену;
• потом картинку;
• потом логотип;
• потом возвращаетесь к заголовку.

Маршрут случайный.

3. Всё одинаково контрастное

Все элементы:

• жирные;
• цветные;
• крупные;
• в плашках.

Нет визуальной глубины.

4. После уменьшения баннер разваливается

Откройте макет не на весь монитор, а примерно в том размере, в котором человек реально увидит его в ленте.

Часто именно здесь становится понятно, что:

• заголовок мелкий;
• CTA потерялся;
• деталей слишком много;
• фотография вообще не читается.

5. Приходится объяснять дизайн словами

Если дизайнер говорит:

но без объяснения этого не происходит — проблема в композиции.

Правильная иерархия должна работать визуально.

Практический способ собрать композицию с нуля

Если вы часто застреваете перед пустым фреймом, попробуйте такой порядок.

Шаг 1. Запишите главный смысл одним предложением

Не начинайте дизайн раньше этого момента.

Шаг 2. Выберите главный акцент

Что важнее: суши или -30%?

Допустим, скидка.

Шаг 3. Соберите только три элемента

Сначала:

• скидка;
• фотография;
• основной заголовок.

Без:

• логотипа;
• кнопки;
• преимуществ;
• декоративных элементов.

Посмотрите, работает ли основа.

Шаг 4. Постройте маршрут взгляда

Это уже практически готовый каркас композиции.

Шаг 5. Только теперь добавляйте детали

Например:

• CTA;
• плашку;
• небольшой дополнительный текст;
• логотип.

Каждый новый элемент должен отвечать на вопрос: зачем он здесь?

Если ответа нет, скорее всего, элемент не нужен.

Пошаговая сборка рекламного баннера в Figma →

Почему готовые креативы полезно разбирать, а не просто копировать

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

Потому что тогда становится видно:

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

Именно поэтому готовые исходники могут быть полезнее обычных референсов из Pinterest.

На Pinterest вы видите результат.

В Figma можно буквально разобрать его на части.

Как выбирать и адаптировать готовые шаблоны баннеров →

Как я бы использовал Designer Pack для тренировки композиции

В Designer Pack есть готовые рекламные креативы и отдельный конструктор из редактируемых элементов: плашек, кнопок, бейджей, блоков УТП и других деталей.

Но полезнее всего не просто открыть макет и заменить текст.

Можно использовать его как упражнение.

Вариант 1

Открыть готовый креатив и определить:

• главный элемент;
• второй уровень;
• третий уровень;
• маршрут взгляда.

Вариант 2

Удалить часть элементов и посмотреть, стала ли композиция сильнее.

Вариант 3

Оставить текст и изображение, но полностью перестроить расположение.

Вариант 4

Взять отдельные элементы из конструктора и собрать совершенно новый макет.

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

Короткий чек-лист композиции рекламного баннера

Перед экспортом я бы проверил семь вещей:

1. Я понимаю, что вижу первым?
2. Главное сообщение считывается быстро?
3. Текст и изображение не спорят друг с другом?
4. Есть свободное пространство?
5. Информация собрана в понятные группы?
6. CTA находится там, где заканчивается визуальный маршрут?
7. Макет остаётся понятным в небольшом размере?

Если хотя бы на два-три вопроса ответ «не уверен» — лучше ещё раз посмотреть на композицию до работы с мелкими деталями.

Итог

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

Наоборот.

Часто самые сильные решения построены всего на нескольких элементах:

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

Главная задача дизайнера — не заполнить фрейм.

Задача — решить, куда человек посмотрит сначала и что он поймёт после этого.

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

Если не работает — никакой красивый декор композицию не спасёт.

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

Сначала ответьте на два вопроса:

В большинстве случаев хорошая композиция начинается именно с них.