Анимация персонажа вместо баннеров
Как мы сделали маленький промо-проект с анимированным персонажем вместо того, чтобы просто анонсировать акцию
Задача
Оформить подборку акционных квартир к 14 февраля для сайта «СПБ Реновация». Сделать анонс на главной.
Предыстория
Перед праздниками застройщики устраивают акции, чтобы простимулировать спрос, и заказывают тематическое оформление. Обычная практика — дать скидку на однушки перед Новым годом и найти на сайте место для праздничного баннера. Если вы дизайнер, то знаете, какая это боль: каждый год надевать на логотипы шапку.
В декабре 2016 года наши заказчики из «Реновации» захотели что-то необычное. Они накреативили виртуальный снег с ёлочными игрушками, а мы предложили использовать интерактивную иллюстрацию — плюшевого мишку и коробку с подарками. Когда пользователи наводили на иллюстрацию, она оживала: коробки распаковывались, снег падал с ёлки, мишка моргал и шевелил ушами. Клик по иллюстрации приводил на страницу с праздничными акциями.
Затея сработала и принесла клиенту больше кликов, чем обычно, а мы решили изменить подход к анонсам. Пусть анонс станет игрой, а не простым объявлением. Так появилась идея придумать персонажа и анимировать его по праздникам.
Рассказывает Анастасия Грабовая, дизайнер отдела разработки
14 февраля без купидонов
Следующая подобная задача появилась накануне Дня святого Валентина. Клиент попросил задействовать тематику купидонов, миллионов алых роз, вот этого вот всего. Мы сразу заменили купидонов на котов с минимальной атрибутикой. Существует традиция первой в квартиру запускать кошку. Коты — короли интернета, их мартовские песни идеально вписываются в концепцию праздника.
Идея: Тиндер с квартирами
Изначально планировалась обычная страница с подборкой квартир в виде галереи. Переходом на эту подборку должна была стать анимация. Развивая идею 14 февраля, мы пришли к мысли спиддейтинга. Формат быстрых свиданий позволяет за короткое время узнать о человеке самое важное.
Короче, мы предложили сделать Tinder c квартирами. Посыл был такой: идеальные квартиры выстроились в очередь, чтобы ты выбрал лучшую. Ты влюбился в квартиру, квартира влюбилась в тебя. Как бонус— её цена стала ниже.
Процесс: структура, анимация, задачи
Заставка. На первом экране иллюстрация с котом — главным героем и идеальной квартирой. На экране объясняется, что здесь можно получить праздничную скидку. Кнопка «Поехали» + шеринг в соцсетях.
Анкета. Подбор идеально подходящей квартиры с помощью анкеты. Заполняется от лица кота.
Свидание. Предлагается набор квартир, подходящих по анкете. Сцена: в центре экрана карточка квартиры с минимальными данными (метраж, этаж, наличие балкона и т.п.), остальные плюсы квартиры показаны как прямая речь. Например: «Любишь приглашать друзей в гости? У меня большая гостиная :)» Можно ответить «Да» или «Нет».
Идеальная квартира найдена. Большая планировка, данные о ней, резюмирующий текст. Пользователю предлагается скидка, точный размер в рублях, итоговая стоимость. Поле для телефона и конверсионная кнопка, позволяющая узнать подробности о квартире, как её забронировать и приобрести. Кнопки шеринга.
Позднее мы отказались от анкет и двух кнопок «Да/Нет», чтобы сократить количество шагов и упростить взаимодействие.
Поиск персонажа
Сделали предварительные эскизы, показали клиенту, детализировали. Клиент отклонил вариант с круглыми глазами и попросил остановиться на варианте с очками like a boss.
Детали для задротов
Кот изначально анимировался в Adobe Animate. Это довольно простая для новичков программа, позволяющая делать не просто анимации в гиф, но и экспортировать в HTML Canvas. Гифка много весит, мылится и не масштабируется, а Кэнвас векторный. Так решается проблема с весом и скейлом.
Анимейт похож на Флэш. Анимация объекта делается преимущественно в одном ключевом кадре, не нужны дополнительные расширения для экспорта в Кэнвас. Есть сглаживание анимации Easy Ease (хоть и не такое гладенькое, как в AE). Есть даже приличная Bone Animation, позволяющая настраивать ограничения гибкости скелета персонажа. Плюс Animate — это не бета-проект (как Adobe Character Animator). И не мёртвый, как Edge.
Переход на After Effects
Это был наш первый кот на «Реновации». С течением времени он эволюционировал. Самым большим скачком был переход на AE. В сравнении с AE Анимейт более урезан по функционалу. После АЕ анимация стала более естественной, плюс графон похорошел. К тому времени кот успел пересесть на ракету к 12 апреля.
Главная проблема перехода с AA на AE: АЕ не умеет в Кэнвас. Поэтому стали искать плагин, которым пользуются селебы моушн-дизайна, с наименьшим списком проблемных мест.
В итоге выбрали плагин Bodymovin. Судя по всему, его поддерживает один (!) товарищ, проект полон issues, но в целом, если знать, на что плагин не способен, можно угореть по каждой мелочи. Автор плагина обмазал интерфейс анимациями, чтобы сразу продемонстрировать, что в нём можно делать.
Еще один плагин, который мы использовали — Dojo Ease. Он помогает настроить плавность анимации.
Распределение задач
Так как времени было мало, мы поделили работу на три части — один дизайнер анимирует и готовит иллюстрации для внутренних страниц промки, другой занимается интерфейсной частью внутренних страниц, проектировщик пишет текстики.
Собрали макеты, утвердили с мелкими правками. Верстальщики сверстали верстания и вывалили в продакшн ровно 14 февраля. Вжух.
Результат
К сожалению, у нас нет конкретных цифр, но в первый день заявок было столько, что пришлось отключить оповещения на нашей стороне. Клиент остался доволен и захотел больше таких штук.
С февраля по апрель кот эволюционировал из героя-любовника в солдата, поздравлятора и космонавта.
Со временем мы перешли на AЕ для более гладкой анимации, более приятного графона и тупо изучения новой проги специалистом.
Иногда шумелки и перделки не работают
Важно добавить, что все дополнительные приблуды ценны не сами по себе, а именно как дополнение.
Один из котов не поддерживался скидкой. Просто стоял на сайте красивый. Хоть он и выполнял свои задачи: привлекал внимание к новой подборке квартир, показывал, что сайт постоянно обновляется, — но специальных предложений не было, и клиенты не оставляли заявок. Количество кликов было меньше, а конверсия оставляла желать лучшего. Ситуация нормализовалась, когда клиент решил накинуть небольшую базовую скидку.
Отсюда вывод: все анимационные шумелки и перделки работают, если презентуют хорошее предложение.
