Как сделать кликабельный баннер. Кликабельный баннер — как сделать. Плюсы и минусы

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

Дизайн веб-баннеров предполагает создание максимально кликабельных рекламных объектов. Есть целое ответвление веб-дизайна, фокусирующееся на создании эффективных рекламных баннеров.

1. Используйте наиболее эффективные стандартные размеры баннеров

728×90 px — длинный баннер-перетяжка, лидерборд (Leaderboard),
300×600 px — баннер на половину страницы (Half Page),
300×250 px — прямоугольник среднего размера (Medium Rectangle),
336×280 px — большой прямоугольник (Large Rectangle).

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

2. Размещайте баннеры правильно

Покупайте место на сайте поверх (Above The Fold) близко к основному контенту страницы, тогда ваш дизайн будет виден всем.

3. Поддерживайте иерархию

В баннерной рекламе важно полагаться на баланс в рамках каждого рекламного объявления, так что следите за иерархией. Эффективные баннеры увеличивают осведомленность о бренде и привлекают трафик на ваш сайт. Они содержат три основных компонента:

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

2. (Value Proposition) — объясняет, какой продукт/услугу вы предлагаете, и привлекает внимание заманчивыми оффером и ценами. Как правило, здесь можно увидеть словосочетания вроде «высокое качество», «50%-ная скидка» и «ограниченная по времени акция». Данный элемент занимает основное пространство, и именно его должны в первую очередь заметить зрители.

3. (Call to Action, CTA) — это текст или кнопка, приглашающая пользователей нажать ее. Обычно пишут что-то вроде «Узнать больше», «Посмотреть» или «Начать». Призыв должен стать фокусом рекламного объявления.

4. Соблюдайте простоту

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

5. Внедряйте кнопки с умом

Кнопки повышают кликабельность рекламы (Click-Through Rate, CTR). Размещайте их после текста, ближе к нижнему правому углу. Применяйте контрастный цвет и не забудьте о вкусе! Кнопки должны отличаться постоянным дизайном на протяжении всего набора рекламных объявлений.

6. Обрамляйте свои баннеры

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

7. Делайте текст мгновенно читаемым

Заголовок и основной текст должны иметь разный размер. Весь текст не должен превышать четырех строчек:

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

8. Применяйте анимацию

Анимированные баннеры, как правило, проявляют себя лучше статических, но необходимо убедиться, что они не отвлекают от основного послания рекламы:

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

9. Органично дополняйте, выделяясь

10. Обеспечивайте связь с брендом

11. Внушайте ощущение срочности

Визуально срочность создается смелыми контрастными цветами. Баннеры не должны быть скромными и незаметными.

12. Изобразительные средства выбирайте с умом

Графика и фотографии должны иметь отношение к продукту. Их цель — лучше донести послание. Никаких абстракций. Не можете позволить себе профессиональных фотографов и моделей? Заплатите за . Можно найти оригинальные иллюстрации или заказать графику дизайнеру.

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

13. Отдавайте предпочтение подходящим цветам

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

Наука о цвете субъективна, и в разных культурах цвета имеют различные ассоциации. Изучите целевую аудиторию перед выбором оттенков. Вот примеры эмоций, вызываемых разными цветами, у людей Запада:

  • Красный — страсть, ярость, возбуждение и любовь. Мощный цвет, привлекающий многих, но лучше применять его осторожно. Избегайте красного, если вы стремитесь к классическому, зрелому, серьезному образу.
  • Оранжевый — игривость и воодушевление. В отличие от агрессивного красного, оранжевый заряжает энергией. Замечательный выбор для кнопки призыва к действию.
  • Желтый — радость, солнечное сияние, дружелюбие. Желтый притягивает взгляд и излучает энергию, создает ощущение молодежности и доступности по стоимости.
  • Зеленый — здоровье, свежесть, богатство, окружающая среда, рост, забота и начало чего-то нового. Нашим глазам приятно на него смотреть.

  • Синий — безопасность, доверие, ясность, зрелость, безмятежность, интеллект, формальность, восстановление сил, холодность и мужественность. Данный цвет присутствует в более чем половине всех логотипов мира.
  • Фиолетовый — роскошь, величие, экстравагантность, мудрость, магия, женственность и креативность. Оказывает на зрителей успокаивающий эффект.
  • Розовый — любовь, симпатия, женственность, юность и дети. Обычно розовый связывают с чем-то женским, но все зависит от тона и яркости.
  • Черный — эксклюзивность, загадочность, современность, мощь, престиж, роскошь и формальность. Традиционный выбор, в частности, черный текст на белом фоне — это самая удобная для чтения цветовая комбинация.

  • Белый — девственность, чистота, современность, стерильность, простота, честность и невинность. Создает чувство экономической оправданности и причастности к молодости.
  • Коричневый — природа, дерево, кожа, серьезность, мужественность, упрямство/жесткость и скромность. Коричневый создает баланс между более сильными цветами и потому хорошо подходит в качестве фона.
  • Серый — нейтральность и практичность. При использовании как фон усиливает остальные цвета.

