Набор анимированных баннеров к весенней распродаже московского веломагазина с мастерской: HTML5-версии для рекламной сети Яндекса и сайтов-партнёров, GIF для рассылки. Всё нарисовал и анимировал Евгений Росляков, который делает сайты и рекламные материалы для малого бизнеса с 2016 года. Он самозанятый, подписывает договор, а юрлицам отдаёт закрывающие документы. Заказы берёт и в Москве, и удалённо.
Магазин продаёт велосипеды, одежду и аксессуары, а ещё чинит и обслуживает байки. Весной нужно успеть две вещи: распродать прошлогодние модели и записать людей на сервис. Статичные картинки в рекламе уже не цепляли, а баннеры от разных исполнителей приходили в разных размерах и с разным весом и не складывались в одну кампанию. Сроки поджимали: снег сходит, и людей надо поймать в первые тёплые выходные.
«Флеш баннеры» — так заказчик называл всё, что двигается. Так до сих пор говорят многие рекламодатели и площадки, хотя сам Flash давно не используется. Нужны были лёгкие анимированные баннеры, которые примет любая площадка и которые не выглядят дёшево.
Всё это надо было свести в единый набор под распродажу и сервис, который работает в рекламной сети, на сайтах партнёров и в письмах.
Перед работой собрал список площадок и их правил: размеры, допустимый вес, длительность анимации, число повторов, способ задать ссылку клика. У каждой площадки свои цифры, поэтому держал их перед глазами всё время.
Макеты нарисовал в Adobe Photoshop: общий стиль, крупная цена, один оффер на баннер. Главный герой набора — модель на фоне дороги, отдельная серия посвящена записи на сервис. Слои назвал и разложил так, чтобы под любой размер композицию можно было быстро пересобрать.
Анимацию сделал в Adobe Animate. Раньше в этой программе делали Flash, а сейчас она собирает баннеры в HTML5: на выходе папка с кодом, графикой и скриптом, а не swf-файл. Ролик короткий: появляется товар, потом цена, потом кнопка, пауза и один повтор. Дольше площадки не принимают, да и людей это раздражает. Ссылку клика вшил по правилам каждой площадки.
HTML5 принимают не везде. Там, где его не примут, и в письмах выручает анимация GIF: те же кадры, урезанная палитра, вес в пределах требований. В рассылке первый кадр читается и сам по себе, потому что часть почтовых программ анимацию не проигрывает.
Набор вышел в нескольких размерах: горизонтальные, квадратные, вертикальные. Перед сдачей прогнал файлы через проверки площадок, посмотрел в разных браузерах и на телефоне.
У магазина один набор баннеров для распродажи и для сервиса: общий стиль, лёгкие файлы, для каждой площадки своя версия. Реклама в РСЯ запущена, на партнёрских сайтах баннеры встали без правок, письма показывают нормальный первый кадр.
Раньше каждая площадка присылала список претензий, и макеты уходили на правку по два-три раза. В этот раз файлы прошли проверку с первой попытки: требования я собрал до начала работы, а не после отказа.
Продвижение в интернете для магазина с сезонным спросом держится на скорости. Акция живёт недели, и каждый день ожидания баннеров стоит продаж. Поэтому исходники оставил в порядке: слои в Photoshop названы понятно, проект Animate собран на общих символах для кнопки, цены и логотипа. Следующую акцию можно собрать из тех же файлов, поменяв цену, модель и текст кнопки.
Нужны анимированные баннеры к распродаже, сезону или новому товару? Пришлите мне на freelance.ru список площадок и размеров, и я скажу, что из этого получится.
