Bannersnack: платформа для создания баннеров онлайн

Веб — баннер или рекламный баннер является формой рекламы на World Wide Web , поставляемый сервер объявлений . Эта форма онлайн-рекламы влечет за собой встраивание рекламы в веб-страницу . Он предназначен для привлечения трафика на веб-сайт путем ссылки на веб-сайт рекламодателя. Во многих случаях баннеры доставляются центральным рекламным сервером . Эта система окупаемости часто заключается в том, как поставщик контента может заплатить за доступ в Интернет, чтобы предоставить контент в первую очередь. Однако обычно рекламодатели используют рекламные сети для показа своей рекламы, что приводит к системе вознаграждения и более качественному размещению рекламы.

Веб-баннеры работают так же, как и традиционные рекламные объявления: они уведомляют потребителей о продукте или услуге и излагают причины, по которым покупатель должен выбрать рассматриваемый продукт, — факт, впервые задокументированный на HotWired в 1996 году исследователями Рексом Бриггсом и Найджелом Холлисом. Веб-баннеры отличаются тем, что результаты рекламных кампаний могут отслеживаться в режиме реального времени и могут быть ориентированы на интересы зрителя. Поведение часто отслеживается с помощью тега клика . Многие пользователи сети считают эту рекламу раздражающей, потому что она отвлекает от реального содержания веб-страницы или тратит лишнюю полосу пропускания . В некоторых случаях веб-баннеры закрывают содержимое экрана, которое желает видеть пользователь. Новые веб-браузеры часто включают программные средства блокировки рекламы для отключения всплывающих окон или блокировки изображений с выбранных веб-сайтов. Еще один способ избежать баннеров — использовать блокирующий их прокси-сервер , например Privoxy . В веб-браузерах также могут быть доступны расширения, блокирующие баннеры, например Adblock Plus для Mozilla Firefox или AdThwart для Google Chrome и ie7pro для Internet Explorer .

История

Этот баннер для некоммерческой онлайн-энциклопедии « Википедия» используется для продвижения сообщества пользователей веб-сайта.

Пионером онлайн-рекламы была компания Prodigy , в то время принадлежавшая IBM и Sears . Prodigy сначала использовала онлайн-рекламу для продвижения продуктов Sears в 1980-х, а затем других рекламодателей, включая AOL , одного из прямых конкурентов Prodigy. Prodigy не смогла извлечь выгоду из своего преимущества первопроходца в онлайн-рекламе. Первая интерактивная веб-реклама (которая позже стала известна под термином «баннерная реклама») была продана Global Network Navigator (GNN) в 1993 году Heller, Ehrman, White, & McAuliffe , ныне несуществующей юридической фирме с Кремниевой долиной. офис. GNN была первым коммерческим веб-изданием и одним из первых коммерческих веб-сайтов.

В течение многих лет HotWired считался первым веб-сайтом, который в больших количествах продавал баннерную рекламу широкому кругу крупных корпоративных рекламодателей. Эндрю Анкер был первым генеральным директором HotWired. Рик Бойс , бывший медиа-покупатель рекламного агентства Hal Riney & Partners в Сан-Франциско, возглавил продажи компании. HotWired придумал термин «баннерная реклама» и был первой компанией, которая предоставила своим клиентам отчеты о рейтинге кликов. Первый веб-баннер, проданный HotWired, был оплачен AT&T Corp. и был размещен в сети 27 октября 1994 года. Другой источник также упоминает Hotwired и октябрь 1994 года, но в качестве первого веб-баннера использует кампанию Coors « Zima ». В мае 1994 года Кен Маккарти был наставником Бойса в его переходе от традиционной к онлайн-рекламе и впервые представил концепцию интерактивной / отслеживаемой рекламы. Он заявил, что, по его мнению, только модель прямого отклика, в которой измеряется рентабельность инвестиций в отдельные объявления, в долгосрочной перспективе окажется устойчивой для онлайн-рекламы. Несмотря на это предсказание, рекламные баннеры оценивались и продавались на основе количества произведенных ими показов.

