ypx
Как использовать моушн-дизайн в оформлении сайтов?
Что такое моушн-дизайн, каким он бывает и как использовать его в оформлении сайтов? Узнайте основные форматы и особенности моушн-дизайна, а также базовые правила его применения в дизайне веб-ресурсов.
Веб-дизайн
378
«Моушн-графика» или «моушн-дизайн» – общее название анимированных графических элементов, включая текст, геометрические фигуры, иконки и не только.

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

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


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




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

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

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



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


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

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

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



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

Заключение


Сделать подвижными можно практически любые элементы сайта. В вопросе использования моушн-дизайна важно не перегибать палку и не забывать том, для достижения каких целей вы используете этот инструмент. Учтите, моушн-графика может как улучшить юзабилити сайта, так и негативно на нем отразиться, если использовать этот инструмент, не задумываясь. Рекомендуем применять моушн-дизайн для привлечения внимания пользователей к самым важным и значимым блокам на каждой странице сайта.
Понравилась статья? Сохраните её в своих соц. сетях!
обучайся с нами профессии
UX/UI-дизайнер
Подробнее о курсе
Читайте другие статьи
Как разместить текст на фотографии: советы дизайнерам
Умение грамотно разместить текстовую надпись на фото или иллюстрации — один из ценнейших навыков в арсенале UX/UI-дизайнера. Внутри статьи вы найдете 10 приемов, которые помогут «подружить» тексты с изображениями.
Веб-дизайн
1362
Лучшие плагины Figma 2020
В статье вы найдете актуальную подборку лучших плагинов Figma на 2020 год, заслуживающих ваше внимание. Хорошие плагины помогут сэкономить кучу времени и расширить возможности платформы.
Веб-дизайн
3251
Роль дизайна в продажах клиента
Знали ли вы, что финансовый успех клиента, напрямую зависит от качества вашего дизайна? В этой статье вы узнаете, какую роль дизайн играет в воронке продаж клиента и что вы должны сделать как дизайнер, чтобы положительно повлиять на его бизнес-показатели.
Веб-дизайн
1787
Получайте первыми свежие статьи из нашего блога прямо на вашу почту
Введите корректный e-mail
Никакого спама. Только ценные и полезные статьи для вас!