14. Поддерживайте небольшой размер файлов

Чем меньше, тем лучше — менее 150 кб, как рекомендует Google Adwords. Нужно, чтобы реклама загружалась быстро, иначе посетители прокрутят страницу вниз, не заметив ее.

15. Используйте правильные форматы файлов

JPG, PNG, GIF или HTML5 — это то, с чем следует работать. Как правило, дизайнеры создают графику в Adobe Illustrator или Photoshop и получают файлы в JPG, PNG или GIF, либо они применяют Google Web Designer или Adobe Animate и на выходе имеют HTML5.

Заключение

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

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

Оффер в виде баннера → переход на лендинг → подписка на рассылку → Lead Nurturing

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

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

Здравствуйте, читатели блога сайт!

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

Баннерная реклама в офлайне – это изображение, нанесенное на полотно из винила и непрозрачного полипропилена. Его могут крепить к билборду или вывешивать над трассами, на зданиях, деревьях. Основное преимущество – оно не портится 3 – 7 лет и видно издалека без интернета.

Недостаток – цена. За изготовление полотна, печать просят от 110 рублей/кв. метр. Производство и крепление обойдется в 4 000 – 5 000 р. Размещение нужно оплачивать ежемесячно или даже посуточно. Причем чем выгоднее оно, тем больше платеж. Расценки отличаются в зависимости от региона. В той же Москве за размещение берут 50 000 – 200 000 рублей, а в Краснодаре – от 10 000 рублей около трассы.

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

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

Первый онлайн-баннер появился в 1994 году. Сейчас он занимает второе место среди популярной интернет-рекламы. Около 64,6 % людей доверяют баннерам при поиске и покупках.

Зачем нужен баннер

Баннер нужен, потому что он:

  1. Продает.
  2. Информирует.
  3. Перенаправляет к партнерам.
  4. Переключает внимание на другие продукты/услуги.
  5. Повышает лояльность и узнаваемость.

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

Виды

Разберемся, какие бывают баннеры по восприятию.

  • Статичными.
  • Анимационными.

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

Подходят для любого вида бизнеса. Создание стоит в 2 – 3 раза больше.

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

Рассмотрим, какие бывают баннеры по формату, расположению.

  • Вертикальные.

  • Горизонтальные.

Это расположение лучше воспринимается нами, потому что мы видим бинокулярным зрением горизонтально. Нам не нужно сильно напрягаться. За 0,03 секунды посетитель просканирует больше на картинке, а значит, и привлечь его внимание нам проще. Горизонтальный формат отлично подходит для рекламы большого ассортимента продуктов.

По технической начинке баннеры делятся на категории:

  • Java.

Добавляется в HTML-код. Нужно, чтобы был подключен Java-апплет (программа). На нем любят делать рекламу игровой и развлекательной тематики. Например, у пользователя есть возможность подобрать прическу персонажу. Он незаметно втянется в игру и захочет зарегистрироваться и продолжить. Такие баннеры грузятся даже при плохом интернете.

  • Flash.

Гибкая технология Macromedia. Каждый может играть с ней: менять текст, картинку, выключать звук, писать что-то.

Здесь можно выбрать вариант ответа.

Состоит из картинки в формате PNG, GIF, JPG, встроенной в HTML-код. Там же прописаны элементы, которые делают баннерную рекламу интерактивной. Любой пользователь сможет что-то перетаскивать, менять на картинке, писать так, как это задумано разработчиком.

Когда кликаешь на преимущества компании, появляется подробная информация.

  • HTML5.

Подстраивается под размер смартфона, компьютера. В отличие от Flash и CGI можно указывать любые размеры. Этот формат подстраивается под площадку, не мешает просматривать нужную информацию на странице. Управлять HTML5-баннерами можно через Яндекс Дисплей.

Здесь можно выбрать квартиру и кликнуть на нее. После нажатия открывается сайт рекламодателя.

  • Внутренний.