Тем не менее, Time Warner «s Pathfinder (веб — сайт) , который был запущен 24 октября 1994 года на той же неделе HotWired, но три дня назад включены рекламные баннеры. Уолтер Исааксон , тогдашний президент Time Inc. New Media, и Columbia Journalism Review , оба приписывают Брюсу Джадсону , тогдашнему генеральному директору Time Inc. New Media, идею создания рекламного баннера. В интервью Гарвардскому центру СМИ, политики и государственной политики Шоренштейна, посвященном истории Интернета, Исааксон обсудил вклад Джадсона, сказав: «Он действительно все изменил. Мэдисон-авеню сразу же решила:« Боже мой, у нас есть чтобы понять это. Мы должны нанять много молодых людей ». Они присылали нам деньги. Это было похоже на то, как если бы вы могли смотреть из Тайм-Лайф Билдинг на Мэдисон-авеню и наблюдать, как люди идут с мешками с деньгами, чтобы бросить их на наш стол, или на стол Брюса Джадсона , чтобы купить баннер. Объявления.»

Первый центральный рекламный сервер был выпущен в июле 1995 года компанией Focalink Communications, что позволило управлять, нацеливать и отслеживать онлайн-рекламу. Локальный рекламный сервер быстро последовал за NetGravity в январе 1996 года. Технологические инновации рекламного сервера, вместе с продажей онлайн-рекламы на основе показов, способствовали резкому росту распространения веб-рекламы и обеспечили экономическую основу для Интернета. промышленность в период с 1994 по 2000 год. Новая модель интернет-рекламы, которая возникла в начале 21 века и была представлена GoTo.com (позже Overture , затем Yahoo! и массово продаваемая программой Google AdWords), во многом опирается на об отслеживании реакции объявления, а не показов.

Значимость

Баннерная реклама сыграла важную роль в быстром развитии платной рекламы в Интернете. Благодаря стандартным форматам, работе (интерактивная ссылка на пункт назначения) и системе ценообразования (показы) баннерная реклама позволяла любому веб-сайту продавать рекламу и обеспечивала операционные требования для компаний, занимающихся рекламными серверами, таких как NetGravity, для разработки систем. необходимы для работы и отслеживания интернет-рекламы. Баннерная реклама также была уникальной по сравнению с рекламой, появлявшейся в сопоставимых тогда СМИ, таких как газеты и журналы. В отличие от рекламы в периодических изданиях, баннерная реклама побуждала потребителей СМИ фактически оставить медиа-услугу или продукт и перейти в отдельную медиа-среду (обычно веб-сайт, управляемый рекламодателем). Напротив, читателям, просматривающим рекламу в газетах или журналах, не рекомендуется покидать журнал. Скорее, рекламное сообщение предназначено для воздействия на читателя.

Стандартные размеры

image Стандартные размеры объявлений IAB. Размер этой иллюстрации уменьшен. Смотрите фактические размеры . IAB в некоторой степени стандартизировал размеры объявлений . До стандартизации IAB рекламные баннеры появлялись в более чем 250 различных размерах. Однако некоторые веб-сайты и рекламные сети (за пределами Евросферы или Северной Америки) могут не использовать некоторые или все базовые размеры объявлений IAB. Размеры рекламы IAB по состоянию на 2007 год:

Стандартные размеры веб-баннеров, выделенные записи являются частью оригинального универсального рекламного пакета IAB. Grayedзаписи были удалены после обновления в 2011 г.
Имя Ширина / пикс. Высота / пикс. Соотношение сторон
Прямоугольники и всплывающие окна
Средний прямоугольник 300 250 6∶5
Square Pop-Up 250 250 1∶1
Vertical Rectangle 240 400 3∶5
Large Rectangle 336 280 6∶5
Прямоугольник 180 150 6∶5
3:1 Rectangle 300 100 3∶1
Pop-Under 720 300 2,35∶1
Баннеры и кнопки
Full banner 468 60 78∶10
Half banner 234 60 39∶10
Микро-бар 88 31 год 88∶31
Button 1 120 90 4∶3
Кнопка 2 120 60 2∶1
Vertical banner 120 240 1∶2
Square button 125 125 1∶1
Таблица лидеров 728 90 728∶90
Небоскребы
Широкий небоскреб 160 600 1∶3,75
Skyscraper 120 600 1∶5
Объявление на половину страницы 300 600 1∶2

