Кейсы
Demis Group
29.11.2025
ADPASS рекомендует материал к прочтению
TOLKUNOV
Кейвижуалы, баннеры и ресайзы для Автотеки (Авито Авто)
Создали КВ и на их основе HTML5-баннеры заглушками и ресайзами для Автотеки — сервиса проверки авто от Авито. И всё это в короткие сроки
1. Проанализировали исходные материалы и пожелания
Из исходных материалов у нас было только четыре лайна:
— «Узнайте подробности об авто из-за границы»
— «Узнайте правду об авто из-за границы»
— «Проверьте историю авто из Европы и США»
— «Проверьте зарубежное авто перед покупкой»
В дизайне важно было использовать лого Автотеки и фирменные цвета. В остальном ребята из Авито Авто дали нам свободу и сказали, что готовы к ярким вижуалам.
2. Проработали лайны
Стали визуально обыгрывать каждую фразу. Так как авто доставляется из-за границы, возникли и классические ассоциации с контейнерами для перевозки, и необычные, где машина приземляется в пустыню с парашютом. К лайну с упоминанием США и Европы просились флаги, а само слово «заграница» можно было обыграть с помощью изображений, например пустыни. «Узнать правду об авто» — значит, быть в курсе возможных проблемных моментов, а их тоже можно визуализировать значками.
3. Подобрали стоковые изображения и визуализации
Провели большой референсный рисёрч и опирались на предыдущий опыт работы с Авито. Мы знали, что ребята не используют флэт-иллюстрации, а предпочитают 3D и фотореалистичные изображения, поэтому начали с поиска 3D-машин.
Для проекта мы использовали 3D-модели автомобилей и визуализировали один и тот же объект под разными углами. Вместо стандартных стоковых изображений мы рендерили нужные ракурсы самостоятельно, чтобы добиться точной перспективы под будущую анимацию.
Иконки, 3D-объекты, фото и другую графику мы можем создавать с нуля или подбирать готовые решения. Всё зависит от запроса, времени и бюджета. В этом проекте время поджимало, поэтому нашли всё необходимое на лицензионных стоках.
На каждый лайн получилось 3-5 вариаций креатива, на основе которых собрали мастер-раскадровки. Всего подготовили 15 решений. Получились упрощённые кейвижуалы: визуал с нуля с учётом пожеланий и исходного лайна, но без высокого разрешения — на данном этапе оно было не нужно.
4. Согласовали креативы
Визуал оценивался по принципу понятности: чем быстрее считывается месседж, тем лучше. Именно поэтому в итоге отказались от креатива с парашютом в пустыне. Несмотря на то, что он яркий и креативный, считывался он сложнее, чем другие.
В итоге заказчик выбрал по одному креативу к каждому лайну. Но утвердили их не сразу: в одном не понравились иконки, в другом 3D-элементы — поменяли всё по пожеланиям.
В итоге заказчик отказался от одного из лайнов, но креативов всё равно оставили четыре: один из лайнов использовался в двух КВ.
5. Подготовили адаптивы
После утверждения концептов, адаптируем креативы в соответствии с гайдлайнами. Мы давно работаем с Авито, поэтому знакомы с их требованиями и соблюдаем их по умолчанию. И хотя нам позволили покреативить, отступы, размеры шрифта, логотип, межстрочное расстояние и другие параметры мы учитывали строго.
Баннеры нужны были для внутреннего размещения на сайте Авито. Лигал сводился только к возрастному ограничению 0+, что позволяло свободно распоряжаться пространством баннера.
На каждый креатив готовили по два HTML5-ресайза — 300×600 для десктопа, 320×250 для мобилки. А также по две статики — 980×314 и 600×450.
6. Анимировали баннеры
Почти на всех баннерах анимирован логотип Автотеки — четыре дуги появляются по очереди начиная с верхнего синего элемента. Так лого усиливает концепцию сервиса и лучше мэтчится с темой дорожного движения.
Помимо ясности месседжа ключевое значение имела и скорость. Анимация должна была быть простой, чтобы быстро и делалась, и считывалась.
В первом баннере три автомобили въезжают в кадр. Особое внимание здесь уделили анимации колёс: у второго авто видна тормозная колодка, которая не должна двигаться при движении колеса, и мы это учли.
На фоне машин появляются иконки со знаками качества — визуализация лайна и в целом концепции Автотеки. Значки левитируют даже тогда, когда другая анимация заканчивается. Это придает баннеру живости и цепляет визуально.
Во втором баннере автомобиль выезжает по направляющим: обозначили якорную точку и по ней задали траекторию. Из-за такого ракурса машины пришлось поменять ей колесо. Дело в том, что для качественной анимации нужен объект в прямом ракурсе. Поэтому мы нашли подходящий диск из библиотеки, анимировали его без искажений, а затем перевели в нужную перспективу. Вручную добавили лёгкие тени, которые сглаживают яркостные перепады, особенно по краям.
Анимацию фар усилили приёмом overexposure — источники света постепенно наращивают яркость до пересвета и создают эффект глубины. Для этого использовали не один сплошной слой, а комбинацию из нескольких.
Объёмные фигуры в цветах логотипа Автотеки разместили на переднем и заднем планах. Они двигаются синхронно со свечением вокруг них — это придаёт дополнительный визуальный ритм.
Третий баннер начинается с изображения контейнера, из которого выезжает автомобиль. Машина не появляется сразу — она выезжает из темноты. Анимацию усиливает плотная тень, которая частично скрывает объект на начальном этапе и делает выезд более выразительным.
Движение начинается резко, затем постепенно замедляется. Такого эффекта добились с помощью ручного изинга.
В четвёртом баннере было мало пространства для анимации — автомобиль уже находился в кадре. Чтобы добавить движения, использовали игру со светом: через overlay добавили светлый градиент и тень, которые вращаются по кругу по направляющей. Из-за этого создаётся эффект спотового освещения и ощущение, будто машина на подиуме. Такая анимация концептуально очень подходит лайну баннера и идее кампании — Автотека может «подсветить» всё об автомобиле.
А еще такое решение логично продолжает выезд машины и сохраняет движение в баннере даже после завершения основного действия.
Результат
В итоге подготовили 4 пака баннеров, в каждом из которых было по 2 HTML5-баннера — один для десктопа, другой для мобильной версии — и 2 статичных баннера.
300×600
320×250
Уложились в поставленные сроки, сдались за неделю со всеми правками и дополнениями. Ребята из Авито Авто остались довольны и спустя время вернулись с похожей задачей. А мы были только рады — формат, когда креатив создаётся с нуля, нам особенно интересен.
Интересно, что проект начался с четырёх лайнов без какой-либо визуальной концепции. Этот кейс — пример того, как из текста рождается визуальное решение.
Неделя рекламы 
Новости 
How to 
Интервью и дискуссии 
Маркетинговые исследования 
Просто о сложном 
Энциклопедия обмана 
Проверено ADPASS 
Рекламные кампании