Переводит на страницу того же самого сайта. Нужен, чтобы оповестить, привлечь внимание к чему-то. Покупатель зашел на страницу с товарами. У вас скидка 500 рублей на первый заказ от 3 000 рублей. Благодаря вашей баннерной рекламе он узнает об этом и наберет корзину на крупную сумму.

Ozon наверху главной страницы сообщает об акции.

  • Брендовый.

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

  • Информационный.

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

  • Продающий.

Его цель – продажа товара/услуги. Он содержит УТП, четкие выгоды и призыв к действию.

По масштабности размещения баннеры бывают:

  • Сквозными.

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

  • Одностраничными.

Добавляют только на одну целевую страницу.

Размеры и места размещения

Популярные размеры баннеров в одной картинке.

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

Как и где разместить баннер:

  1. Ищете тематические сайты, где водится ваша целевая аудитория, через поисковик. Просматриваете страницы, находите контакты. Обращаетесь лично к владельцу. Оплачиваете. Могут обмануть и убрать рекламу раньше времени. Надо составлять оферту или контракт.
  2. Биржа блогов – Блогун . Регистрируетесь как рекламодатель, оплачиваете тариф, выбираете блог по теме и посещаемости для размещения.
  3. Яндекс.Директ и Google AdSense . Лучшие варианты, потому что ваш баннер будет на всех тематических сайтах. При правильной настройке стоимость клика выйдет дешевой. Никто не уберет вашу рекламу, пока не закончится рекламный бюджет. В этих рекламных сетях можно настраивать показ по интересам, возрасту. Это отголоски таргетированной рекламы, которая хорошо продает.

Плюсы и минусы

Преимущества:

  1. Сами выбираете оформление. Если знаете Photoshop и основы композиции, то можете сделать баннер самостоятельно. Сэкономите на дизайнере.
  2. Марка становится узнаваемой, растет доверие.
  3. Дешевле баннеров на улице. В Яндекс.Директе и Google AdSense можно недорого настроить рекламу. Например, 5 рублей за клик. Сайты с аудиторией 300 – 500 человек берут мало за сутки.
  4. Можно полностью подстроиться под целевую аудиторию. Выберите изображение, укажите ключевые выгоды и разместите там, где сидит ваш потенциальный клиент. Это ключ к росту переходов и продаж.
  5. Легче анализировать эффективность рекламы.

Недостатки:

  1. За показы и клики нужно платить. Некоторые переходы могут быть нецелевыми, то есть пользователи просто зайдут и выйдут, а деньги все равно заплатите.
  2. Когда снимете баннерную рекламу, посетителей может стать меньше.
  3. Можно промахнуться мимо целевой аудитории и слить бюджет. Если вы покажете рекламу тем, кто не заинтересован в ваших услугах, то потратите рекламный бюджет впустую. То же произойдет, если выгоды или оформление не связаны с потребностями ЦА.
  4. Стандартные баннеры примелькались. Если хотите заполучить переходы, продажи, нужно по-другому размещать, экспериментировать с картинками, текстом и цветом.

Как оплачивают размещение

Размещение баннера оплачивают по 2 схемам:

  1. Фиксированная. Вы арендуете место на странице и платите за сутки, месяц или год. Обычно такой способ оплаты устанавливается по договоренности с владельцем сайта.
  2. Динамическая. Вы платите за клики или показы.

Как сделать баннер, который заметят

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

  1. Ненавязчивость. Баннер не должен всплывать, мешать изучать информацию на сайте, занимать пол-экрана.
  2. Составление тепловой карты. Отследите, куда больше обращают внимание посетители на странице. В Яндекс.Метрике можно посмотреть тепловую карту кликов. По статистике люди чаще смотрят на верхний левый угол страницы и шапку сайта.
  3. Минимализм и золотое сечение. Уберите лишние детали, поставьте главный объект чуть правее середины.
  4. Шрифт имеет значение. Самый кликабельный шрифт – Baskerville, наименее привлекательный для пользователя – Comic Sans.
  5. Пользуйтесь психологией цвета. Дорогим товарам подойдет золотой, коричневый, сиреневый, черный. Питанию – зеленый и оранжевый. Правильное использование цвета создаст нужное впечатление.

Изучаем целевую аудиторию

Перенастройте поисковую систему на другую страну. К примеру, США или Францию. Ищите интересующие картинки на английском языке. Вы найдете много классных изображений, которых нет в Рунете.

