«Моушн-графика» или «моушн-дизайн» – общее название анимированных графических элементов, включая текст, геометрические фигуры, иконки и не только.

Подвижные фигуры, меняющийся фон и цвета — мощный инструмент привлечения внимания пользователей, положительно влияющий на поведенческие характеристики сайтов. В частности, это касается длительности просмотра веб-страниц.

Как и для чего маркетологи используют моушн-дизайн?

В маркетинговых целях моушн-графика используется для визуализации разных процессов (взаимодействие с клиентом или работа готового продукта, например). Также моушн-графику целесообразно использовать в обучающих материалах, видеороликах, контенте для соцсетей, чтобы «оживить» статичную текстовую информацию.




В сравнении с анимацией персонажей или классическими мультфильмами (покадровой анимацией) моушн-дизайн требует гораздо меньшего количества ресурсов, так как его основой являются шрифты и иконки.

Чаще всего моушн-графика используется в:

1. Видеороликах: в титрах и субтитрах, в заставках перед основным контентом, для визуальных эффектов
2. Обучающем контенте. Посредством моушн-дизайна удобно объяснять новую информацию, раскрывать суть самых разных процессов и явлений, от научных открытий до экономических тенденций
3. Развлекательных продуктах, при разработке и оформлении простых игр
4. Оформлении презентаций, кейсов, портфолио, промороликов

Моушн-дизайн в создании сайтов

Моушн-графика чаще встречается на сайтах и всевозможных посадочных страницах. Приведем некоторые элементы дизайна веб-ресурсов, которые можно реализовать инструментами моушн-дизайна:

• Переходы от одного раздела лендинга к другому или между страницами многостраничной площадк
• Логотипы. Средства моушн-графики позволяют создавать подвижные анимированные логотипы, способные сделать веб-ресурс более разнообразным и оживленным
• Прелоадеры — подвижные индикаторы, показывающие прогресс загрузки контента посетителям веб-ресурса. Здесь можно проявить фантазию, не ограничиваясь банальным прогресс-баром или кружком. Можно частично или полностью анимировать лого или придумать отдельный элемент, связанный с тематикой ресурса
• Видеопрезентации услуги или продукта. Покажите посетителям главной страницы, как воспользоваться вашими услугами или как устроен ваш продукт, используя моушн-графику
• Призывы к действию или call-to-action. Анимируйте блоки CTA, чтобы привлечь к ним больше внимания пользователей и повысить конверсию
  
  
• Баннеры. Раньше для создания баннерной рекламы использовали технологию flash, сегодня баннеры создаются при помощи моушн-дизайна. Данные АВ-тестов и сервисов онлайн-аналитики подтверждают эффективность анимированных баннеров выше, чем статичных
• Сайты-сторителлинги. На таких ресурсах нет привычного скроллинга сверху вниз. При скролле блоки последовательно меняются, рассказывая пользователю полноценную историю. Для создания таких проектов применяется моушн-дизайн. Обычно это промосайты (посадочные страницы, лендинги)

• Элементы навигации по сайту (переход между карточками товаров, их добавление в избранное, очистка корзины) тоже можно анимировать средствами моушн-графики

Заключение

Сделать подвижными можно практически любые элементы сайта. В вопросе использования моушн-дизайна важно не перегибать палку и не забывать том, для достижения каких целей вы используете этот инструмент. Учтите, моушн-графика может как улучшить юзабилити сайта, так и негативно на нем отразиться, если использовать этот инструмент, не задумываясь. Рекомендуем применять моушн-дизайн для привлечения внимания пользователей к самым важным и значимым блокам на каждой странице сайта.