Заметки

В 2015 году IAB объявил о правилах создания рекламных объявлений для медийной и мобильной рекламы с учетом HTML5.

В 2017 году IAB также представил новые правила, включающие регулируемые форматы рекламы, а также рекомендации для нового цифрового контента, такого как дополненная реальность (AR), виртуальная реальность (VR), социальные сети, мобильное видео, обмен смайликами и рекламными сообщениями и 360-градусная видеореклама.

Спецификация объявления фиксированного размера:

Название рекламного блока Фиксированный размер (пикс.)
Рекламный щит 970 х 250
Баннер для смартфона 300 х 50、320 х 50
Таблица лидеров 728 х 90
Супер таблица лидеров / раскрытие вниз 970 х 90
Портрет 300 х 1050
Небоскреб 160 х 600
Средний прямоугольник 300 х 250
120×160 120 х 160
Межстраничное объявление для мобильных телефонов 640 x 1136, 750 x 1334, 1080 x 1920
Небольшой баннер с телефоном 120 х 20
Стандартный баннер для основного телефона 168 х 28
Большой баннер для телефона 216 х 36

Стандартные веб-баннеры, включенные в Рекомендации IAB по универсальному пакету и рекламным блокам, поддерживаются крупными рекламными компаниями. Это особенно актуально для членов IAB, таких как Adform , AppNexus , Chitika , Conversant, Epom , HIRO, Mixpo , SpotXchange , ZEDO и многих других. Кроме того, поставщики рекламы могут предлагать другие нестандартные размеры баннеров и технологии, а также поддержку различных форматов интернет-рекламы (например, нативной рекламы ).

Однако стандартные размеры баннерной рекламы постоянно меняются из-за творческой усталости потребителей и баннерной слепоты. Рекламные компании постоянно тестируют эффективность рекламных блоков, чтобы обеспечить максимальную эффективность для своих клиентов. IAB обновляет свои рекомендации два раза в год. Некоторые издатели, известные своим уникальным индивидуальным исполнением, включают BuzzFeed , CraveOnline , Quartz (публикацию) , Thought Catalog , Elite Daily, Vice Media, Inc. , Mic (медиакомпания) и многие другие. По данным медиа-исследовательской компании eMarketer, количество таких типов индивидуального исполнения посредством прямых покупок издателем растет, и к концу 2015 года расходы на нативную рекламу превысят 4,3 миллиарда долларов.

Использование без рекламы

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

Типы веб-баннеров

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

  • Статический баннер: простое встроенное изображение.
  • Живой баннер : динамически создаваемый баннер.
  • Интерактивный баннер: управляемый ИИ, он позволяет зрителям взаимодействовать с баннером.

Смотрите также

Рекомендации

О том, как пользоваться Google Web Designer расскажет Юлиана Кондрашина, специалист по интернет-рекламе E-Promo

В рамках бизнеса появляются задачи, когда требуется быстро создать или редактировать существующий баннер и залить его на площадку. До этой статьи я не знала, что такое Google Web Designer, но изучив его, я поняла, что освоить его можно за один вечер. 

Что такое Google Web Designer

Google Web Designer – это бесплатное приложение для создания объявлений и других видов онлайн-контента в формате HTML5. В нем существует как визуальный редактор, так и редактор кода. В визуальном редакторе можно создавать изображения с помощью инструментов рисования, добавлять текст и трехмерные объекты, а также анимировать элементы и события на временной шкале. В редакторе кода можно создавать файлы CSS, JavaScript и XML.

Google Web Designer будет полезен web-дизайнерам и маркетологам, которые хотят попробовать себя в сборке баннеров. 

