Кейвижуалы, баннеры и ресайзы для Автотеки (Авито Авто)

Создать КВ и на их основе HTML5-баннеры заглушками и ресайзами для Автотеки — сервиса проверки авто от Авито. И всё это в короткие сроки

За 4 дня подготовили: 

— 4 концепции креатива

— 4 мастера HTML5-баннера 

— 4 раскадровки HTML5-баннера 

— 4 ресайза HTML5-баннера 

— 8 адаптаций по требованиям ТТ

— 8 ресайзов статичных баннеров

Из исходных материалов у нас было только четыре лайна:


— «Узнайте подробности об авто из-за границы»

— «Узнайте правду об авто из-за границы»

— «Проверьте историю авто из Европы и США»

— «Проверьте зарубежное авто перед покупкой»

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

Стали визуально обыгрывать каждую фразу. Так как авто доставляется из-за границы, возникли и классические ассоциации с контейнерами для перевозки, и необычные, где машина приземляется в пустыню с парашютом. К лайну с упоминанием США и Европы просились флаги, а само слово «заграница» можно было обыграть с помощью изображений, например пустыни. «Узнать правду об авто» — значит, быть в курсе возможных проблемных моментов, а их тоже можно визуализировать значками.

Провели большой референсный рисёрч и опирались на предыдущий опыт работы с Авито. Мы знали, что ребята не используют флэт-иллюстрации, а предпочитают 3D и фотореалистичные изображения, поэтому начали с поиска 3D-машин.

Для проекта мы использовали 3D-модели автомобилей и визуализировали один и тот же объект под разными углами. Вместо стандартных стоковых изображений мы рендерили нужные ракурсы самостоятельно, чтобы добиться точной перспективы под будущую анимацию. 

Иконки, 3D-объекты, фото и другую графику мы можем создавать с нуля или подбирать готовые решения. Всё зависит от запроса, времени и бюджета. В этом проекте время поджимало, поэтому нашли всё необходимое на лицензионных стоках.

На каждый лайн получилось 3-5 вариаций креатива, на основе которых собрали мастер-раскадровки. Всего подготовили 15 решений. Получились упрощённые кейвижуалы: визуал с нуля с учётом пожеланий и исходного лайна, но без высокого разрешения — на данном этапе оно было не нужно.

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

В итоге заказчик выбрал по одному креативу к каждому лайну. Но утвердили их не сразу: в одном не понравились иконки, в другом 3D-элементы — поменяли всё по пожеланиям.

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

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

Баннеры нужны были для внутреннего размещения на сайте Авито. Лигал сводился только к возрастному ограничению 0+, что позволяло свободно распоряжаться пространством баннера.

На каждый креатив готовили по два HTML5-ресайза — 300x600 для десктопа, 320x250 для мобилки. А также по две статики — 980x314 и 600x450.

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

Помимо ясности месседжа ключевое значение имела и скорость. Анимация должна была быть простой, чтобы быстро и делалась, и считывалась.В первом баннере три автомобили въезжают в кадр. Особое внимание здесь уделили анимации колёс: у второго авто видна тормозная колодка, которая не должна двигаться при движении колеса, и мы это учли.

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

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

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

Объёмные фигуры в цветах логотипа Автотеки разместили на переднем и заднем планах. Они двигаются синхронно со свечением вокруг них — это придаёт дополнительный визуальный ритм.

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

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

В четвёртом баннере было мало пространства для анимации — автомобиль уже находился в кадре. Чтобы добавить движения, использовали игру со светом: через overlay добавили светлый градиент и тень, которые вращаются по кругу по направляющей. Из-за этого создаётся эффект спотового освещения и ощущение, будто машина на подиуме. Такая анимация концептуально очень подходит лайну баннера и идее кампании — Автотека может «подсветить» всё об автомобиле.  

А еще такое решение логично продолжает выезд машины и сохраняет движение в баннере даже после завершения основного действия. 

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

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