Коротко о разработке баннеров / Хабр
Ниже мы будем говорить только об интернет-баннерах.Разработка баннера включает в себя 4 этапа:
- Идея
- Раскадровка
- Анимация и программирование
- Подготовка баннера к размещению на рекламной площадке
Идея
Это самая сложная часть. Думаю, что около 5% специалистов могут придумывать качественные идеи. Хорошо, если этим занимаемся копирайтер, понимающий все возможности и тонкости производства.Многим сложно перестроиться от статичных идей для полиграфии к идеям в интерактивной среде. Стоит заметить, что для полиграфии тоже можно разработать и реализовать идею, подразумевающую взаимодействие с пользователем, интерактивную идею.
Какая рекламная идея считается хорошей?
- Продающая. Не может быть никаких компромиссов. Не важно, стоит ли задача продать товар или услугу за неделю или бренд выстраивает стратерию на 50 лет вперед.
Конечная цель всегда — продажи. - Эмоциональная. В баннере может не быть глубокого смысла, но может быть показан бренд в очень подходящей сильной эмоциональной атмосфере. Это хорошо способствует узнаваемости бренда, развитию связи нужной эмоции с брендом.
- Информационная. В некоторых случаях достаточно ясно донести информацию без избытка «креатива».
Конечная цель всегда — продажи.Если этот блок со страшными ссылками вызовет неконтролируемые приступы у уважаемых хабрапользователей, то я его удалю.
- Продающая эмоциональная информационная идея,
- Продающая имиджевая,
- Имиджевые эмоциональные (эмоция за счет нестандартности) баннеры,
- Эмоция в чистом виде,
- Имиджевый эмоциональный баннер
Раскадровка
Раскадровка представляет собой картинку, содержащую ключевые кадры анимации.
Она необходима для презентации идеи. Клиенты должны четко понимать, за что платят деньги. Разработка баннера без рисования и утверждения раскадровки — это стрельба по мишени с закрытыми глазами. Такой подход возможен при заказе баннеров на килограммы, когда внешний вид баннера не имеет значения.
При разработке раскадровки вертикального баннера (например, 240х400), кадры нужно выстраивать в строку. Если их больше 4-х, то допускается перенос кадров во второй и последующие строки. Нельзя показывать раскадровку из 6-ти кадров в 2 столбца и 3 строки, т. к. сложно будет понять последовательность кадров.
Раскадровки горизонтальных баннеров (например, 728х90) нужно делать в столбик при любом количестве кадров.
В случае с нестандартными баннерами (флайскрины, скринглайды и пр.) раскадровку нужно показывать на фоне сайта, где он будет размещен. Каждый ключевой кадр будет содержать подложку-скриншот сайта.
Дизайнер, рисующий раскадровку баннера должен обладать знаниями о композиции, работе с цветом, типографике.
Последнее является больным местом 99% баннерной рекламы в России. Дизайнер, приступая к разработке раскадровки, изначально должен учитывать ограничения по весу баннера — размеру в КБ. Можно нарисовать красивую раскадровку с большим объемом качественной графики. Но она не пройдет по весу, графика ужмется до безобразия, и в результате мы получим тихий ужас вместо хорошего баннера. В этом случае дизайнер не может утверждать, что он нарисовал хорошую раскадровку, а во всем виновата площадка с ее жесткими требованиями. Работа дизайнера по разработке раскадровки — это решение задачи воплощения идеи в заранее известных рамках по весу баннера, с учетом требований к оформлению.
Имея на руках медиаплан с техническими требованиями площадок, необходимо заранее выбирать способ реализации раскадровки. Если сценарий баннера достаточно длинный, а ограничение по весу равно 25 КБ, возможно, есть смысл использовать только векторную графику, отказавшись от растра.
Если медиаплан содержит много разных размеров баннеров, то можно нарисовать одну раскадровку для вертикальных форматов, одну для горизонтальных.
Анимация и программирование
Эту работу должен выполнять моушн-дизайнер со знанием экшн скрипта. Если требуется глубокое программирование, то в разработке, наряду с флеш-дизайнером, должен участвовать флеш-программист. Ни в коем случае нельзя считать анимацию баннера технической работой и доверять ее флеш-технологам (программистам). Анимация баннера — это творческая работа.Пример. Представим, что по сценарию баннера точка должна по прямой траектории переместиться из пункта «А» в пункт «Б». Толковый моушн-дизайнер, в отличие от технического специалиста (программиста, технолога) понимает, что сделать это можно бесконечным количеством способов. И выбор способа реализация движения точки зависит от контекста.
5 типов анимаций в качестве примера.
Качество анимации
Теперь мы знаем, что прямолинейное движение точки из пункта «А» в пункт «Б» может быть выполнено множеством способов. Важно всегда выбирать именно тот способ анимации, который соответствует контексту, т.
е. делать качественную анимацию. Что это значит?Под качественной анимацией понимается анимация, приятная глазу в случае с объектами, не имеющими аналогов в реальном мире. Возможна стилизация анимации: стоп-моушн и другие эффекты в необходимом контексте.
Если мы анимируем реалистичную графику из реального мира (авто, чайник, дерево) и нам не нужна стилизация, то анимация должна повторять их движения так, как это происходит на самом деле, в реальном мире. Мы знаем, как трогаются автомобили, как они останавливаются, потому что видим это каждый день. Знаем, как колышется листва деревьев при небольшом ветре, как листья отрываются и летят при сильном ветре и т. д. Задача хорошего моушн-дизайнера — избавить пользователя от просмотра анимации. Пользователь должен видеть суть, не обращая внимание на технику реализации: едет автомобиль, падает рояль, взлетает самолет и т. д. В жизни практически невозможно встретить абсолютно равномерное движение, всегда присутствует ускорение или замедление какой-то степени.
Вышеописанное справедливо для реалистичной графики и не относится к мультипликации. Для последней более свойственна стилизация анимации, она добавляет ярких эмоций ролику.
В некоторых случаях удобно пользоваться специальными скриптами:
- MC Tween: hosted.zeh.com.br/mctween/documentation.html
- GreenSock: www.greensock.com/v11
Подготовка баннера к размещению на рекламной площадке
Первый баннер, который получается в результате вышеописанных этапов (идея, раскадровка, анимация и программирование) принято называть уникальным баннером. Последующие адаптации этого баннера согласно размерам и техническим требованиям площадок называют ресайзами.Уникальный баннер — это самый красивый баннер с наименее жесткими ограничениями по весу. Если медиаплан содержит следующие пункты:
200×300, yandex.
ru, 25 КБ
240×400, mail.ru, 35 КБ
240×400, sports.ru, 40 КБ
Недобросовестные разработчики применяют другую систему: делают простейший баннер по самым жестким ограничениям веса (в нашем случае это yandex.ru, до 25 КБ), избавляя себя тем самым от сложной работы по оптимизации последующих ресайзов и клиента от качественных баннеров. В то время, как баннер до 40 КБ мог выглядеть эффектно, у них он получится таким же «упрощенным», как и версия до 25 КБ. Такой подход, конечно, неприемлем.
P. S. Если статья вызовет интерес, то в следующей мы будем говорить о золотом правиле баннерной рекламы и некоторых очевидных вещах, которыми, к сожалению, пренебрегают многие разработчики и площадки.
Баннерная слепота в интернете: исследование, статистика, примеры
Проблема баннерной или рекламной слепоты приобрела актуальность около 5 лет назад, когда массовоеразмещение интернет рекламы, превратило информационные и развлекательные сайты в доски объявлений.
Любой сайт с большим количеством рекламы приводит к тому, что пользователи перестают обращать на ренкламу внимание и начинают защищать свои браузеры и устанавливать блокиратор рекламы.
Рекламодателям все труднее выделить свой рекламный баннер для сайта и привлечь внимание целевого пользователя. Ранее мы рассказывали, как сделать баннер для рекламы заметным и эффективным, а в этот раз делимся полезными рецептами борьбы с рекламной слепотой.
Светлый фон, сочные цвета изображения товара, крупный шрифт размера скидки и краткий слоган – призыв к действию: «Успейте купить», «Заказывайте прямо сейчас», «Только 3 дня». Это классический дизайн рекламного баннера, благополучно почившего в современном интернете. Такая схема больше не работает, она попросту приелась юзерам. Чтобы визуально выделить свою рекламу и вызвать у посетителей страницы желание ее прочитать – требуется новый подход: использование нестандартных решений в дизайне и красивое оформление баннера.
1. Ловите хайп – креативно, а не банально
Говоря простым языком «хайпить» – вызывать ажиотаж, использовать в рекламном сообщении тему, которую точно будут обсуждать в соцсетях и таблоидах.
Важно соблюдать грань между скандальной рекламой и провокационной, вызывающей острое внимание пользователей. Например, тематика свадьбы года Меган Маркл и принца Гарри помогла брендам заработать миллионы долларов на использовании образов, изображений и текстовых упоминаний пары. Самое обсуждаемое событие весны 2018 года было успешно использовано как заработок на баннерах.
Еще один вариант привлечения внимания: использование актуальных интернет-мемов в рекламе. Здесь главное – отслеживать актуальность. Так как популярные интернет-герои быстро сменяются новыми: на смену молодежному «упоротому лису» пришли котики. Трендовыми персонажами среди родителей дошкольников являются Смешарики, свинка Пеппа и герои м/ф «Простоквашино» (сиквел популярного советского мультсериала). Для политизированного сегмента аудитории актуальны мемы с Трампом и другими политиками, ведущими теленовостей и политических ток-шоу.
Изучение одного из показателей эффективности баннерной рекламы (коэффициента кликабельности CTR) с разными сюжетами отражает взаимосвязь переходов и содержимого.
Когда флеш баннеры для сайта продажи авиабилетов с изображениями традиционных пальм, океана, отелей и стюардесс давали результат от 0,5 до 1,2 CTR, swf баннер с котом, летающим в небе, стартовал с 2% при расширенных настройках показов рекламы, исключающих нецелевых пользователей. Детально настраивать демонстрацию объявлений удобно в интерфейсе рекламной платформы AdButton, где, кроме выбора рекламных площадок, можно точечно настраивать рекламные кампании.
Смелые макеты, обыгрывающие актуальные события, популярные интернет-шутки или оригинальные идеи соберут гораздо больше кликов. Выбор тематик позволяет рекламировать любые продукты и услуги.
2. Контрастируйте
Контрастный баннер (в соотношении с фоном страницы) способен привлечь значительно больше внимания. Не размещайте на нем типовые надписи: «скидка», «распродажа», «sale». Эти выражения на уровне периферического зрения фильтруются у большинства пользователей. В ходе эксперимента, когда флеш баннер с котиком надоел аудитории, его заменили на лаконичный черно-белый.
Он хорошо выделялся среди ярких рекламных картинок конкурентов, что увеличило конверсию на 75%.
Не забывайте, контраст – это не только черно-белое сочетание, но и красно-синее, оранжево-зеленое и другие оттенки, расположенные на цветовом круге напротив друг друга.
Ознакомьтесь с цветовым оформлением рекламных площадок, на которых планируете размещаться, перед тем как планируете создать дизайн баннера. Продумайте, как сделать его заметным на конкретной странице. Если преобладают цветные баннеры с людьми – делайте сдержанный двухцветный в спокойных тонах. Когда на большинстве объявлений графика – используйте фотографии. Отличайтесь от конкурентов на странице, тогда объявление обойдет «слепоту».
3. Играйте с воображением посетителя, используйте обман зрения
Третьим способом является разрушение общепринятых шаблонов в головах пользователей. Каждый интернет юзер имеет представление о конкретном виде объектов (трава зеленая, океан голубой, облака белые, мак красный и т.
д.), поэтому пользователь легко распознает цвет оформления баннера, а также предметы и объекты рекламы. Привлечь его внимание пользователя можно необычным эффектом, заменой привычного цвета. Этот процесс используется блогерами и приложениями с фильтрами для фото:
- замена желтого цвета на белый или розовый;
- замена белого на солнечный карамельный;
- сочный травяной сменяется пепельным или голубым.
Так фотографии приобретают магнетизм для пользователей, бегло просматривающих ленту.
Маркетологи использовали эффект замены цвета в рекламе службы доставки еды. Первое время традиционные объявления с роллами и сочными бургерами приносили клики, но через пару месяцев конверсия была 0,5%. А для ее наращивания придумали необычный ход – заменили на изображениях основные цвета: мясо окрасили в малиновый, а булку – в свекольный. Периферическое зрение пользователя распознавало привычный продукт, но мозг не понимал, что не так с картинкой и зрение фокусировалось на баннере.
В попытках разобраться, что это за блюдо – посетители переходили по ссылке и CTR вырос вдвое.
4. Ожившие картинки работают уже 100 лет
В видео комбинируется картинка, звук, история и движение, такое сочетание заставляет зрителя реагировать на рекламу на сайте. Видео баннер позволяет за 5-10 сек раскрыть торговое предложение и продемонстрировать преимущества нагляднее, чем статичные картинки для баннеров. При наличии ресурсов сфокусируйтесь на видеоконтенте для рекламы. Кстати, часто видео обходится дешевле, чем публикация статичной картинки (пример в Facebook).
Обратите внимание, в видео на сайтах стоит использовать аналогичные методы фокусировки внимания пользователя. Баннерный ролик должен выделяться, быть креативным, если требуется – провокационным. В любом случае, должен цеплять с 1 кадра.
Будьте оригинальны и ловите хайп, успешных кампаний!
Мы используем файлы cookie. 🍪 Продолжая использовать наш сайт, вы соглашаетесь с нашей Политикой конфиденциальности
3 альтернативы Flash-баннерам
Логотипы, веб-сайты и многое другое…
Логотипы, веб-сайты, обложки книг и многое другое…
Получить дизайн
Многие предприятия полагаются на рекламные баннеры Flash, потому что они привлекают внимание, но скоро они исчезнут! В этой статье мы покажем вам, почему эти интерактивные объявления уходят в прошлое, и дадим вам несколько альтернативных способов создания крутых рекламных объявлений в Интернете.
Вывод: вы по-прежнему можете создавать эффектные, красивые рекламные баннеры — даже анимированные — и все это без Flash.
Flash: анимированные, интерактивные, устаревшие
—
Flash-объявления — это интерактивные веб-баннеры, созданные с помощью Adobe Flash, которые могут содержать сложную анимацию, видеоролики и звук. Эта технология стала чрезвычайно популярной в Интернете из-за того, как она может реагировать на пользователей. Например, вся реклама может превратиться в полноценное мультимедийное представление — и все это простым наведением мыши.
Скриншоты интерактивной Flash-рекламы от Lipton В последнее время ее популярность резко изменилась. Ранее в этом году — 2 января 2017 года — Google Adwords прекратил показ медийных объявлений в формате Flash на своей платформе для размещения рекламы, и браузеры уже начали их поэтапный отказ. Firefox заставляет пользователей соглашаться каждый раз, когда появляется реклама, в то время как пользователям Safari приходится постоянно загружать и обновлять плагины.
По состоянию на декабрь 2016 года Google Chrome сделал HTML5 своим мультимедийным интерфейсом по умолчанию.
С технологической точки зрения Flash-объявления просто устарели. В отличие от более новой технологии HTML5, Flash не будет работать на всех устройствах, что является серьезной проблемой, поскольку количество мобильных пользователей на разных устройствах продолжает расти. Между тем, Flash также является источником шести из десяти наиболее часто используемых хакерами ошибок.
Вот пример разницы между сайтом, который не оптимизирован для мобильных устройств, и сайтом с адаптивным дизайном от Google.Для дизайнеров создание Flash-контента может быть проблемой. Когда почти все новые ресурсы нужно оптимизировать для мобильных устройств, Flash был создан в первую очередь для настольных компьютеров. Настольный компьютер на мобильном устройстве предлагает плохой пользовательский интерфейс, и уже одно это заставляет сайт чувствовать себя устаревшим.
Конечно, у Flash-объявлений есть несколько преимуществ.
Они бросаются в глаза. Они веселые. Они интерактивны (а интерактивная реклама — одна из самых эффективных). Значит ли это, что вся крутая, креативная анимированная реклама исчезла? Точно нет.
Альтернативы Flash-рекламе
—
Flash-реклама устарела, но у вас все еще есть отличные варианты. На самом деле, существует несколько альтернатив, потому что нет ни одной технологии, которая «заменяет» Flash. Вот лучшие альтернативы, а также уникальные преимущества и недостатки каждой из них.
Статические рекламные баннеры
Вы их знаете и любите. Базовые статические рекламные баннеры представляют собой простые интерактивные веб-изображения (обычно JPG или PNG) без какой-либо анимации. Они существуют с момента зарождения Интернета и до сих пор невероятно эффективны.
Дизайн от Kuz.Design для CampCrateDesign от Y Designs для TravelworldПлюсы статической рекламы
Статические баннеры легко сделать, и они быстро загружаются. Они могут хорошо передавать простые призывы к действию и особенно эффективны для аудитории, которая вас уже знает.
Дайте им напоминание или стимул о вашем бизнесе и продукте, и люди щелкнут.
Минусы статической рекламы
Из-за ограниченного места статические баннеры не подходят для передачи сложных сообщений. Они не интерактивны и не анимированы и могут быть менее привлекательными.
Анимированные GIF-баннеры
Вы, наверное, видели множество GIF-файлов в виде четырехсекундных мемов о Райане Гослинге, который был потрясающим бойфрендом, но они могут делать гораздо больше. GIF-файлы (или изображения «Graphics Interchange Format») — это широко поддерживаемые сжатые изображения для Интернета. Эти типы рекламных баннеров анимированы и могут даже содержать короткие немые видеоклипы. Как правило, GIF-файлы воспроизводятся сами по себе и не требуют участия пользователей.
via Neiman Marcusvia Bonobosvia AnthropologieПлюсы анимированных GIF-файлов
GIF-файлы обеспечивают впечатление, похожее на видео, которое очень увлекательно. Их довольно легко создать (даже если у вас нет особых технических навыков) благодаря настольным и мобильным приложениям, которые вы можете использовать для создания самостоятельно.
Минусы анимированных GIF-файлов
Хотя их можно найти практически везде в Интернете, иногда GIF-файлы не всегда анимируются на всех устройствах или во всех приложениях. Кроме того, это могут быть большие файлы, загрузка которых может занять несколько секунд. По сравнению со статическими баннерами, GIF-файлы также ограничены в своей цветовой палитре и могут не отображать такие яркие изображения.
Баннеры HTML5
Куклы! Вот отличный пример рекламного баннера HTML5.Баннерная реклама HTML5 создается с использованием обычного повседневного веб-кода и может содержать изображения, текст, аудио и видео. Поскольку они создаются с помощью кода (а не являются самодостаточными файлами, как Flash), их можно динамически и быстро оптимизировать, чтобы их можно было просматривать на любом устройстве.
Преимущества рекламы в формате HTML5
Файлы баннеров HTML5 намного больше, чем файлы Flash, но поскольку они созданы с помощью кода, понятного браузеру, HTML5 обычно загружается намного быстрее, чем GIF.
Самое главное, объявления HTML5 выглядят идеально независимо от того, какое устройство вы используете.
Недостатки рекламы HTML5
Создание HTML5 может быть сложной задачей, поскольку для этого требуются практические знания HTML, CSS и, как правило, JavaScript. По сравнению с другими веб-технологиями, HTML5 не так уж сложен, но если вы заняты ведением бизнеса и не хотите связываться с разработчиками, возможно, это не лучший выбор.
Сделайте Интернет ярким (без Flash)
—
Flash-баннеры, возможно, исчезнут, но все еще есть множество способов создать забавную, креативную и привлекательную рекламу для вашего бизнеса или бренда. Благодаря статическим баннерам, анимированным GIF-файлам и объявлениям в формате HTML5 в вашем распоряжении множество инструментов, которые могут работать на большем количестве устройств и быть даже более эффективными, чем традиционная реклама в формате Flash.
Нужен индивидуальный баннер? Мы делаем это!
Пример 3D-баннера HTML5, который полностью заменяет Flash
Недавно креативный директор одного из клиентов нашего агентства был в восторге от множества заказанных им мультимедийных объявлений.
Однако он выразил обеспокоенность тем, что HTML5 может не справиться с пропускной способностью, которая сделает его запланированный баннер популярным.
Как пример баннера HTML5, это было амбициозно. Прежде чем мы начнем подробно рассказывать о том, как мы создали адаптивную рекламу, вы можете ознакомиться с полным опытом по этой ссылке. Поэтому, прежде чем мы приступим к разработке, мы проверили спецификацию баннера и отметили, что первоначальная загрузка рекламного сервера должна составлять 200 КБ. Итак, мы приступили к созданию примера супер баннера HTML5.
Дизайн включал в себя несколько юмористических элементов в качестве «особенностей» в нашей машине, таких как ракетные установки или колоссальные бензопилы, которые должны были обеспечить безопасность в городе. Обычно такая анимация занимает мегабайты трафика. Сосредоточив внимание на требовании клиента к начальной загрузке 200 КБ и преодолении размера файла, видео загружались по запросу, как только пользователь выбирал экраны.
Этот процесс также улучшит пользовательский опыт.
Игровой опыт #1
Игровой опыт #2
Итак, как мы это сделали?
Мы начали с создания 3D-рендера фигуры автомобиля с помощью V-Ray. Некоторые кадры нуждаются в ретушировании либо из-за потери цвета, либо из-за других дефектов, поэтому мы сделали это с помощью Photoshop. Галерея 360 была построена с использованием Jquery. Мы достигли 360-градусного аспекта, экспортируя изображение автомобиля кадр за кадром, а затем объединяя их вместе с помощью Animate Sprite.
Следующим шагом было создание четырех анимаций: ракет, дракона, дефлекторного щита и бензопилы. Объединив реальные видеоматериалы с помощью плагина пост-эффекта, такого как Trapcode Particular, мы смогли разработать привлекательную и чрезвычайно детализированную графику для каждого видео, сохранив при этом небольшой размер файла. Это была самая сложная часть всего проекта.
Каждый задействованный элемент кричал «пожиратель ресурсов», но мы упорно оптимизировали все, начиная с галереи 360.
Мы обрезали изображения и убрали лишние пиксели с помощью Photoshop. Мы тщательно создавали покадровую анимацию и играли с разрешением каждого кадра. Наконец, мы даже настроили частоту кадров по мере продвижения.
Некоторый технический аспект:
— Часть была создана на JS + HTML5
— Галерея 360 была создана с помощью: jquery Animate Sprite
— Видео были оптимизированы для хорошего баланса между весом и качеством.
Игровой опыт #3
Игровой опыт #4
Используя нас в качестве партнера по производству HTML5, креативное агентство получило то, что оно просило, и мы успокоили опасения креативного директора, доказав эффективность и жизнеспособность HTML5.
Новое окружение не помешало нашему творчеству. Наоборот, оно взращивало его, потому что нам приходилось придумывать решения для особенно сложного набора препятствий.