Я расскажу и покажу, как создавать баннеры формата HTML5 для загрузки в Google Ads и Yandex Direct. Для этого нам пригодится как визуальный редактор, так и редактор кода.

Как он выглядит

Скачать Google Web Designer можно на официальном сайте. Приложение запустится на компьютерах Windows, MacOS и Linux. 

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

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

Выбираем платформу Google Ads или Внешнее объявление и задаем размер. Многие рекламодатели предпочитают заказывать креативы, которые подойдут и для Google Ads, и для Yandex Direct. 

Какие разрешения мы можем использовать на обеих площадках: 

160×600, 240×400, 300×250, 300×600, 320×50, 320×100, 336×280, 728×90, 970×250. 

Вес каждого из них не должен быть более 150 КБ.

Режим анимации можем выбрать любой – в окне создания креатива есть кнопка, которая их переключает:

  • Быстрый режим анимации — для создания креативов покадрово (сцена за сценой). 

  • Расширенный — для редактирования анимации каждого элемента в отдельности.

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

Посмотрим, как выглядит рабочая область Google Web Designer:

1. Панель инструментов. Тут находятся инструменты для создания и управления элементами в рабочей области. Здесь нам понадобятся инструменты выделения, пути перемещения, рука и масштаб. Здесь также можно создавать маску объекта, различные фигуры и кривые Безье. Есть пипетка и создание текста. Если понадобится, тут даже можно работать с 3D-объектами.

2. Панель настроек инструмента. Если выбрать какой-либо инструмент — в этой панели отобразятся все доступные действия с ним.

3. Временная шкала. На ней есть 2 режима управления анимацией – быстрая (покадрово) и расширенная (с каждым элементом на холсте). Именно с помощью этой панели мы будем делать анимацию.

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

5. Рабочие панели. Выбор цвета, форматирование текста, структурный редактор, в котором находятся слои, как в Adobe Photoshop. Также есть инспектор объявления — он показывает, все ли условия нами соблюдены и можно ли загрузить баннер на рекламную площадку. Есть и другие панели, но мы рассмотрим только те, с которыми будем работать при создании баннера.  

6. Панель просмотра. Здесь мы можем увидеть, как будет выглядеть баннер в браузере и опубликовать готовый вариант. В редакторе кода можно добавить  дополнительные функции. Например, таймер обратного отсчета или календарь.

7. Холст документа. На нём мы будем создавать наш баннер.

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

Создаем анимированный баннер с чистого листа

Выбираем изображения

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

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

Изображения можем поискать на фотостоках, таких как Shutterstock, Usplash, FreePik или Pngtree. Для баннера выбрали четыре формата: 240×400, 300×250, 300×600 и 336×280. Подготовили изображения нужных размеров в Adobe Photoshop.

Подбираем шрифты и с помощью Adobe Illustrator рисуем логотип бренда и призыв к действию. Создаем вариант логотипа и три состояния кнопки призыва к действию для компонента взаимодействия, который мы будем использовать: кнопка не нажата, на кнопку наведен указатель, кнопка нажата. Помните, что если в процессе работы возникнет необходимость замены каких-либо элементов, то в GWD мы можем это сделать в любой момент.

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

У всех изображений прозрачный фон, они в формате PNG, за исключением фона. Только фон у нас непрозрачный, в формате JPEG.

Верстаем баннер для Google

Давайте теперь соберем наш первый баннер для Google Ads, формат 300х250.

Добавим все элементы, которые будут участвовать в этом баннере на холст.

Фон надо уменьшить и подогнать к холсту. Выбираем «Управление трансформацией» и «Выравнивание по контейнеру». Затем выделяем фон, зажимаем клавишу Shift и по диагонали уменьшаем до нужных размеров.

Переименуем изображение здесь, чтобы не путаться. Изображений будет много.

Следующим идет изображение фруктов. Просто переносим, зажав мышкой, картинку на холст. Обращаем внимание на Инспектор — нам уже придется уменьшить все наши креативы. Не проблема — в сети достаточно бесплатных конвертеров. Для примера используем iLoveIMG.

