Чем можно заменить баннер
Что такое баннеры и баннерная реклама в интернете
Веб-баннер — это статическое или динамическое изображение, отображаемое на веб-странице. Обычно состоит из изображения, названия компании или логотипа, текста и призыва к действию (Call-to-action, далее CTA), побуждающего пользователей кликать по баннеру. Главная цель баннерной рекламы — продвижение бренда и/или побуждение посетителей перейти с рекламной площадки на сайт рекламодателя.
Виды баннеров: HTML5, GIF-баннеры, MPEG4 (видео) и статичные
Баннеры можно классифицировать по-разному. Если брать сугубо техническую составляющую, то баннеры разделяются на четыре основных вида:
Что такое HTML5 баннер?
Баннеры, выполненные на основе HTML5, представляют собой совокупность HTML-кода, анимации и уникального оформления. Такие баннеры с каждым днем становятся более популярными ввиду адаптивности (которая позволяет корректно отображать баннер на любых устройствах), небольшого размера и возможность отслеживания статистических данных.
Gif-баннер и его отличия от HTML5
Gif — это тоже формат анимированных изображений. Именно gif-баннеры использовались на заре становления интернета. Позже их сменили аналоги на Flash, а на данный момент пальму первенства получил HTML5. Главными отличиями Gif-баннера от аналога на HTML5 является его больший вес, замедляющий загрузку страницы, отсутствие адаптивности, а также общая примитивность (отсутствие эффектов, меньшая плавность анимации и т.д.).
Статичный баннер, где используют?
Статичный баннер — это простое изображение (в формате PNG, JPEG, GIF), лишенное анимации и каких-либо эффектов. Они играют информативную и рекламную роль, а зачастую их используют владельцы для своих собственных сайтов, либо прямые рекламодатели. Обычно их размещают в слайдерах, футере или в верхней части сайта (шапка) Данный тип баннеров — актуален и по сей день, ведь его эффективность, измеряемая в CTR, демонстрирует хорошие показатели.
Флеш баннеры и куда они делись
Flash-баннеры до «убийства» одноименной технологии были крайне распространены. Такие баннеры отличались отличным оформлением: могли похвастаться плавной анимацией, высоким качеством изображения, а также высокой интерактивностью (т.е. пользователь по задумке разработчика мог взаимодействовать с элементами баннера).
Сегодня технология Flash официально не поддерживается разработчиком, соответственно, баннеры также канули в лету. Причин этому несколько:
А пришедший на замену HTML5 — полностью лишил флеш-баннеры какой-либо актуальности.
Где используются баннеры
Сегодня в интернете принято выделять два типа рекламы: контекстную и медийную. Несмотря на схожесть и наличия много общего, контекстная реклама ориентирована исключительно на целевую аудиторию. Медийная реклама, как и телевизионная реклама, заточена на широкую аудиторию и призвана сформировать имидж бренда или познакомить с новым продуктом.
Баннеры — инструмент, который объединяет и медийную и контекстную рекламу, поскольку используется и там, и там. Как правило, HTML баннеры используют крупные компании и развивающиеся проекты, работающие над продвижением собственного бренда.
Рекламные сети в Рунете
Русскоязычный сегмент интернета — один из наиболее масштабных: ежедневно создаются сотни сайтов, публикуются десятки тысяч статей и другого контента, а аудитория насчитывает сотни миллионов пользователей. Неудивительно, что в этом сегменте представлено множество рекламных площадок, привлекающих как рекламодателей, так и владельцев веб-сайтов. Наиболее популярными из них являются:
Технические требования к баннерам
Каждая рекламная сеть имеет свой перечень требований, предъявляемых к баннерной рекламе. Обычно они включают в себя:
Кроме этого, в зависимости от рекламной площадки, могут выдвигаться требования к дизайну баннеров:
Для HTML5 баннеров существуют отдельные требования площадок:
Конвертация баннеров
Конвертация баннера представляет собой изменение его формата. Чаще всего конвертация происходит:
Что такое ресайзы?
Ресайз баннера (resize — изменение размера) представляет собой изменение оригинального баннера (или мастер-баннера), созданного на основе требований заказчика, для его «подгона» к требованиям, выдвигаемым конкретной рекламной площадкой.
Ресайз может включать в себя изменение размеров, пропорций, цветов и других элементов оригинального баннера.
Мастер-баннер — это оригинальный макет дизайна баннера, с продуманным сценарием, анимацией, графикой, на основе которого делаются ресайзы (альтернативные размеры).
Адаптация баннеров под другие языки (мультиязычные баннеры)
Медийная рекламу можно разделить на 3 сегмента:
Адаптация баннеров под другие языки используется в случае международной медийной компании. Где один креатив представлен на разных языках. Яркий пример автоконцерны и зарубежные блокбастеры.
Какие размеры (ресайзы) баннеров существуют?
Согласно требованиям, которые выдвигает Рекламная сеть Яндекс к баннерам (ознакомиться с ними можно здесь), наиболее популярны (вне зависимости от платформы) баннеры следующих размеров:
Самые популярные размеры согласно руководству от Google (ознакомиться с ними можно здесь)
Менее популярные и менее эффективные размеры баннеров
Также существуют адаптивные HTML5 баннеры с «резиновой версткой» (их еще называют «тянущиеся», «резиновые», «перетяжки», «100% баннеры») — это баннеры, которые не имеют заданной ширины и адаптируются под размер экрана. Такой размер считается гораздо более эффективным, так как занимает всю ширину экрана и привлекает к себе больше внимания, однако не все площадки принимают к размещению «резиновые баннеры»
Размеры баннеров для социальных сетей
Фейсбук и Инстаграм
В технических требованиях Facebook отсутствуют жесткие требования к весу баннеров, при загрузке изображения происходит автоматическое сжатие. Важное требование: текста должно быть не более 20% от площади креатива (сервис проверки). Также на баннерах должны отсутствовать кнопки.
Размеры баннеров для ВКонтакте (VKontakte)
Размеры баннеров для MyTarget
Баннерная слепота
Баннерная слепота (баннерный шум) — определение, возникшее в далеком 1998 году. Этот феномен подразумевает сознательное или неосознанное игнорирование рекламных баннеров пользователями веб-ресурсов. Подобное поведение, по мнению психологов, обусловлено предвзятым отношением к любым сторонним элементам на сайте при поиске нужной информации.
Игнорирование пользователями рекламных баннеров — существенно снижает эффективность рекламной кампании. Тем не менее, бороться с этим явлением можно вполне плодотворно. Для этого следует использовать множество проверенных методов, например:
Кто создает баннеры, какие навыки нужны, где учат
Создание эффективного рекламного баннера — сложный процесс, который требует опыта и владения множеством навыков, включая владением специальными программами для создания изображений и анимации, а также языков программирования:
На рынке есть много специалистов, которые могут и вправе профессионально создавать баннеры для любых нужд. Среди таковых могут быть опытные дизайнеры, освоившие HTML5 и CSS. Кроме того, выделяют т.н. баннермейкеров — людей, профессионально занимающихся созданием и оформлением баннеров.
Алгоритм создания баннеров
Что должно быть указано в ТЗ на разработку веб-баннера
Сколько стоят баннеры
Цена на производство баннера зависит от типа исполнителя и его опыта. Обычно, изготовлением баннеров занимаются: медийное агентство, продакшн-студия или фрилансеры.
Объективная цена на услуги по созданию баннеров формируется от сложности работы и навыков дизайнера. Чем сложнее анимация, чем больше кадров, тем дороже будет стоить продукт на выходе. Также цена зависит от наличия исходного материала, придется ли дизайнеру что-то отрисовать с нуля, иллюстрации, айдентика и тд.
Диапазон цен на создание простых баннеров HTML5 на рынке в России, согласно нашему анализу, колеблется от 1500 до 17000 за штуку и до 100000 рублей, если речь идет об интерактивных баннерах, с игрой или другими вариантами взаимодействия с пользователем.
Диапазон цен на создание Gif-баннеров от 500 до 15000 руб/шт
Статичные баннеры (PNG, JPG) в среднем стоят от 500 до 5000 рублей за штуку
Все зависит от сложности работы и навыков дизайнера. Чем сложнее анимация, количество кадров, тем выше конечная стоимость. Резиновые (100% баннеры) стоят всегда дороже, так как привлекается специалист фронтендер.
Программы для создания баннеров
Для создания HTML5 баннеров могут использоваться несколько программ: первые нужны для оформления и создания дизайна (визуальной части), а другие — для кода. Существует множество ПО, включая Adobe Animate, предлагающие внушительный инструментарий для создания анимированных и интерактивных баннеров.
Google, в свою очередь, предлагает собственный одноименный инструмент — Web Designer, позволяющий каждому создать HTML5 баннеры, содержащие игровые, интерактивные и анимированные элементы. По своей сути, этот инструмент автоматизирует использование HTML5, CSS3 и JavaScript, не требуя от пользователей знания этих языков.
Баннеры в формате Gif создаются в любом мало-мальски продвинутом редакторе изображений, включая Animate CC, Photoshop или After Effect. То же самое касается и статичных баннеров, которые можно создавать в фотошопе, Sketch или Figma, и даже в стандартном Paint.
Онлайн-сервисы для создания баннеров
Если раньше для создания качественных и технологичных баннеров требовалось прибегать к дорогостоящим услугам специалистов, то сегодня можно рассчитывать на собственные силы. Более того, нет нужды приобретать и устанавливать программное обеспечение на свой компьютер, поскольку сегодня доступно множество онлайн-сервисов для создания баннеров. Среди них можно выделить:
Эффективность баннера — в чем измеряется?
Эффективность баннера — параметр, который можно объективно вычислить путем сравнения таких показателей, как:
Кликабельность баннера (CTR): что такое и как увеличить
Кликабельность баннера — это количество кликов, приходящихся на 1000 посетителей. Чтобы увеличить этот параметр, следует грамотно отнестись к созданию баннера и применению интерактивных элементов. Кроме этого, следует органично подбирать:
Немаловажное значение имеет размер и расположение самого баннера на странице, а также текст. Сегодня стандартные рекламные предложения не способны «зацепить» рядового посетителя. Необходимо задействовать всю силу текстового и визуального контента в одном баннере, а также предлагать по-настоящему выгодные и цепляющие предложения. Кроме этого, поднять CTR помогут:
Какой должен быть CTR у медийной рекламы?
Так как основная задача рекламных баннеров это повышение узнаваемости бренда, то CTR будет значительно ниже контекстной рекламы, которая обычно содержит прямой ответ на запрос пользователя. Например, в РСЯ или КМС Google успешным показателем рекламной кампании можно назвать CTR от 0,01 до 0,1%, но эти цифры слишком абстрактные и не являются целевыми значениями, показатель вашей кампании может быть значительно выше или ниже.
CTR медийки в социальных сетях, например в Facebook Ads или таргет ВКонтакте также может варьироваться от 0,1 до 0,9%.
Как сделать баннер для сайта самостоятельно
Основная задача баннеров — обеспечить приток аудитории. Заранее позаботьтесь о том, чтобы точно измерять и анализировать эффективность рекламы с помощью нашего инструмента:
Виды баннеров
Бывает несколько основных видов баннеров:
Все эти разновидности размещаются в стандартных контейнерах определённых размеров. Их насчитывается около двух десятков и все мы приводить не будем. Для примера: 160×600, 240×400, 240×600.
Также существует множество более сложных баннеров, таких как HTML MPU — несколько HTML-креативов, Expandable — растягивающийся, Rich-media — баннер, содержащий сразу несколько медиа-форматов, и другие. Их создают и размещают профессионалы. Такие баннеры, в основном, разрабатываются отдельно для каждого проекта, в отличие от перечисленных выше, пригодных для использования в массовых рекламных сетях, также называемых баннерными.
Размещение баннеров
Есть несколько способов разместить баннер в интернете. Раньше это была процедура сугубо ручная — на сайте создавался блок, в котором администратором размещался тот или иной креатив.
Сейчас вряд ли понадобится ручное размещение — в интернете работают баннерные сети. Блок на сайте не заполняется креативом силами модераторов. Это просто пустое поле, которое принимает контент от третьей стороны — рекламной платформы. Уже там у рекламодателей есть кабинеты, с помощью которых они загружают свои баннеры.
Далее баннер адресуется не какому-то заранее определённому сайту. Работает RTB-алгоритм. Real Time Bidding — технология, с помощью которой осуществляется целевой показ рекламных объявлений. В зависимости от того, к какому потребительскому сегменту принадлежит посетитель страницы, которому будет продемонстрирован баннер, аукцион подбирает для него наиболее подходящее объявление согласно настройкам рекламодателя. Последний в рабочем кабинете определяет, какие именно сегменты пользователей будут видеть его баннеры, а площадки управления данными подбирают ту аудиторию, которая по результатам анализа подходит под описание. В результате, происходит моментальный подбор баннера — только в последние доли секунды загрузки страницы становится понятно, какой именно баннер система отобразит в блоке.
Сквозная аналитика
Площадки
В частных случаях вам может понадобиться только статичное размещение на одном или нескольких сайтах. Необходимо создать баннер подходящего формата — графический, слайдер или HTML, чтобы разместить его в блоке на сайте. В случае, если вы владелец ресурса, то вы сами решаете, какое место займёт баннер, и загружаете его в каталог. Либо вы договариваетесь с владельцем сайта о месте размещения, передавая ему исходники баннера.
Баннерные сети
Размещение баннеров в интернете обеспечивает перечень баннерных сетей, у каждой из которых свои требования к креативам.
Например, Rotaban.ru всё ещё принимает flash-баннеры, но запрещает HTML.
Более серьёзный игрок Adfox.ru предлагает широкий выбор. Рекламодатель вправе разместить графические и HTML-баннеры. В первом случае допустимы форматы png, gif, jpg, svg и файлы весом не более 300 Кб.
Сеть GinAds.com работает с разнообразными форматами, например: Топлайн, Слайдер, Видео, Боттомлайн, Fullscreen, HTML-баннеры.
Яндекс.Директ
Яндекс внедрил целый набор баннерных размещений для рекламодателей.
Google Ads
Более скромные, но вполне реальные возможности размещения баннеров предоставляет также Google. В рекламном кабинете можно обнаружить, что при создании кампании в КМС — контекстно-медийной сети — вам доступна загрузка баннеров. Тем не менее, в то время как графические объявления с анимацией и без разрешаются любому рекламодателю, HTML5 будет доступен только по запросу и при соблюдении требований:
Вместе с тем, летом 2018 Google по примеру других игроков создал формат адаптивных медийных объявлений. Эти объявления подстраиваются под пользователя с помощью динамического контента и могут быть созданы на основе фида.
Как сделать баннер для сайта и сетей
Начнём с того, что вам может понадобиться с наибольшей вероятностью.
Яндекс.Директ
Создаётся в меню Текстово-Графических объявлений. Загрузка креатива возможна с устройства, а также предусмотрено создание баннера с помощью конструктора.
Откроется редактор. В левой колонке пользователь отмечает необходимые размеры, а в правой изменяет дизайн и элементы баннера. В частности, можно загрузить изображение, изменить цвета заливки и рамки, цвет текста и многое другое.
Предусматривает те же шаги с той разницей, что в медийной кампании используются только графические объявления. В остальном, процесс загрузки и создания баннеров идентичен.
Для HTML-баннера необходимо подготовить zip-архив с кодом и креативами.
Необходимо пройти модерацию сайта, предварительно отправив документы: лицензии и сертификаты на продажу размещаемой и рекламируемой продукции.
Далее — загрузить фид — прайс-лист, составленный по шаблону.
Креатив создаётся предварительно пользователем. Требования:
Google Ads
Можно загрузить до 15 изображений и до 5 логотипов. Требования:
Сами объявления состоят из настраиваемых элементов:
Баннер с нуля
Специалисты рекомендуют различный софт, который позволяет делать баннеры самостоятельно — в том числе, HTML-баннеры, в которых код генерируется самой программой.
Так, среди популярного программного обеспечения выделяют:
Если у вас есть навыки вёрстки, то лучше самостоятельно прописать компоненты на CSS, javascript и HTML.
А еще, размещая баннеры с переходом на ваш сайт на сторонних ресурсах, установите скрипт коллтрекинга – он помогает отслеживать эффективность.
Как самостоятельно сделать рекламный баннер: обзор популярных сервисов
София Гаитбаева ppc.world (до 2021 года)
Что делать, если в команде нет дизайнера, работать в сложных графических редакторах вы не умеете, но нужно создать красивые рекламные баннеры? На помощь приходят специальные сервисы для создания графического контента. Мы выбрали шесть популярных онлайн-редакторов: Canva, Adobe Spark, Desygner, Bannersnack, Bannerboo и Fotor, протестировали их и готовы рассказать об их преимуществах и недостатках.
Canva
Сервис считается одним из самых популярных инструментов для создания графического контента. В нем много шаблонов открыток, постеров, презентаций, есть специальные форматы для соцсетей Facebook и Instagram.
Попробуем создать самые «ходовые» баннеры: большой прямоугольник 336×280, средний прямоугольник 300×250, полноразмерный баннер 728×90, а также большой мобильный баннер 320×100.
Чтобы начать работу с изображением нажимаем «Создать дизайн», затем — «Использовать специальные размеры».
Вводим параметры высоты и ширины баннера и переходим в редактор.
Сначала сделаем фон. Canva предлагает различные варианты оформления: однотонные, орнаменты, узоры, градиенты, флористические и т. д.
Чтобы добавить к фону элементы (логотип, дополнительные изображения) переходим в раздел «Мое». Сюда можно загрузить изображения с компьютера. Чтобы разместить их на баннере, просто перетащите загруженные картинки из галереи на рабочее поле. Удобно, что можно сразу загрузить в медиатеку все элементы, которые планируете использовать для создания баннеров, и потом по очереди перетаскивать и редактировать.
Теперь добавим текст.
Нам нужен простой баннер, поэтому текст призыва постараемся сделать в том же стиле, что логотип.
Изменение цвета текста, выравнивания и т. д. — в меню сверху. Текст можно перетаскивать, растягивать и сжимать.
Теперь добавим кнопку. Для этого заходим в раздел «Элементы» — «Фигуры». Мы хотим круглую кнопку, соответственно, из списка фигур выбираем круг. Перетаскиваем его в нижнюю часть баннера, корректируем размер и выбираем цвет.
Можно добавить стрелку на кнопку. Для этого переходим в «Элементы» — «Линии». Тут есть уже готовые стрелки, выбираем понравившуюся, перетаскиваем на кнопку, меняем размер и цвет.
Осталось добавить несколько простых декоративных элементов. В Canva нет возможности свободно выделить часть изображения, обрезать и вставить элемент в баннер, как в более сложных и продвинутых фоторедакторах. Если нужно добавить на баннер элемент изображения, придется обрезать его в другом графическом редакторе, сохранить и загрузить в медиатеку Canva. Зато в Canva большая библиотека фонов и иллюстраций. Так как дизайн нашего баннера простой, можно выбрать что-то из иллюстраций в библиотеке сервиса.
Сохраняем то, что у нас получилось, нажав «Скачать» в верхнем правом углу, и аналогичным образом делаем остальные баннеры:
Плюсы
Минусы
Canva — удобный и простой сервис с большой библиотекой бесплатных изображений и шаблонов оформления. Правда, отсутствуют многие полезные инструменты и функции более продвинутых графических редакторов, но новичок вполне может обойтись без них, особенно если дизайн простой и минималистичный.
Adobe Spark
Adobe Spark — это веб-приложение, им можно пользоваться с десктопа, также есть версия для iOS. У приложения три основных назначения:
Сервис позиционирует себя как инструмент для тех, кто не обладает навыками работы в сложных графических редакторах. Проверим, насколько легко с его помощью создать баннеры.
Спускаемся вниз страницы, нажимаем Create a graphic.
Сервис предлагает воспользоваться шаблонами, но мы будем создавать баннер самостоятельно, поэтому нажимаем Start from scratch.
Теперь нужно выбрать размер. Мы будем вводить параметры вручную, поэтому выбираем Custom и вводим значения ширины и высоты. Затем открывается библиотека изображений. Можно использовать что-то из выборки или ввести запрос в поисковую строку, чтобы система подобрала подходящие картинки. Также можно загрузить фото с компьютера, нажав Upload.
Переходим в редактор.
Начнем с логотипа. Чтобы загрузить его с компьютера, нажимаем на круглый значок с плюсом и выбираем Photo.
Затем выбираем расположение логотипа и корректируем размер.
Теперь добавим текст. Для этого нажимаем ту же круглую кнопку с плюсом и выбираем Text. Здесь интерфейс не такой простой и понятный, как в предыдущем сервисе, чтобы откорректировать каждый параметр (цвет, стиль шрифта, задний фон и т. д.), приходится заходить в разные вкладки на панели сбоку справа. Например, мне долго не удавалось понять, как сделать задний фон текста прозрачным. Оказалось, что фон текста редактируется во вкладке Shape. Зато набор инструментов этого редактора гораздо шире, здесь много интересных возможностей и функций.
Осталось добавить кнопку. Для этого снова нажимаем круглый значок с плюсом, выбираем Icon. Там много форм и размеров, выберем прямоугольник со скругленными краями. В этот раз кнопка будет не со стрелкой, а с призывом к действию. Пишем текст, накладываем на кнопку и выбираем цвет букв.
Сохраняем, нажав Download справа вверху. Когда один баннер готов, можно оставить макет и поменять размеры, перейдя во вкладку Resize на правой боковой панели и выбрав вариант Custom.