Анимация в маркетинге и веб-дизайне: кейсы и тренды — 2020
Напомним, почему в 2020 году маркетологам нельзя пройти мимо анимации и на какие анимационные тренды в веб–дизайне и маркетинге стоит обратить внимание.
Анимация в маркетинге — сама по себе тренд. Она подчеркивает индивидуальность компании и больше вовлекает пользователя, в отличие от текста. Еще анимацию легче запомнить, ведь она яркая и ассоциативная. Поэтому так важен союз маркетологов и веб–дизайнеров. По статистике за 2019 год, 85% компаний используют видео как маркетинговый инструмент. Это на 22% больше, чем в 2017 году. Очевидна тенденция, что как снятые, так и анимированные ролики будут только набирать обороты. В статье мы расскажем об этом и о других трендах анимации в маркетинге и веб–дизайне в 2020 году на примере конкретных кейсов.
Тренд №1. Видео: лучшая реклама
Посмотрим статистику видео–контента по опросу Video Marketing Statistics 2020:
- 99% маркетологов в декабре 2019 года сказали, что будут продолжать использовать видео в 2020 году;
- 81% видео–маркетологов сказали, что видео повысило трафик на сайты.
Показатели со стороны пользователей следующие:
- 66% людей предпочитают узнать о товаре или услуге из короткого видео, а не читать текст;
- 96% пользователей посмотрели видео о товаре или услуге.
Тренд на видео, кроме статистики, подтверждают слова Евгения Рючина, арт–директора рекламного агентства MediaNation:
Формат анимированного ролика может быть разный: 2D, более сложная 3D–анимация, сочетание 2D и 3D и комбинации со снятым видео. Вариантов много, главное, чтобы видео решало конкретную задачу.
Важно помнить, что оптимальная длина маркетингового видео — до 2 минут. При такой продолжительности зритель сохраняет концентрацию и вовлеченность.
Презентация продукта B2C
В марте 2020 года бренд Converse запустил 3D–видеорелиз новой модели. За 30 секунд пользователь рассматривает кроссовок со всех сторон и видит фактуры. Производитель при этом успевает расставить акценты на улучшениях, например, показать новую подошву.
Или релиз нового iPhone SE 15 марта. Здесь использован микс из 3D и снятого видео, а также цепляющая музыка, под ритм которой меняются кадры.
Презентация B2B
Например, как в 2D ролике о сервисе видеоценников и видеорекламы Retail Rotor. Преимущества сервиса клиент видит через яркое сравнение: магазин с устаревшими описаниями товаров на ценниках теряет покупателей, которые идут в магазин, где описания товаров и акций высвечиваются на экранах устройств.
Видеоинструкция
72% видеоконтента — это пояснительные видео о продукте или услуге. В видеоинструкции такая логика: проблема — решение (товар или услуга) — как это работает — призыв к действию.
Посмотрим 2D–видеоэксплейнер централизованной программы обмена сообщениями по принципу P2P ThruText. Ролик начинается с иллюстрации проблемы: вы хотите распространить важную информацию большому числу людей, но часто email–рассылка уходит в спам, а бумажные письма попадают в мусорную корзину. Дальше ThruText предлагает решение проблемы, рассказывает о том, как работает их сервис, и о выгоде, которую получит пользователь программы.
Видео о компании: ролик–сторителлинг
По исследованию Video Marketing Statistics 2020, на видео о компании приходится 49% видеоконтента. Такой ролик идеален для главной страницы сайта, для социальных сетей и YouTube.
В апреле 2020 года Campari Group выпустила корпоративный ролик, в котором через сочетание анимированной инфографики и снятого видео сотрудники и клиенты видят историю, географический охват и успехи компании начиная с 1860 года. У сотрудников такой ролик вызовет гордость быть частью команды и повысит мотивацию, а у клиентов возрастет доверие.
Другой пример — корпоративное видео банка «Открытие» конца 2019 года. Простая 2D анимация, где доминирует корпоративный голубой цвет, рассказывает о понятиях «бренд», «стратегия» и «ценности» на параллельных примерах — Саши–баристы и самого банка.
Тренд № 2. Bumper Ads — объявления–заставки
Это 6–секундные рекламные заставки для Youtube, которые нельзя пропустить. Объявления–заставки быстро захватывают внимание зрителя и повышают узнаваемость бренда. Исследование Google показало, что 9 из 10 подобных рекламных кампаний повысили запоминаемость рекламы. Google дает подробный гайд по тому, как ее использовать.
Например, в апреле компания DeLohghi запустила на польском рынке заставку–рекламу чайников и тостеров из серии Icona Capitals.
Тренд №3. Анимированная инфографика
Исследование визуального контент–маркетинга 2019 года показало, что 40% маркетологов рассматривают оригинальную графику, включая инфографику, как наиболее эффективную в достижении цели. Востребованная сама по себе, инфографика становится еще интереснее, если ее анимировать.
Анимированную инфографику используют в новостях, чтобы показать, например, динамику цен на нефть. Или рост популярности бренда в сравнении с другими. Но ее применяют также для наглядной и емкой презентации бренда или услуги на Youtube, на профессиональных выставках или в социальных сетях.
Пример — изометрическая видеоинфографика для компании «ОСГ Рекордз Менеджмент». Ролик показывает, как сотрудники компании сканируют бумажные документы и создают электронный архив. А также преимущество электронного архива: он сокращает время поиска документов и деньги пользователя.
Эту изометрическую видеоинфографику разработала студия анимации Инфомульт. Дмитрий Игнатенко, руководитель студии, рассказывает о ее создании:
Тренд №4. Гифки: еще актуальная классика
Гифки просты в создании, не много весят, быстро захватывают внимание и также быстро доносят до пользователя информацию. Например, рекламируемый товар или самопрезентацию бренда.
Такой формат хорош для email–рассылки, для социальных сетей и баннера в поисковике.
Арт–директор студии дизайна MaryCo Design Lab Вероника Октябрь отмечает, что gif–анимация удерживает позиции:
Gif–анимация бывает продуктовой или тематической. Своими примерами поделилось коммуникационное агентство PR Partner.
Например, в аккаунте комплексных систем безопасности «Луис+» тема страха обыграна всем известным персонажем из «Один дома». Смешной и яркий образ, который моментально воздействует эмоционально.
А соус Tabasco эффектно обыгран в гифе–рецепте с устрицами.
О другом применении гифок в рекламе рассказывает Александра Фрейдлин, ведущий веб–дизайнер компании Datana:
Пример гифа–баннера, который Александра Фрейдлин разработала для брендингового агентства Golden Marrow.
Тренд №5. Микроанимация: интерактивный и удобный интерфейс
Если предыдущие формы анимации имели отношение к контенту, то микроанимация функциональна. Это область UI/UX–дизайна, где главная задача — облегчить навигацию по сайту, сделать ее «живой» и понятной. Принцип микроанимации — дать ответ, когда пользователь совершает действия на странице.
Анимированный логотип в прелоадере
Анимированный логотип уместен при загрузке страницы, чтобы скрасить пользователю момент ожидания и познакомить его с брендом. Кроме традиционного индикатора загрузки с бегунком или процентами, можно использовать логотип и подвижную цветовую шторку, как на сайте архитектурного бюро LOER.
Еще вариант — прелоадер нового сайта Универмага «Цветной». Сайт выиграл в номинации «Лучший сайт интернет–магазина/магазина» конкурса «Золотой сайт» в 2019 году. Здесь логотип множится и заполняет экран, а затем стирается.
Детали интерфейса: анимация появления
Андрей Подольский, руководитель веб–студии Xpert рассказывает об анимации появления на главной странице сайта маркетингового агентства Pikobara:
Детали интерфейса: слайдер
Денис Ломов, креативный директор и сооснователь Red Collar, рассказывает о том, как создавался слайдер для сайта Росбанка. Сайт стал лучшим среди банков и страховых компаний на конкурсе «Золотой сайт» в 2019 году.
Детали интерфейса: прогресс–бар
Снова Денис Ломов делится опытом Red Collar и рассказывает о прогресс–баре в статьях блога Мегафона Update.
Что важно помнить, когда вы используете анимацию: взгляд экспертов
- Будущее за анимированным или снятым видео
- Все хорошо в меру
- Используйте анимацию избирательно
- Не анимация ради анимации, а контент
Red Collar, как всегда крутые! Вдохновляюсь вашим проектами)
Анимация в любом проявлении помогает оживить любой, самый скучный проект.
Интересное решение с прогресс–баром в блоге!
Хорошая статья, если вдруг кому-то нужна подобная анимация, буду рад помочь)))
Портфолио: https://www.behance.net/seven1102cae2
Связь по телефону или телеграмм: 89852921089
Отличный и полезный обзор инструментария! Спасибо, воспользуюсь.
Указанный кейс Конверсов был снят немецким режиссером Robert Wisniewski , там всего несколько кадров с анимацией – с симуляцией ткани. А вот полностью в 3D анимации они делали другие модели кед, например: https://www.behance.net/gallery/110512951/Converse-CX