Сейчас уже лучше. Поставим замочки на эти слои – они не будут участвовать в анимации.

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

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

А теперь создадим траекторию. Представьте временную шкалу как траекторию движения из пункта А в пункт Б. Выбираем примерное время достижения пункта Б по шкале секунд, ПКМ → Добавить ключевой кадр. ЛКМ данный ключевой кадр и перетягиваем объект в наш пункт Б. Нажимаем  «Запустить» вверху временной шкалы и смотрим результат. Повторяем это действие с остальными фруктами.

В реальности фрукты, как и любые другие предметы, с постоянной скоростью не падают и линейная анимация здесь не подойдет. ПКМ на нужной траектории во временной шкале → «Параметры динамики». Выберем для них Ease-in — медленная в начале и быстрая в конце. Возможно настроить и свою собственную динамику.

Теперь анимация выглядит правдоподобно. Давайте добавим кручение фруктов в воздухе с помощью инструмента вращения. Видите серый круг вокруг компонента? С помощью него можно настроить радиус наклона в завершающем ключевом кадре. Включить или отключить эту функцию можно с помощью «Управление трансформацией» на панели настроек инструментов.

Для большей реалистичности добавим немного завершающего движения с вращением в Ease-out. Пример можно увидеть на временной шкале ниже.

Пришло время для появления логотипа. Давайте сделаем его появление из ниоткуда. Центрируем лого по вертикали, изменим масштаб до 0.05 и заливку до 0, а в последнем ключевом кадре вернем показатели по умолчанию.

Остался призыв к действию. Давайте для этого элемента используем компонент взаимодействия. Благодаря нему пользователь сможет взаимодействовать с баннером, что добавит ему интерактивности. Для этого нам нужна Рабочая панель → «Компоненты». Выберем папку «Компоненты взаимодействия» → «Кнопка изображения».

Подтянем элемент в нужную область отображения, выделяем его и заходим в «Свойства». В разделе «Кнопка изображения» нам надо добавить 3 состояния кнопки призыва. Не забудьте изменить масштаб на Вписать — это нужно для того, чтобы изображение сохранило исходные размеры. Здесь же в разделе Положение и размер вы можете отредактировать размеры самого компонента взаимодействия.

Сделаем так, чтобы кнопка мигала. Копируем через каждые 4 клетки ключевое действие и чередуем заливку и масштаб 0,9 и 0,9 и 1 и 1. В первом ключевом кадре заливку оставим 0. Так сделаем 7 раз. Итого у нас получается 14 ключевых кадров. В конце заставим ее полностью исчезнуть — масштаб и заливка будут равны 0. 

С логотипом мы поступим иначе — заливка будет равна нулю, но масштаб выставим 4. Логотип будет будто наезжать на экран. А после этого заставим фрукты укатиться за кадр с динамикой Ease-in. 

Зациклим нашу анимацию, чтобы она повторялась. Добавляем ключевые кадры до начала анимации каждого объекта и до последней секунды. Делаем это для того, чтобы объекты повторялись идентично друг другу. Не забудьте выставить заливку 0 у логотипа и призыва к действию для того, чтобы эти объекты оставались невидимыми. Затем задаем повтор анимации 2 раза. Общее время должно быть не более 30 секунд, а так как мы создали повтор, то в итоге наша анимация теперь составляет 11.5 х 2 = 23 секунды.

Проверяем инспектор — все ок. Можем публиковать. Для этого нажимаем «Опубликовать» и выбираем «Локально». Сохраняем готовый баннер в нужной нам папке. Баннер для Google Ads готов.

Верстаем баннер для Яндекса

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

Создаем новый документ. Настройки остаются прежними, кроме выбора платформы. Здесь выбираем «Внешнее объявление».

Возвращаемся к предыдущему объявлению. Мы должны снять все замки, выделить все компоненты во временной шкале, скопировать и вставить в новый документ. Все элементы и анимация скопированы полностью.

