Анимация в маркетинге и веб-дизайне: кейсы и тренды — 2020
Напомним, почему в 2020 году маркетологам нельзя пройти мимо анимации и на какие анимационные тренды в веб–дизайне и маркетинге стоит обратить внимание.
Анимация в маркетинге — сама по себе тренд. Она подчеркивает индивидуальность компании и больше вовлекает пользователя, в отличие от текста. Еще анимацию легче запомнить, ведь она яркая и ассоциативная. Поэтому так важен союз маркетологов и веб–дизайнеров. По статистике за 2019 год, 85% компаний используют видео как маркетинговый инструмент. Это на 22% больше, чем в 2017 году. Очевидна тенденция, что как снятые, так и анимированные ролики будут только набирать обороты. В статье мы расскажем об этом и о других трендах анимации в маркетинге и веб–дизайне в 2020 году на примере конкретных кейсов.
Любое движение в визуале триггерит пользователей лучше. По нашим данным, Engagement Rate у видео и анимаций в 2 раза выше, в сравнении со статикой.
Тренд №1. Видео: лучшая реклама
Посмотрим статистику видео–контента по опросу Video Marketing Statistics 2020:
- 99% маркетологов в декабре 2019 года сказали, что будут продолжать использовать видео в 2020 году;
- 81% видео–маркетологов сказали, что видео повысило трафик на сайты.
Показатели со стороны пользователей следующие:
- 66% людей предпочитают узнать о товаре или услуге из короткого видео, а не читать текст;
- 96% пользователей посмотрели видео о товаре или услуге.
Тренд на видео, кроме статистики, подтверждают слова Евгения Рючина, арт–директора рекламного агентства MediaNation:
Видео, снятое или анимированное, всегда есть и будет решением номер один. На мой взгляд, любому клиенту сегодня, и особенно в будущем, нужен видеоэксплейнер, описывающий бизнес. Задача в том, чтобы в сжатое время с максимальным погружением внимания пользователя описать какой–то сложный массив информации. Пользователь перегружен визуальным шумом, скроллингом сайтов, пропускает информацию, даже если она хорошо подана. У видео же нет конкурентов, если говорить о внимании человека на единицу времени.
Формат анимированного ролика может быть разный: 2D, более сложная 3D–анимация, сочетание 2D и 3D и комбинации со снятым видео. Вариантов много, главное, чтобы видео решало конкретную задачу.
Важно помнить, что оптимальная длина маркетингового видео — до 2 минут. При такой продолжительности зритель сохраняет концентрацию и вовлеченность.
Презентация продукта B2C
В марте 2020 года бренд Converse запустил 3D–видеорелиз новой модели. За 30 секунд пользователь рассматривает кроссовок со всех сторон и видит фактуры. Производитель при этом успевает расставить акценты на улучшениях, например, показать новую подошву.
Короткие видео — супертренд. Все ребята с онлайн–магазинами, кто может себе позволить тратить деньги и время на съёмку продукта, либо уже делают это, либо будут делать в ближайшие 2 года. Речь о тех сферах, где товар поднимает социальный статус покупателя и комфорт его жизни: одежда, интерьеры, авто, аксессуары. Те сферы, где важна картинка.
Или релиз нового 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, на профессиональных выставках или в социальных сетях.
Пример — изометрическая видеоинфографика для компании «ОСГ Рекордз Менеджмент». Ролик показывает, как сотрудники компании сканируют бумажные документы и создают электронный архив. А также преимущество электронного архива: он сокращает время поиска документов и деньги пользователя.
Эту изометрическую видеоинфографику разработала студия анимации Инфомульт. Дмитрий Игнатенко, руководитель студии, рассказывает о ее создании:
Для того, чтобы появилась видеоинфографика для ОСГ, нашему художнику пришлось не просто создавать классическую 2D картинку из векторных элементов, но и сразу собирать ее в 30–градусном искажении, добавляя элементы сбоку и сзади. Это добавляет видео реалистичности и веса. Как вы понимаете, сложнее всего это делать в условиях, где нужно наглядно показывать сложные сканирующие аппараты, представления о внешнем виде которых у зрителя нет. Значит, приходится думать сразу и о том, чтобы достоверно показать форму и работу механизма и при этом не перегрузить картинку, ведь это инфографика — быстрые и емкие образы, которые должны хорошо считываться на экране.
Тренд №4. Гифки: еще актуальная классика
Гифки просты в создании, не много весят, быстро захватывают внимание и также быстро доносят до пользователя информацию. Например, рекламируемый товар или самопрезентацию бренда.
Такой формат хорош для email–рассылки, для социальных сетей и баннера в поисковике.
Арт–директор студии дизайна MaryCo Design Lab Вероника Октябрь отмечает, что gif–анимация удерживает позиции:
Если пару лет назад гифки больше использовали как мемы, то сейчас их полноценно применяют для репрезентации и идентификации бренда или блогера. Например, в Instagram можно создавать свои узнаваемые паки гифов.
Их легко делать самостоятельно в адобовских программах. Самые популярные сейчас — After Effects и Adobe Animate. Но делать покадровую gif–анимацию можно и в Photoshop.
Gif–анимация бывает продуктовой или тематической. Своими примерами поделилось коммуникационное агентство PR Partner.
Например, в аккаунте комплексных систем безопасности «Луис+» тема страха обыграна всем известным персонажем из «Один дома». Смешной и яркий образ, который моментально воздействует эмоционально.
А соус Tabasco эффектно обыгран в гифе–рецепте с устрицами.
О другом применении гифок в рекламе рассказывает Александра Фрейдлин, ведущий веб–дизайнер компании Datana:
Сейчас гиф–анимация в рекламе используется для поисковиков. Анимированные баннеры привлекают внимание, так как поисковик выдает статичные запросы, а глаз человека обращает внимание на движение. Но тут возникает пара нюансов:
— в баннере должен отображаться тот контент, который отвечает запросу пользователя, что напрямую зависит от правильности и корректности настройки рекламы на площадке;
— информация на баннере должна соответствовать информации на сайте, иначе пользователь по ней пройдет, но потом быстро закроет сайт, так как там ничего этого нет.
Пример гифа–баннера, который Александра Фрейдлин разработала для брендингового агентства Golden Marrow.
Тренд №5. Микроанимация: интерактивный и удобный интерфейс
Если предыдущие формы анимации имели отношение к контенту, то микроанимация функциональна. Это область UI/UX–дизайна, где главная задача — облегчить навигацию по сайту, сделать ее «живой» и понятной. Принцип микроанимации — дать ответ, когда пользователь совершает действия на странице.
Это однозначный тренд уже давно. Я понимаю под этим транзишены: изменение состояния при наведении, анимации подгрузки контента и любые простые движения частей сайта по клику, наведению или скроллу. Основные задачи, которые микроанимация решает:
— связно организует контент внутри одного экрана, если не хочется скролить вверх–вниз много раз;
— управляет вниманием пользователя, погружает и вовлекает в сайт;
— через скорость и тип движения передает архетип бренда, его качества, которые человек будет воспринимать подсознательно. Например, сайту премиальных интерьеров может быть свойственна вальяжность, неторопливость, статус. Это подчеркнут мягкие всплытия контента при прокрутке и плавные движения объектов. А спортивной одежде — что–то более резкое, или даже сумасшедшее. А можно, наоборот, с помощью анимации создать диссонанс и дифференцироваться на рынке. Для того же премиального интерьера транслировать что-то резкое, стремительное и выделиться на фоне других, которые, по классике, вальяжны.
Изменение цвета или размера кнопок, иконок, пунктов меню при наведении и нажатии — неотъемлемая часть интерфейса, потому что человек должен понимать, что это можно нажать, что он с чем–то взаимодействует. К такой микроанимации относятся также выпадающие меню, формы обратной связи, карты, выбор из списка и другое. В формах цветом можно показывать, правильно или неправильно пользователь ее заполняет.
Анимированный логотип в прелоадере
Анимированный логотип уместен при загрузке страницы, чтобы скрасить пользователю момент ожидания и познакомить его с брендом. Кроме традиционного индикатора загрузки с бегунком или процентами, можно использовать логотип и подвижную цветовую шторку, как на сайте архитектурного бюро LOER.
Анимированный логотип — общение с брендом. Элементы анимации логотипа рассказывают больше о бренде и компании. Динамика может показать, как мы быстро меняемся и адаптируемся или нашу скорость и оперативность, а плавные линии — о последовательности наших действий и обдуманности решений.
Еще вариант — прелоадер нового сайта Универмага «Цветной». Сайт выиграл в номинации «Лучший сайт интернет–магазина/магазина» конкурса «Золотой сайт» в 2019 году. Здесь логотип множится и заполняет экран, а затем стирается.
Детали интерфейса: анимация появления
Так как пользователь не знаком с компанией или сайтом, куда он попал, мы должны за 3 секунды захватить его внимание и дать понять, где он находится. Здесь это решают заголовок и графический элемент, которые плавно появляются отдельно друг от друга. Так как элементы не статичны, а появляются необычным образом, пользователю становится интересно, что же еще есть на сайте интересного.
Интересный эффект используется в блоке, — продолжает Андрей Подольский. — Здесь появляется меню слева, мы делаем акцент на его появления для того, чтобы показать ассортимент услуг. Задача клиента была уместить все в одном блоке.
Детали интерфейса: слайдер
Денис Ломов, креативный директор и сооснователь Red Collar, рассказывает о том, как создавался слайдер для сайта Росбанка. Сайт стал лучшим среди банков и страховых компаний на конкурсе «Золотой сайт» в 2019 году.
Мы заморочились над анимацией, чтобы она была не просто приятная, но и затягивающая. Когда человек по привычке нажимает на стрелку, он видит смещение слайдера. А за картинкой уже творится digital–химия: сама плашка по нажатию двигается влево на -352 пикселей, а внутри неё объект сначала растягивается в течение 0,23 секунд, а через 0,36 возвращается в исходное положение.
Так мы сделали эффект скольжения и глубины, физическая плавность чем–то похожа на йо–йо. Хочется нажать еще раз — а заодно и изучить услуги. В самих микроанимациях нет нового тренда, но чтобы сделать даже такую маленькую вещь крутой, нужен опыт.
Детали интерфейса: прогресс–бар
Снова Денис Ломов делится опытом Red Collar и рассказывает о прогресс–баре в статьях блога Мегафона Update.
А здесь чисто функциональная микроанимация — прогресс–бар внутри статьи. Сайт выносит подзаголовки в левую колонку, и читатель выбирает нужную часть материала, чтобы ознакомиться с ней. Одновременно человек видит, сколько уже прочитал и сколько осталось. Так мы формируем у него ожидание от страницы, снижаем уровень неопределенности и повышаем чувство комфорта от пользования блогом.
Что важно помнить, когда вы используете анимацию: взгляд экспертов
- Будущее за анимированным или снятым видео
Мы часто обсуждаем с дизайнерами, что в будущем любой сайт бизнеса, или даже профиль человека в соцсетях, будет на первом экране содержать видео. Анимация или живая съёмка — это нюанс задачи и каждого частного случая. Мы, например, на новом сайте предусматриваем место под шоурил и видео с отзывами клиентов почти для всех основных страниц. Кроме этого, внедряем короткие видео-рассказы наших работников в страницы услуг.
- Все хорошо в меру
Самое главное для любой анимации — не переборщить, иначе получим эффект слепоты. Все должно быть к месту, выполнять определенную функцию и нести правильный контент, тогда получим работающую анимацию с красивым эффектом.
- Используйте анимацию избирательно
Выбор использовать анимацию или нет и какую зависит от целевой аудитории. Чем моложе аудитория, тем анимация больше приветствуется. Поколение 50+ легче зацепить эффектным дизайном. Нужно внимательно изучить целевую аудиторию и выбрать средства, чтобы зацепить тех людей, которые к придут к нашему клиенту.
- Не анимация ради анимации, а контент
Эффективны все виды анимации, если сам контент разработан чётко под конкретную аудиторию и задачу бренда. Главное — использовать разные форматы и делать это систематично, в соответствии с контент–планом. Например, каждый вторник — акционное предложение и продуктовая анимация, а по пятницам — смешные тематические гифки.
Red Collar, как всегда крутые! Вдохновляюсь вашим проектами)
Анимация в любом проявлении помогает оживить любой, самый скучный проект.
Интересное решение с прогресс–баром в блоге!
Хорошая статья, если вдруг кому-то нужна подобная анимация, буду рад помочь)))
Портфолио: https://www.behance.net/seven1102cae2
Связь по телефону или телеграмм: 89852921089
Отличный и полезный обзор инструментария! Спасибо, воспользуюсь.
Указанный кейс Конверсов был снят немецким режиссером Robert Wisniewski , там всего несколько кадров с анимацией – с симуляцией ткани. А вот полностью в 3D анимации они делали другие модели кед, например: https://www.behance.net/gallery/110512951/Converse-CX