Текст

Составляем цепляющий заголовок. Можно использовать уникальное торговое предложение.

Короткое описание продукта с ключевой выгодой целевой аудитории. Достаточно 5 – 7 слов, остальное – перебор.

Собираем образ в картинку

Теперь открываем Photoshop, Gimp или Paint.net и визуализируем макет. Создаем пустое полотно нужного размера, заливаем, добавляем фото, текст и т. д. Все, как задумали.

Если сложно сделать самому, можно заказать у веб-дизайнера на бирже фриланса. Стоимость статичного баннера на заказ – от 250 р. Зависит от сложности и уровня работника.

Видеоурок о том, как создать GIF-баннер в Photoshop.

Как узнать, насколько эффективен баннер

  1. CTR (кликабельность) – это отношение кликов к показам. Допустим, рекламу увидели 100 человек, из них 5 перешли на сайт. Тогда 5/100*100 %=5 %. Когда CTR слишком низкий, нужно поработать над дизайном, содержанием или площадкой, где баннер размещен.
  2. ROI (окупаемость) – это процент дохода, полученный от привлеченных клиентов. Рассчитывается по формуле: (прибыль–расходы)/расходы*100 %. Мы вложили 1 300 рублей, у нас купили на 3 000 рублей, тогда (3 000–1 300 рублей)/1 300*100%=130 %. Мы вышли в плюс на 30 %. Если ROI выходит 100 % или меньше, значит, идет слив бюджета. Надо что-то менять.
  3. CAC – цена привлеченного клиента. Помогает выяснить, рентабельна ли реклама. Плюсуем все расходы: на создание рекламы, зарплаты сотрудникам или фрилансерам и делим на общее количество клиентов. Допустим, ушло 10 000 рублей, привлекли 23 покупателя, значит, один стоит 434 рубля. Если в среднем покупают на 300 рублей, то мы работаем в убыток.

Проверить эффективность баннера легко в Яндекс.Директе. В функции “Группа объявлений” можно написать ключевое слово или выбрать картинку и посмотреть кликабельность.

Когда данных о CTR будет хватать Яндексу, он сам покажет вам самые работающие рекламные объявления.

Если с картинками не заладилось, и статистика рекламной кампании расстраивает, можно попробовать .

Заключение

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

Вы можете хорошо заработать, если научитесь делать баннеры. Профессионалы умудряются делать по 2 – 3 штуки в день. А это минимум 1 000 рублей.

А вас раздражают баннеры, когда видите их на сайте?

Желаю вам больше переходов и заказов!

А мы увидимся с вами в следующей полезной статье.

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

Как легко и просто сделать баннер или делаем картинку ссылкой, то есть, кликабельной

Сегодня расскажу Вам, как я делаю баннер, или любое изображение в сообщениях кликабельным. Это можно сделать двумя способами. Первый способ - использование кода

target="_blank"> адрес картинки " />

Для этого нужно загрузить картинку на любой фотохостинг и и взять ссылку №1, т.е адрес картинки. Адрес ссылки это страница, которая будет открываться при нажатии на картинку или баннер.

Скопируйте код в блокнот на ПК и внимательно вставьте адреса ссылки и картинки(не перепутайте)

Вставьте в сообщение в расширенном редакторе при нажатии на ИСТОЧНИК

Отправьте сообщение в ПРЕДОСМОТР или ЧЕРНОВИК и проверьте результат на кликабельность. Я. например, провожу все манипуляции с картинкой в ЧЕРНОВИКЕ,а затем каждый раз беру готовый код картинки из черновика и вставляю в сообщение.

А этот баннер я изготовила в обычном Worde

Второй способ очень легкий.С помощью простых манипуляций, при загрузке картинки в расширенный редактор прямо из компьютера, можно сделать любую картинку не только кликабельной, но со всплывающим текстом при наведении на картинку. Для этого жмем на иконку ИЗОБРАЖЕНИЕ и загружаем картинку из ПК.. Когда картинка загрузится переходим на вкладку ССЫЛКА

Жмем ОК и любуемся результатом.

Для желающих работать с кодом, для кликабельной картинки со всплывающим текстом, даю код,только не забудьте вместо width=100 height=100 вставить размеры картинки, где width-ширина, а height - высота картинки

Адрес картинки из Интернета или из Радикала (ссылка№1) " border="0" title=" Текст, видимый, в качестве подсказки, при наведении на ссылку . " width=100 height=100>