Теперь переходим в режим кода.

И делаем следующее:

После строчки

meta name=»environment» content=»gwd-genericad»

вставляем такой код:

meta name=»ad.size» content=»width=***,height=***»

где width и height — ширина и длина нашего баннера. 

Так как у нашего баннера размеры 300х250, вставляем строчку:

meta name=»ad.size» content=»width=300,height=250″

Не забудьте поставить скобки <> перед началом строчки и после нее 

Находим абзац с телом баннера body. Со следующей строки, после открытия тела кода, вводим:

a id=»click_area» href=»#» target=»_blank»

Находим  /gwd-genericad в теле кода и закрываем тег: 

И сразу после него добавляем скрипт:

script

   document.getElementById(«click_area»).href = yandexHTML5BannerApi.getClickURLNum(1);

/script

Также не забудьте о скобках в начале и конце тега, как на скриншоте:

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

Сохраняем изменения и публикуем баннер как в прошлом разделе. Баннер для Яндекс.Директа готов.

Верстка других форматов и модерация объявлений

Остальные 3 формата, 240×400, 300×600 и 336×280, мы можем создать используя уже готовый баннер 300×250. Эти советы помогут ускорить работу: 

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

  • Добавьте фоновые изображения без анимации нужного размера и подгоните их по размеру баннера, если требуется.

  • Из временной шкалы предыдущего баннера скопируйте движущиеся объекты на новый. Нужные объекты можно выделить с помощью SHIFT и скопировать / вставить Ctrl+C / Ctrl + V. Они копируются вместе с анимацией.

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

  • В некоторых объектах, в нашем случае, во фруктах, придется изменить траекторию падения под размер баннера. Чтобы это было быстрее, снимите галочку с пункта «Управлять трансформацией». Вращение объектов при этом сохранится. 

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

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

Давайте добавим созданные нами объявления в кабинеты площадок. В Google Ads объявления одобрены.

В Яндекс.Директе объявления одобрены.

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

Как Google Web Designer упрощает рабочие задачи

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

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

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

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

— Теперь, благодаря GWD, совсем не обязательно владеть JavaScript, CSS и HTML для того, чтобы создать баннер HTML5.

— Интерфейс интуитивно понятен. Например, если вы уже знакомы с интерфейсами Adobe Photoshop и Illustrator, то разобраться в интерфейсе GWD вам будет еще проще.

— Приложение бесплатное и постоянно обновляется. Дополнительную информацию об использовании GWD и его функциях можно найти в справке. Она доступна и на русском языке.

image 25 Августа 2016

48 957

Сегодня мы рассмотрим 15 дизайнерских приемов для создания баннеров, за которые не будет стыдно. Для примеров мы взяли победителей 2015 года по версии Webby Awards.

В интернете много шумихи по поводу баннеров. Они уже отжили свое? Кликает ли кто нибудь на них? Может, они уже мертвы? А вдруг появилась лучшая альтернатива баннерам?

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

Сегодня мы рассмотрим 15 дизайнерских приемов для создания баннеров, за которые не будет стыдно. Для примеров мы взяли победителей 2015 года по версии Webby Awards.

1. Придерживайтесь стандартных размеров

image

Баннерная реклама не относится к типу продукта один «размер для всего». Вы должны исходить из тех спецификаций, которые нужны для ресурса, на котором вы планируете размещать рекламу, а большинство сайтов используют набор стандартных размеров. (Это также касается и email-рассылок)

Ниже размеры, которые вы должны выбрать в первую очередь:

  • 728×90 px — полноразмерный баннер (часто показывается вверху или внизу страницы)
  • 300×250 px — встроенный прямоугольник (преимущественно показывается в правой части сайта или вставляется в текст)
  • 300×600 px — блок на половину страницы
  • 320×100 px — мобильный баннер

2. Придерживайтесь последовательности

Каждый баннер должен содержать в себе три элемента: брендинг (логотип), сообщение и поощрение для клика. Загвоздка в том, что у вас не сильно много места для всего этого.

