Хорошие шрифты, фотография и аккуратная кнопка ещё не делают рекламный баннер понятным. Если все элементы одинаково требуют внимания, взгляд начинает перескакивать между ними, а главное сообщение теряется.
Поэтому композицию лучше начинать не с вопроса «куда поставить текст», а с другого: что человек должен увидеть первым, что — вторым и что — третьим. Когда эта последовательность понятна, расположить остальные элементы намного проще.
Что такое композиция рекламного баннера
Композиция рекламного баннера — это система отношений между всеми элементами макета:
- текстом;
- изображением или продуктом;
- ценой и скидкой;
- призывом к действию (CTA);
- логотипом;
- фоном;
- декоративными деталями;
- свободным пространством.
Важно не только положение элемента, но и его визуальный вес — насколько сильно он притягивает внимание по сравнению с остальными.
Например, заголовок может занимать правильное место в верхней части баннера, но рядом находится крупная красная плашка «−50%». Формально главным считается заголовок, а фактически первым человек замечает скидку.
Поэтому композиция — это не просто аккуратная расстановка объектов. Это ответ на три вопроса:
Куда человек посмотрит сначала? Что поймёт после этого? Куда взгляд должен перейти дальше?
Если на макете нет понятного ответа, элементы начинают конкурировать друг с другом.
Сначала реши, что человек должен увидеть первым
Начинать композицию сразу с Figma неудобно. Появляется фотография, затем заголовок, цена, плашка, стрелка, логотип — и через несколько минут фрейм уже заполнен, хотя приоритеты так и не определены.
Рабочий порядок другой.
1. Сформулируй одно главное сообщение
Попробуй описать смысл баннера одним предложением.
Например:
Доставка суши со скидкой 30%.
Или:
Новая коллекция кроссовок уже в продаже.
Если в одном предложении приходится перечислять пять преимуществ, скорее всего, на один рекламный креатив пытаются возложить слишком много задач.
2. Выбери главный визуальный акцент
Это не обязательно текст.
Главным может быть:
- продукт;
- человек;
- цена;
- скидка;
- короткий оффер;
- результат услуги;
- необычное изображение.
Для рекламы кофе главным можно сделать крупный стакан. Тогда текст поддерживает изображение.
В другом баннере главным может стать фраза «2 кофе по цене одного», а фотография будет уже вторым уровнем.
Оба решения нормальны. Проблема начинается, когда одновременно увеличены стакан, заголовок, скидка, цена и кнопка.
3. Определи второй и третий уровень
Удобно временно забыть о конкретных цветах и представить макет как три уровня внимания:
1 — главный акцент.
То, с чего начинается знакомство с баннером.
2 — основная информация.
Оффер, пояснение или продукт, который раскрывает первый уровень.
3 — действие или второстепенная информация.
CTA, дополнительное условие, логотип.
Три уровня не означают, что на баннере должно быть ровно три элемента. Один уровень может состоять из целой группы: например, цена, старая цена и подпись о скидке воспринимаются как единый смысловой блок.
Главное — чтобы пять отдельных элементов не выглядели как пять одинаково важных сообщений.
Основные принципы композиции рекламного баннера
Один главный визуальный акцент
Частая проблема — не отсутствие акцента, а их избыток.
Представь товарный баннер, где одновременно есть:
- крупный товар;
- огромный заголовок;
- яркая цена;
- красный круг со скидкой;
- контрастная кнопка;
- декоративная стрелка.
Каждый элемент сам по себе может выглядеть нормально. Вместе они создают конкуренцию.
Попробуй задать макету один главный вопрос: что здесь важнее всего?
Если это товар — дай ему больше визуального веса, а скидку и текст ослабь.
Если главное — «−50%», товар может стать поддерживающим объектом.
Если главное — сильный оффер, изображение иногда вообще не должно конкурировать с типографикой.
Не нужно делать остальные элементы незаметными. Нужно сделать их вторичными относительно главного.
Визуальная иерархия: первый, второй и третий уровень
Размер — самый очевидный способ управлять вниманием, но далеко не единственный.
На визуальный вес влияют:
- масштаб;
- контраст;
- цвет;
- насыщенность;
- положение;
- количество свободного пространства вокруг;
- форма;
- плотность деталей.
Небольшая красная плашка на спокойном светлом фоне может привлекать больше внимания, чем крупный серый заголовок.
Поэтому не стоит строить иерархию только по принципу:
важное = большое.
Лучше смотреть на элементы относительно друг друга.
Простой тест: отодвинься от экрана или уменьши макет и спроси себя:
Что я вижу первым? Что вторым? Что третьим?
Если реальная последовательность отличается от задуманной, композицию стоит поправить.
Группировка и выравнивание
Композиция разваливается не только из-за слишком большого количества элементов. Иногда информации немного, но она выглядит как набор отдельных объектов.
Например:
−30%
Только до воскресенья
На всю коллекцию
Если между этими тремя строками случайные интервалы и разное выравнивание, мозгу приходится отдельно считывать каждый элемент.
Если собрать их в один блок:
−30%
На всю коллекцию
до воскресенья
они начинают восприниматься как единое предложение.
Полезный принцип: чем сильнее элементы связаны по смыслу, тем заметнее эта связь должна быть визуально.
Для этого помогают:
- одинаковое выравнивание;
- меньшие интервалы внутри группы;
- больший отступ между разными группами;
- общий фон или плашка, если она действительно нужна.
Выравнивание тоже работает как связь. Если заголовок, описание и кнопка начинаются с одной вертикальной линии, они уже воспринимаются более цельно.
Баланс и визуальный вес
Баланс не означает, что слева и справа должно находиться одинаковое количество объектов.
Представь крупную фотографию человека справа. Слева расположены только заголовок и кнопка.
По количеству элементов стороны неравны, но композиция вполне может быть сбалансированной: большая масса фотографии компенсируется контрастной типографикой и свободным пространством.
О визуальном весе удобно думать через пары:
- крупное ↔ маленькое;
- тёмное ↔ светлое;
- насыщенное ↔ спокойное;
- плотное ↔ пустое;
- контрастное ↔ нейтральное.
Если справа находится большой тёмный объект, не обязательно ставить слева второй такой же. Иногда достаточно компактного, но контрастного текстового блока.
Проверяй не симметрию координат, а ощущение: не заваливается ли весь макет визуально в одну сторону?
Свободное пространство
Одна из типичных ошибок начинающего дизайнера — воспринимать пустое место как незаполненный участок.
Остаётся пространство — хочется добавить туда:
- стрелку;
- иконку;
- подпись;
- декоративную фигуру;
- ещё одно преимущество.
Но свободное пространство выполняет конкретную функцию: разделяет группы и усиливает важные элементы.
Сравни цену в двух макетах.
В первом вокруг неё достаточно воздуха.
Во втором рядом находятся старая цена, скидка, звезда, три преимущества, подпись и стрелка.
Во втором варианте информации больше, но сам ценовой блок может стать менее заметным.
Поэтому при финальной проверке полезнее спрашивать не «что ещё добавить?», а:
Что здесь можно убрать без потери смысла?
Иногда именно после удаления пары декоративных элементов появляется нормальная композиция.
Изображение и текст должны работать вместе
Красивое изображение ещё не означает, что оно подходит для рекламного баннера.
Представь фотографию, где одновременно есть человек, интерьер, яркая одежда, несколько предметов и сложный свет. Если поверх неё добавить заголовок, цену и кнопку, фотография начинает мешать информации, а информация — фотографии.
Перед выбором визуала полезно заранее понимать, где будет находиться текст.
Рабочие варианты:
- объект справа — текст слева;
- объект слева — текст справа;
- товар по центру — информация сверху и снизу;
- фотография со спокойной зоной под текст;
- отдельные зоны для изображения и текстового блока.
Если изображение генерируется нейросетью, композицию можно заложить уже в промпт: например, разместить человека справа и оставить более спокойную левую часть кадра.
Главный принцип простой: изображение должно создавать место для информации, а не заставлять дизайнера искать свободный угол поверх готовой фотографии.
CTA завершает маршрут, но не обязан начинать его
Кнопка важна, но это не значит, что она всегда должна быть самым крупным и контрастным объектом.
Представь рекламу:
Кроссовки до −40%
Новая коллекция
Смотреть модели
Если пользователь сначала замечает «до −40%», затем видит продукт и только потом действие — это нормальная последовательность.
Если огромная красная кнопка «Купить» перетягивает внимание раньше, чем человек успел понять предложение, иерархия становится странной.
CTA можно сделать хорошо заметным, но его визуальный вес должен соответствовать роли в конкретном макете.
Универсального правила «кнопка всегда самая яркая» нет.
Рабочие схемы композиции баннера
Композиционная схема — не готовый дизайн. Это каркас, который помогает начать работу и распределить основные зоны.
Текст слева — объект справа
Слева располагаются заголовок, пояснение и CTA. Справа — товар, человек или другое ключевое изображение.
Когда подходит: товарная реклама, услуги, приложения, образовательные продукты.
Главное: либо текстовый оффер, либо объект — заранее реши, кто получает больший визуальный вес.
Вторичная информация: небольшие детали можно собрать под заголовком или рядом с CTA.
Типичная ошибка: одинаково насыщать обе половины. Тогда вместо единой композиции появляются два отдельных баннера внутри одного.
Центральный объект
Продукт или персонаж становится центром композиции, а информация выстраивается вокруг него.
Когда подходит: обувь, косметика, техника, напитки, упаковка и другие продукты, которые хорошо работают визуально.
Главное: центральный объект.
Вторичная информация: заголовок сверху или сбоку, условия и CTA ниже.
Типичная ошибка: окружить продукт таким количеством подписей и декора, что центральный объект перестаёт быть главным.
Крупная типографика
Главным визуальным элементом становится текст:
SALE
−50%
НОВАЯ КОЛЛЕКЦИЯ
Изображение может быть небольшим или вообще отсутствовать.
Когда подходит: короткий сильный оффер, мероприятие, распродажа, анонс.
Главное: одна фраза или число.
Вторичная информация: пояснение и действие.
Типичная ошибка: использовать крупную типографику для длинного предложения. Вместо сильного акцента получается огромный абзац.
Разделение изображения и текста
Макет делится на две выраженные зоны: например, фотография занимает верхнюю или левую часть, информация — нижнюю или правую.
Когда подходит: сложные фотографии, большое количество обязательного текста, спокойная коммерческая коммуникация.
Главное: зависит от задачи — изображение или заголовок.
Вторичная информация: удобно размещается внутри отдельной текстовой зоны.
Типичная ошибка: механически делить баннер ровно пополам, не учитывая визуальный вес содержимого.
Диагональная композиция
Крупные элементы образуют направление по диагонали. Такая конструкция может добавить ощущение движения.
Когда подходит: спорт, события, автомобильная тематика, динамичные продукты.
Главное: объект или заголовок в начале визуального маршрута.
Вторичная информация: располагается вдоль общей логики композиции.
Типичная ошибка: воспринимать диагональ как декор и просто наклонять случайные элементы. Движение появляется не от угла наклона, а от связи между объектами.
Карточная структура
Информация собирается в несколько чётких блоков: например, основной оффер, преимущества и действие.
Когда подходит: когда в баннере действительно нужно показать несколько отдельных смысловых единиц.
Главное: один крупный блок.
Вторичная информация: более спокойные карточки или плашки.
Типичная ошибка: сделать каждую карточку одинаково контрастной. Структура появляется, но иерархия исчезает.
Свободная асимметрия
Элементы не привязаны к очевидному делению пополам или центру, но их визуальный вес остаётся сбалансированным.
Когда подходит: fashion, креативные кампании, дизайн с крупной типографикой и нестандартными изображениями.
Главное: один доминирующий объект или текст.
Вторичная информация: может находиться в разных частях макета, если связь между элементами остаётся понятной.
Типичная ошибка: путать асимметрию со случайностью. Если каждый объект расположен «интересно» сам по себе, целостной композиции может не получиться.
Правило третей, Z-паттерн и сетки: инструменты, а не законы
Правило третей удобно использовать, когда сложно найти положение для основного объекта. Раздели фрейм условной сеткой 3 × 3 и попробуй сместить ключевой элемент к одной из опорных зон вместо автоматического центрирования.
Это может помочь найти более интересную композицию, но не означает, что центральное расположение хуже.
Z-паттерн тоже лучше воспринимать как один из возможных способов расположить опорные точки, а не как доказанную последовательность просмотра любого рекламного баннера.
Например, можно поставить:
- первый акцент сверху слева;
- продукт или ключевое сообщение ближе к центру;
- CTA справа внизу.
Но если самый контрастный объект находится в другом месте, взгляд вполне может начать маршрут именно с него.
То же относится к модульным сеткам. Сетка помогает:
- выравнивать элементы;
- сохранять интервалы;
- собирать группы;
- контролировать структуру.
Она не принимает композиционное решение вместо дизайнера.
Начинай со схемы, если она помогает выйти из пустого фрейма, но проверяй результат по реальной визуальной иерархии.
Как собрать композицию баннера с нуля
Если перед тобой пустой фрейм и набор материалов, можно идти по следующему порядку.
Шаг 1. Запиши основной оффер
Например:
Доставка суши со скидкой 30%.
Пока смысл нельзя сформулировать коротко, рано заниматься декором.
Шаг 2. Определи главный элемент
Что важнее для этого конкретного баннера:
−30% или фотография суши?
Допустим, главным становится скидка.
Шаг 3. Поставь только 2–3 основных объекта
Например:
- −30%;
- фотографию;
- короткий заголовок.
Пока не добавляй логотип, кнопку, преимущества и декоративные элементы.
Если композиция не работает на этих трёх объектах, дополнительные детали её не исправят.
Шаг 4. Построй маршрут взгляда
Например:
−30% → суши → доставка → заказать
Это не обязательная схема движения любого человека. Это твой задуманный порядок приоритетов, который затем нужно проверить визуально.
Шаг 5. Сгруппируй связанную информацию
Если рядом должны стоять:
−30%
на первый заказ
они должны выглядеть как один блок, а не две независимые надписи.
Шаг 6. Проверь баланс
Уменьши макет и посмотри на крупные массы.
Не кажется ли одна сторона перегруженной?
Не появился ли случайный яркий объект, который перебивает главный?
Шаг 7. Добавь второстепенные элементы
Только теперь появляются:
- логотип;
- CTA;
- дополнительное условие;
- небольшие плашки;
- декоративные детали.
Шаг 8. Убери лишнее
Для каждого элемента задай вопрос:
Что потеряет баннер, если я это удалю?
Если ответ — «ничего», элемент не нужен.
Как понять, что композиция не работает
Не обязательно знать сложную теорию, чтобы заметить многие проблемы. У слабой композиции есть понятные симптомы.
Нельзя назвать главный элемент
Если ответ звучит примерно так:
«Главное здесь вроде продукт, но ещё скидка и заголовок…»
иерархия не определена.
Взгляд постоянно перескакивает
Цена → логотип → фотография → скидка → обратно к заголовку.
В макете много точек входа, но нет понятного приоритета.
Всё одинаково контрастное
Крупные заголовки, яркие плашки, жирный текст, насыщенные цвета и огромная кнопка одновременно.
Когда каждый элемент кричит, выделить главный становится сложнее.
Слишком много независимых групп
Заголовок находится в одном углу, цена в другом, условия отдельно, CTA ещё дальше.
Даже небольшое количество информации выглядит сложным, если между блоками нет визуальной связи.
Изображение спорит с текстом
Лицо, продукт или важная деталь фотографии находятся прямо под заголовком. У текста недостаточно контраста, а изображение частично перекрывается.
Вместо взаимного усиления два элемента мешают друг другу.
После уменьшения макет перестаёт работать
На большом мониторе можно прочитать каждую подпись. В небольшом превью часть деталей исчезает, текст превращается в шум, а главный акцент теряется.
Композицию приходится объяснять словами
Если без комментария дизайнера невозможно понять, куда нужно смотреть сначала, визуальная иерархия сама не выполняет эту работу.
4 быстрых теста готового баннера
Squint test — проверка прищуриванием
Прищурься или слегка расфокусируй взгляд.
Текст и мелкие детали перестанут отвлекать, останутся крупные визуальные массы.
Теперь посмотри:
- что выделяется первым;
- какие объекты конкурируют;
- видны ли второй и третий уровни;
- не появился ли случайный слишком яркий элемент.
Если при расфокусировке главным становится элемент, который должен быть второстепенным, иерархию стоит пересмотреть.
Thumbnail test — проверка в миниатюре
Уменьши креатив примерно до того масштаба, в котором он будет восприниматься пользователем.
Не пытайся читать мелкий текст. Сначала оцени:
- сохраняется ли главный акцент;
- узнаётся ли продукт;
- читается ли основное сообщение;
- не слипаются ли детали.
Композиция, работающая только при просмотре на весь экран, может оказаться слишком сложной для реального размещения.
Grayscale test — проверка в оттенках серого
Временно переведи макет в оттенки серого.
Так проще увидеть, не держится ли вся иерархия только на цвете.
Проверь:
- сохраняется ли главный объект;
- отличаются ли уровни текста;
- разделяются ли смысловые группы;
- не становятся ли важные элементы одинаковыми по весу.
Это не означает, что хороший баннер обязан одинаково работать без цвета. Цвет — полноценный инструмент дизайна. Такой тест просто помогает отдельно проверить размер, контраст, положение и плотность элементов.
Проверка в реальном размещении
Не оценивай рекламный креатив только внутри чистого фрейма Figma.
Помести его хотя бы в условный макет того окружения, где он будет использоваться: например, в ленту с соседними карточками.
Проверь:
- достаточно ли заметен главный объект;
- не выглядит ли баннер слишком мелким;
- не теряется ли текст среди интерфейса;
- сохраняются ли важные элементы после предполагаемого масштабирования или обрезания.
Конкретные safe zones (безопасные зоны) и правила crop (кадрирования) нужно проверять уже по требованиям выбранной рекламной площадки — универсальных значений для всех размещений нет.
Разбор: как исправить слабую композицию
Ниже — три учебных сценария. Они не показывают результаты реальных рекламных кампаний, а разбирают типичные композиционные проблемы.
Пример 1. Слишком много акцентов
Допустим, делаем баннер для новой коллекции кроссовок.
Исходный вариант:
- огромная фотография обуви;
- большой заголовок «NEW COLLECTION»;
- красная плашка «−40%»;
- крупная цена;
- яркая кнопка;
- заметный логотип.
Проблема не в количестве информации само по себе. Проблема в том, что почти каждый элемент имеет одинаковый визуальный вес.
Взгляд прыгает между скидкой, кроссовками и заголовком.
Что меняем:
- Выбираем главным сам продукт.
- Оставляем кроссовки крупнейшим объектом.
- Объединяем «Новая коллекция» и «до −40%» в один текстовый блок.
- Уменьшаем плашку со скидкой.
- Делаем кнопку заметной, но спокойнее главного объекта.
- Уменьшаем логотип.
После:
Первым считывается продукт.
Вторым — предложение о новой коллекции и скидке.
Третьим — действие.
Сам контент почти не изменился. Изменилась его иерархия.
Что показывает пример: часто композицию можно исправить не добавлением новых эффектов, а ослаблением второстепенных элементов.
Пример 2. Текст конкурирует с изображением
Допустим, рекламируется косметическая сыворотка.
Исходный вариант:
На всю площадь баннера поставлена фотография модели. Слева волосы и детали одежды, по центру лицо, справа рука с продуктом.
Поверх изображения размещены:
Новая сыворотка для сияния кожи
и кнопка.
Для текста фактически нет спокойной зоны. Он пересекается с деталями фотографии, поэтому дизайнер добавляет тень, затем затемнение, потом ещё одну плашку.
Что меняем:
- Выбираем другой crop той же сцены или фотографию с более свободной зоной.
- Смещаем модель вправо.
- Слева оставляем спокойный фон.
- Объединяем заголовок и короткое пояснение в один текстовый блок.
- CTA размещаем сразу после него.
- Сам продукт оставляем рядом с моделью как часть визуала.
После:
Изображение остаётся эмоциональной частью рекламы, но перестаёт быть фоном для борьбы с текстом.
Текст не приходится «спасать» эффектами — пространство уже обеспечивает читаемость.
Что показывает пример: иногда проблему композиции нельзя решить типографикой. Нужно изменить само изображение или его кадрирование.
Пример 3. Информация рассыпана по макету
Представим баннер доставки еды.
На нём нужно показать:
- скидку 30%;
- условие первого заказа;
- фотографию блюда;
- время доставки;
- CTA;
- логотип.
Исходный вариант:
«−30%» находится сверху слева.
«На первый заказ» — чуть ниже по центру.
Время доставки — справа в маленькой плашке.
CTA — внизу справа.
Логотип — сверху справа.
Каждая информация существует отдельно.
Что меняем:
- Собираем «−30%» и «на первый заказ» в один основной оффер.
- Фотографию блюда делаем вторым крупным объектом.
- Время доставки переносим в небольшой дополнительный блок рядом с оффером или CTA.
- Выравниваем текстовые элементы по одной линии.
- Увеличиваем расстояние между смысловыми группами.
- Уменьшаем визуальный вес логотипа.
После:
Макет состоит уже не из шести разбросанных объектов, а из трёх понятных зон:
оффер → продукт → действие.
Что показывает пример: группировка может изменить восприятие баннера даже без удаления информации.
Как тренировать композицию на готовых исходниках
Смотреть хорошие референсы полезно, но изображение на Pinterest показывает только конечный результат. Гораздо больше можно понять, когда макет доступен в редактируемом виде.
Открой готовый исходник и попробуй определить:
- что здесь является первым уровнем;
- что вторым;
- что третьим;
- какие элементы объединены в группы;
- за счёт чего создаётся визуальный вес;
- где используется свободное пространство.
После этого начни менять макет.
Упражнение 1. Удали элементы
Убери часть второстепенных деталей и сравни результат.
Стало ли проще определить главное?
Если да, попробуй понять, какие элементы создавали лишний визуальный шум.
Упражнение 2. Измени главный акцент
Возьми тот же контент, но сделай главным не изображение, а оффер.
Это заставляет заново выстроить размер, интервалы и положение остальных элементов.
Упражнение 3. Пересобери композицию
Оставь текст и изображение, но измени саму схему.
Например:
текст слева / объект справа → центральный объект
или:
центральная композиция → крупная типографика.
Так становится заметно, что композиция — это не декор поверх контента, а способ организовать его.
Для такой практики можно использовать и Designer Pack. Внутри находятся 150+ готовых рекламных креативов, 1000+ редактируемых элементов конструктора и 300+ UI-компонентов в Figma. Готовый креатив можно открыть, посмотреть его устройство, изменить текст, изображения, цвета и элементы или собрать другой вариант из конструктора.
Полезнее всего не копировать исходник один в один, а разбирать, почему элементы имеют именно такой размер, положение и интервалы, а затем пробовать альтернативную композицию.
Сам по себе готовый исходник не научит композиции автоматически. Его ценность для практики появляется тогда, когда ты начинаешь осознанно разбирать и перестраивать решение.
Чек-лист композиции перед экспортом
Перед публикацией баннера проверь его по десяти вопросам:
Если на несколько вопросов трудно ответить уверенно, сначала исправь композицию и только потом полируй тени, цвета, эффекты и мелкие декоративные детали.
Итог
Начинай рекламный баннер не с выбора шрифта, фотографии или красивой плашки.
Сначала реши, что человек должен увидеть первым и что он должен понять после этого. Затем распредели визуальный вес между остальными элементами и проверь результат в маленьком размере.
Когда эта логика работает, оформление усиливает сообщение. Когда её нет, дополнительный декор обычно только маскирует проблему.
