HeadHunter
Авито (внутреннее размещение)
Площадка
Кейвижуалы, баннеры и ресайзы для Автотеки
Авито (внутреннее размещение)
Площадка
Кейвижуалы, баннеры и ресайзы для Автотеки
Задача
Создать КВ и на их основе HTML5-баннеры заглушками и ресайзами для Автотеки — сервиса проверки авто от Авито. И всё это в короткие сроки
8
ресайзов
статичных баннеров
8
адаптаций
по требованиям площадки
4
дня
4
мастера
HTML5-баннеров
4
ресайза
HTML5-баннеров
4
раскадровки
HTML5-баннеров
Анализируем исходники и пожелания
Всё, что у нас было — четыре лайна:
1
Узнайте подробности об авто из-за границы
2
Узнайте правду об авто из-за границы
3
Проверьте историю авто из Европы и США
4
Проверьте зарубежное авто перед покупкой
В остальном ребята из Авито Авто дали нам свободу и сказали, что готовы к ярким вижуалам
В дизайне важно было использовать лого Автотеки и фирменные цвета
Очевидные
Так как авто доставляют из-за границы, на ум сразу приходят контейнеры для перевозки
Необычные
Слово «заграница» можно было обыграть с помощью изображений пустыни
Детали
К упоминаниям США и Европы просились флаги, а проверку можно было визуализировать значками
Прорабатываем ассоциации к лайнам
Мы можем сами делать графику с нуля. Но в этом проекте время поджимало, поэтому воспользовались лицензионными стоками
Подбор изображений
Мы знали, что в Авито не используют
флэт-иллюстрации, а предпочитают 3D и фотореалистичные изображения, поэтому начали с поиска 3D-машин на стоках.
флэт-иллюстрации, а предпочитают 3D и фотореалистичные изображения, поэтому начали с поиска 3D-машин на стоках.
Визуализируем
1
Работа с 3D-моделями
Визуализировали объект под разными углами и рендерили нужные ракурсы самостоятельно, чтобы добиться точной перспективы под будущую анимацию.
2
Варианты креативов
Подготовили 3-5 версий на каждый лайн. Из 15 решений клиент выбрал 4. Получились упрощённые КВ: визуал с нуля, но без высокого разрешения — на данном этапе оно было не нужно.
3
В итоге заказчик отказался от одного из лайнов, но креативов всё равно оставили четыре: один из лайнов использовался в двух КВ
Чем быстрее считывается месседж, тем лучше. Поэтому отказались от креатива с парашютом в пустыне: он хоть и креативный, но менее понятный, чем другие.
Согласовываем креативы
1
Адаптируем креативы
Мы давно работаем с Авито, поэтому отступы, размеры шрифта, логотип, межстрочное расстояние и другие параметры мы учитывали строго.
2
Готовим ресайзы
На каждый креатив готовили по два HTML5-ресайза — 300x600 для десктопа, 320x250 для мобилки. А также по две статики — 980x314 и 600x450.
3
Анимируем логотип
Почти на всех баннерах анимирован логотип Автотеки — четыре дуги появляются по очереди начиная с верхнего синего элемента. Так лого усиливает концепцию сервиса и лучше мэтчится с темой дорожного движения.
Подготавливаем мастеры к анимации
Анимируем баннеры
1
Анимация колёс
Особое внимание здесь уделили анимации колёс: у второго авто виден тормозной диск и суппорт, которые не должны двигаться при движении колеса. И мы это учли.
Левитация иконок
На фоне машин появляются иконки со знаками качества — визуализация лайна и в целом концепции автотеки. Значки левитируют даже тогда, когда другая анимация заканчивается. Это придает баннеру живости и цепляет визуально.
Анимируем баннеры
1
Анимация колёс
Особое внимание здесь уделили анимации колёс: у второго авто виден тормозной диск и суппорт, которые не должны двигаться при движении колеса. И мы это учли.
Левитация иконок
На фоне машин появляются иконки со знаками качества — визуализация лайна и в целом концепции автотеки. Значки левитируют даже тогда, когда другая анимация заканчивается. Это придает баннеру живости и цепляет визуально.
2
Объёмные фигуры в цветах логотипа Автотеки
Разместили на переднем и заднем планах. Они двигаются синхронно со свечением вокруг них — это придаёт дополнительный визуальный ритм.
Движение авто по направляющим
Обозначили якорную точку и по ней задали траекторию, чтобы движение машины с остальными элементами сцены.
Анимация фар
Благодаря приёму overexposure источники света постепенно наращивают яркость до пересвета и создают эффект глубины. Для этого использовали не один сплошной слой, а комбинацию из нескольких.
2
Движение авто по направляющим
Обозначили якорную точку и по ней задали траекторию, чтобы движение машины с остальными элементами сцены.
Объёмные фигуры в цветах логотипа Автотеки
Особое внимание здесь уделили анимации колёс: у второго авто виден тормозной диск и суппорт, которые не должны двигаться при движении колеса. И мы это учли.
Анимация фар
Благодаря приёму overexposure источники света постепенно наращивают яркость до пересвета и создают эффект глубины. Для этого использовали не один сплошной слой, а омбинацию из нескольких.
3
Появление авто из контейнера
Машина видна не сразу — она выезжает из темноты. Анимацию усиливает плотная тень, которая частично скрывает объект в начале и делает выезд более выразительным. Движение начинается резко, затем постепенно замедляется.
Такого эффекта добились с помощью ручного изинга.
3
Появление авто из контейнера
Машина видна не сразу — она выезжает из темноты. Анимацию усиливает плотная тень, которая частично скрывает объект в начале и делает выезд более выразительным. Движение начинается резко, затем постепенно замедляется.
Такого эффекта добились с помощью ручного изинга.
4
Игра со светом
Тут было мало пространства для анимации — автомобиль уже находился в кадре. Чтобы добавить движения, через overlay добавили светлый градиент и тень, которые вращаются по кругу по направляющей. Из-за этого создаётся эффект спотового освещения и ощущение, будто машина на подиуме.
Такая анимация концептуально очень подходит лайну баннера и идее кампании — Автотека может «подсветить» всё об автомобиле.
4
Игра со светом
Тут было мало пространства для анимации — автомобиль уже находился в кадре. Чтобы добавить движения, через overlay добавили светлый градиент и тень, которые вращаются по кругу по направляющей. Из-за этого создаётся эффект спотового освещения и ощущение, будто машина на подиуме.
Такая анимация концептуально очень подходит лайну баннера и идее кампании — Автотека может «подсветить» всё об автомобиле.
Результат
Подготовили 4 пака баннеров, в каждом из которых
было по 2 HTML5-баннера (один для десктопа, другой для мобильной версии) и 2 статичных баннера.
Результат
Подготовили 4 пака баннеров, в каждом из которых
было по 2 HTML5-баннера (один для десктопа, другой для мобильной версии) и 2 статичных баннера.
Интересно, что...
Проект начался с четырёх лайнов без какой-либо визуальной концепции. Этот кейс — пример того, как из текста рождается визуальное решение.
А мы были только рады
Формат, когда креатив создаётся с нуля, нам особенно интересен
Ребята из Авито Авто остались довольны
И спустя время вернулись с похожей задачей
Уложились в поставленные сроки
Сдались за неделю со всеми правками и дополнениями
Для нас этот кейс интересен тем, что в рамках стандартных форматов баннеров (300×600 и 320×250 HTML5) мы нашли нестандартное визуальное решение
Использование 3D-иллюстраций, нетипичных для коммуникации Автотеки в тот момент, позволило создать современный и лёгкий визуальный язык, сохраняющий связку с брендом Авито и в целом, выделяющийся внутри площадки «Авито на Авито»
Старший менеджер маркетинговых коммуникаций в Авито Авто
Кристина Хлыбова-Костекчи
спасибо!
Отзыв от авито