Создайте простую последовательность элементов. Сообщение должно быть кратким — от двух до 10 слов в идеале. Что вы предлагаете и почему люди должны этого хотеть. После этого добавьте логотип или какой-то другой идентификатор. Он должен быть читабельным и не слишком большим. В заключение добавьте причину для клика. Может, у вас сейчас распродажа? Код купона? Подписка на почту?

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

3. Один баннер равняется одному сообщению

image

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

4. Помните о том, где будет размещен баннер

Где вы планируете размещать баннеры после того, как сделаете сам креатив? Если вы используете сервисы подобные Google, у вас будет не сильно много возможностей контролировать размещение. Но если вы хотите разместить их на определенных вебсайтах, в приложениях или email рассылках, вам нужно будет изучить их и принять во внимание их дизайн, прежде чем делать свои баннеры.

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

5. Используйте призыв к действию

image

Какая самая главная задача баннера? Правильно — на него должны кликнуть. Используйте призыв к действию (Call to Action) в каждом баннере, который вы делаете. Подскажите пользователю, что ему нужно делать дальше.

6. Забудьте про Flash

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

Используйте вместо этого HTML5. Если вам нужно сконвертировать какие то свои старые креативы и вдохнуть в них новую жизнь, у Google есть небольшой урок, который поможет это сделать.

7. Используйте кнопки

image

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

Так что — вставляйте кнопки. Не нужно особо изощряться с их оформлением. Простые сообщения типа «купить сейчас» или «узнать больше» могут сделать очень многое для того, чтобы превратить просмотр баннера в клик и последующую конверсию.

8. Сфокусируйтесь на шрифтах

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

Согласно правилу большого пальца, обычно двух начертаний шрифтов бывает достаточно.

  1. Делайте большие заголовки. Используйте жирные, немного необычные или цветные шрифты, чтобы привлечь внимание пользователей.
  2. Отдавайте предпочтение шрифтам без засечек (sans serif). Вы можете использовать два размера или два начертания жирного — один для основного текста, а другой для кнопок или призыва к действию. Просто убедитесь, что они легко читаются.

9. Используйте простую анимацию

image

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

10. Сохраняйте правильно

Это важный момент. Никто не разместит вашу рекламу, если файлы слишком много весят или у баннера будет неправильный формат. Оптимизируйте размер по максимуму. Итоговый размер файлов не должен превышать 150 кб, в зависимости от площади рекламного баннера.

После этого убедитесь, что баннер сделан в правильном формате, стандартном для интернет-рекламы. Распространенные форматы баннеров — PNG и JPG для статических баннеров, GIF — для анимированных. SVG формат тоже набирает оборотов и все чаще принимается разными рекламными сетями. Забудьте об SWF (Adobe Flash) — от него сейчас уже практически все отказались, и даже браузеры перестают его поддерживать. Вместо него широкое распространение получили HTML5 баннеры, которые создаются с помощью таких программ, как Google Web Designer, Adobe Animation или рускоязычный онлайн конструктор баннеров Bannerboo.

11. Сфокусируйтесь на текстах

image

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

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

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

Поэтому, создавая баннеры, думайте о них, как о составляющей вашей маркетинговой стратегии.

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

13. Используйте яркие визуальные элементы

image

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

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

14. Релевантный контент

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

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

15. Будьте попроще

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

В случае с баннерами, всего по одному будет достаточно.

  • Одна картинка
  • Одно текстовое сообщение
  • Один призыв к действию
  • Один элемент бренда

Выводы

Так что, баннеры еще пока не умерли. (И не факт, что это когда-нибудь случится). Баннерная реклама может стать эффективным способом достучаться к вашей целевой аудитории а также повысить узнаваемость вашего бренда.

Автор — Сarrie Сousins. (Перевод — Bannerboo.com)

+1

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
А как считаете Вы?
Напишите в комментариях, что вы думаете – согласны
ли со статьей или есть что добавить?
Добавить комментарий