Баннеры — это одна из самых распространенных форм интернет-рекламы, позволяющая увеличить онлайн-трафик. Баннеры представляют собой кликабельные изображения на веб-страницах, демонстрирующие продукт или бренд и ведущие по ссылке на сайт рекламодателя.
Дизайн веб-баннеров предполагает создание максимально кликабельных рекламных объектов. Есть целое ответвление веб-дизайна, фокусирующееся на создании эффективных рекламных баннеров.
В этой статье мы собрали для вас лучшие рекомендации в этой области.
1. Используйте наиболее эффективные стандартные размеры баннеров
Сервис контекстной рекламы Google Adsense называет самыми успешными следующие параметры и форматы:
Наиболее распространенные размеры баннеров. Сверху — лидерборд, слева — баннер на половину страницы, справа — средний и большой прямоугольники
Баннер на полстраницы
2. Размещайте баннеры правильно
Покупайте место на сайте поверх линии сгиба (Above The Fold) близко к основному контенту страницы, тогда ваш дизайн будет виден всем.
3. Поддерживайте иерархию
В баннерной рекламе важно полагаться на баланс в рамках каждого рекламного объявления, так что следите за иерархией. Эффективные баннеры увеличивают осведомленность о бренде и привлекают трафик на ваш сайт. Они содержат три основных компонента:
Призыв к действию от Авито
4. Соблюдайте простоту
Пусть ваши графические элементы и контент будут простыми, но запоминающимися: скорее всего, посетители лишь единожды взглянут на баннер — и длиться этот взгляд будет не более секунды.
Лаконичный мобильный баннер от Miu Miu
5. Внедряйте кнопки с умом
Кнопки повышают кликабельность рекламы (Click-Through Rate, ctr). Размещайте их после текста, ближе к нижнему правому углу. Применяйте контрастный цвет и не забудьте о вкусе! Кнопки должны отличаться постоянным дизайном на протяжении всего набора рекламных объявлений.
6. Обрамляйте свои баннеры
Наши глаза сразу устремляются на объекты в рамке. Эффективные баннеры используют четкие рамки и графику, продолжающуюся за краями квадрата. Если фон рекламы белый, то вокруг нее обычно рисуют однопиксельную серую границу.
7. Делайте текст мгновенно читаемым
Заголовок и основной текст должны иметь разный размер. Весь текст не должен превышать четырех строчек:
Хороший пример читабельности
Не вполне удачное решение
Нежелательно применять курсивные или рукописные шрифты, очень тонкое написание, писать текст только заглавными буквами или использовать шрифт менее 10 pt (если только это не заявление об ограниченной ответственности или не сведения об авторских правах).
8. Применяйте анимацию
Анимированные баннеры, как правило, проявляют себя лучше статических, но необходимо убедиться, что они не отвлекают от основного послания рекламы:
Ритейлер детской одежды Mothercare
Используйте простую анимацию, длящуюся не более 15 секунд и с циклизацией не чаще трех раз. Хорошая идея — сделать последний кадр четким призывом к действию.
9. Органично дополняйте, выделяясь
Доверие зрителей больше заслуживает реклама в стиле сайта, на котором она появляется. Однако не сливайтесь с площадкой полностью. Баннер должен быть виден, его назначение — привлекать внимание:
Баннер от Apple
10. Обеспечивайте связь с лендингом
Ссылка с баннера ведет к лендингу с вашим оффером. Убедитесь, что реклама соответствует вашему брендингу и оформлению посадочной страницы, иначе у потенциальных клиентов возникнут вопросы.
11. Внушайте ощущение срочности
Визуально срочность создается смелыми контрастными цветами. Баннеры не должны быть скромными и незаметными.
12. Изобразительные средства выбирайте с умом
Графика и фотографии должны иметь отношение к продукту. Их цель — лучше донести послание. Никаких абстракций. Не можете позволить себе профессиональных фотографов и моделей? Заплатите за качественные стоковые фото. Можно найти оригинальные иллюстрации или заказать графику дизайнеру.
Изображения вообще не обязательны к использованию. Мастерски составленный текст и удачная типографика создадут аналогичный эффект.
13. Отдавайте предпочтение подходящим цветам
Каждый цвет имеет свою ассоциацию. Важно обдумывать, какой тип эмоций вы пробуждаете в аудитории, ведь именно цветовая гамма — это первое, что замечают люди в дизайне.
Наука о цвете субъективна, и в разных культурах цвета имеют различные ассоциации. Изучите целевую аудиторию перед выбором оттенков. Вот примеры эмоций, вызываемых разными цветами, у людей Запада:
Проект «500 Startups» от «Сбербанка» в ярко-зеленом цвете
Реклама УАЗ Патриот в желто-черных тонах
Реклама от New Balance в практичном сером цвете
14. Поддерживайте небольшой размер файлов
Чем меньше, тем лучше — менее 150 кб, как рекомендует Google Adwords. Нужно, чтобы реклама загружалась быстро, иначе посетители прокрутят страницу вниз, не заметив ее.
15. Используйте правильные форматы файлов
JPG, PNG, GIF или HTML5 — это то, с чем следует работать. Как правило, дизайнеры создают графику в Adobe Illustrator или Photoshop и получают файлы в JPG, PNG или GIF, либо они применяют Google Web Designer или Adobe Animate и на выходе имеют HTML5.
Имейте в виду, что реклама, созданная с использованием Flash-анимации, уже устарела.
Заключение
Ну, вот и все. Основные правила мы перечислили, так что вы готовы к созданию качественных баннеров.
Высоких вам конверсий!
Дизайн веб-баннеров предполагает создание максимально кликабельных рекламных объектов. Есть целое ответвление веб-дизайна, фокусирующееся на создании эффективных рекламных баннеров.
В этой статье мы собрали для вас лучшие рекомендации в этой области.
1. Используйте наиболее эффективные стандартные размеры баннеров
Сервис контекстной рекламы Google Adsense называет самыми успешными следующие параметры и форматы:
- 728×90 px — длинный баннер-перетяжка, лидерборд (Leaderboard),
- 300×600 px — баннер на половину страницы (Half Page),
- 300×250 px — прямоугольник среднего размера (Medium Rectangle),
- 336×280 px — большой прямоугольник (Large Rectangle).
Наиболее распространенные размеры баннеров. Сверху — лидерборд, слева — баннер на половину страницы, справа — средний и большой прямоугольники
Баннер на полстраницы
2. Размещайте баннеры правильно
Покупайте место на сайте поверх линии сгиба (Above The Fold) близко к основному контенту страницы, тогда ваш дизайн будет виден всем.
3. Поддерживайте иерархию
В баннерной рекламе важно полагаться на баланс в рамках каждого рекламного объявления, так что следите за иерархией. Эффективные баннеры увеличивают осведомленность о бренде и привлекают трафик на ваш сайт. Они содержат три основных компонента:
- Логотип компании — способствует повышению осведомленности. Должен визуально доминировать, но чуть меньше чем ценностное предложение или призыв к действию.
- Ценностное предложение (Value Proposition) — объясняет, какой продукт/услугу вы предлагаете, и привлекает внимание заманчивыми оффером и ценами. Как правило, здесь можно увидеть словосочетания вроде «высокое качество», «50%-ная скидка» и «ограниченная по времени акция». Данный элемент занимает основное пространство, и именно его должны в первую очередь заметить зрители.
- Призыв к действию (Call to Action, CTA) — это текст или кнопка, приглашающая пользователей нажать ее. Обычно пишут что-то вроде «Узнать больше», «Посмотреть» или «Начать». Призыв должен стать фокусом рекламного объявления.
Призыв к действию от Авито
4. Соблюдайте простоту
Пусть ваши графические элементы и контент будут простыми, но запоминающимися: скорее всего, посетители лишь единожды взглянут на баннер — и длиться этот взгляд будет не более секунды.
Лаконичный мобильный баннер от Miu Miu
5. Внедряйте кнопки с умом
Кнопки повышают кликабельность рекламы (Click-Through Rate, ctr). Размещайте их после текста, ближе к нижнему правому углу. Применяйте контрастный цвет и не забудьте о вкусе! Кнопки должны отличаться постоянным дизайном на протяжении всего набора рекламных объявлений.
6. Обрамляйте свои баннеры
Наши глаза сразу устремляются на объекты в рамке. Эффективные баннеры используют четкие рамки и графику, продолжающуюся за краями квадрата. Если фон рекламы белый, то вокруг нее обычно рисуют однопиксельную серую границу.
7. Делайте текст мгновенно читаемым
Заголовок и основной текст должны иметь разный размер. Весь текст не должен превышать четырех строчек:
Хороший пример читабельности
Не вполне удачное решение
Нежелательно применять курсивные или рукописные шрифты, очень тонкое написание, писать текст только заглавными буквами или использовать шрифт менее 10 pt (если только это не заявление об ограниченной ответственности или не сведения об авторских правах).
8. Применяйте анимацию
Анимированные баннеры, как правило, проявляют себя лучше статических, но необходимо убедиться, что они не отвлекают от основного послания рекламы:
Ритейлер детской одежды Mothercare
Используйте простую анимацию, длящуюся не более 15 секунд и с циклизацией не чаще трех раз. Хорошая идея — сделать последний кадр четким призывом к действию.
9. Органично дополняйте, выделяясь
Доверие зрителей больше заслуживает реклама в стиле сайта, на котором она появляется. Однако не сливайтесь с площадкой полностью. Баннер должен быть виден, его назначение — привлекать внимание:
Баннер от Apple
10. Обеспечивайте связь с лендингом
Ссылка с баннера ведет к лендингу с вашим оффером. Убедитесь, что реклама соответствует вашему брендингу и оформлению посадочной страницы, иначе у потенциальных клиентов возникнут вопросы.
11. Внушайте ощущение срочности
Визуально срочность создается смелыми контрастными цветами. Баннеры не должны быть скромными и незаметными.
12. Изобразительные средства выбирайте с умом
Графика и фотографии должны иметь отношение к продукту. Их цель — лучше донести послание. Никаких абстракций. Не можете позволить себе профессиональных фотографов и моделей? Заплатите за качественные стоковые фото. Можно найти оригинальные иллюстрации или заказать графику дизайнеру.
Изображения вообще не обязательны к использованию. Мастерски составленный текст и удачная типографика создадут аналогичный эффект.
13. Отдавайте предпочтение подходящим цветам
Каждый цвет имеет свою ассоциацию. Важно обдумывать, какой тип эмоций вы пробуждаете в аудитории, ведь именно цветовая гамма — это первое, что замечают люди в дизайне.
Наука о цвете субъективна, и в разных культурах цвета имеют различные ассоциации. Изучите целевую аудиторию перед выбором оттенков. Вот примеры эмоций, вызываемых разными цветами, у людей Запада:
- Красный — страсть, ярость, возбуждение и любовь. Мощный цвет, привлекающий многих, но лучше применять его осторожно. Избегайте красного, если вы стремитесь к классическому, зрелому, серьезному образу.
- Оранжевый — игривость и воодушевление. В отличие от агрессивного красного, оранжевый заряжает энергией. Замечательный выбор для кнопки призыва к действию.
- Желтый — радость, солнечное сияние, дружелюбие. Желтый притягивает взгляд и излучает энергию, создает ощущение молодежности и доступности по стоимости.
- Зеленый — здоровье, свежесть, богатство, окружающая среда, рост, забота и начало чего-то нового. Нашим глазам приятно на него смотреть.
Проект «500 Startups» от «Сбербанка» в ярко-зеленом цвете
- Синий — безопасность, доверие, ясность, зрелость, безмятежность, интеллект, формальность, восстановление сил, холодность и мужественность. Данный цвет присутствует в более чем половине всех логотипов мира.
- Фиолетовый — роскошь, величие, экстравагантность, мудрость, магия, женственность и креативность. Оказывает на зрителей успокаивающий эффект.
- Розовый — любовь, симпатия, женственность, юность и дети. Обычно розовый связывают с чем-то женским, но все зависит от тона и яркости.
- Черный — эксклюзивность, загадочность, современность, мощь, престиж, роскошь и формальность. Традиционный выбор, в частности, черный текст на белом фоне — это самая удобная для чтения цветовая комбинация.
Реклама УАЗ Патриот в желто-черных тонах
- Белый — девственность, чистота, современность, стерильность, простота, честность и невинность. Создает чувство экономической оправданности и причастности к молодости.
- Коричневый — природа, дерево, кожа, серьезность, мужественность, упрямство/жесткость и скромность. Коричневый создает баланс между более сильными цветами и потому хорошо подходит в качестве фона.
- Серый — нейтральность и практичность. При использовании как фон усиливает остальные цвета.
Реклама от New Balance в практичном сером цвете
14. Поддерживайте небольшой размер файлов
Чем меньше, тем лучше — менее 150 кб, как рекомендует Google Adwords. Нужно, чтобы реклама загружалась быстро, иначе посетители прокрутят страницу вниз, не заметив ее.
15. Используйте правильные форматы файлов
JPG, PNG, GIF или HTML5 — это то, с чем следует работать. Как правило, дизайнеры создают графику в Adobe Illustrator или Photoshop и получают файлы в JPG, PNG или GIF, либо они применяют Google Web Designer или Adobe Animate и на выходе имеют HTML5.
Имейте в виду, что реклама, созданная с использованием Flash-анимации, уже устарела.
Заключение
Ну, вот и все. Основные правила мы перечислили, так что вы готовы к созданию качественных баннеров.
Высоких вам конверсий!
