ypx
INTENSIVE
Попробуй себя в UX/UI-дизайне UX/UI-дизайн бесплатно
7 дней
5 проектов в портфолио
проверка дз
banner-circle
INTENSIVE
Попробуй себя во Frontend разработке Frontend бесплатно
7 дней
1 полноценный проект
проверка дз
banner-circle
Как использовать моушн-дизайн в оформлении сайтов?
Что такое моушн-дизайн, каким он бывает и как использовать его в оформлении сайтов? Узнайте основные форматы и особенности моушн-дизайна, а также базовые правила его применения в дизайне веб-ресурсов.
Веб-дизайн
1683
«Моушн-графика» или «моушн-дизайн» – общее название анимированных графических элементов, включая текст, геометрические фигуры, иконки и не только.

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

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


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




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

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

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



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


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

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

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



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

Заключение


Сделать подвижными можно практически любые элементы сайта. В вопросе использования моушн-дизайна важно не перегибать палку и не забывать том, для достижения каких целей вы используете этот инструмент. Учтите, моушн-графика может как улучшить юзабилити сайта, так и негативно на нем отразиться, если использовать этот инструмент, не задумываясь. Рекомендуем применять моушн-дизайн для привлечения внимания пользователей к самым важным и значимым блокам на каждой странице сайта.
Понравилась статья? Сохраните её в своих соц. сетях!
обучайся с нами профессии
UX/UI-дизайнер
Подробнее о курсе
Читайте другие статьи
Как использовать цвет 2024 года Pantone в дизайне?
Нежный и романтичный, фруктовый и витаминный, тактильный и обволакивающий — любым из этих эпитетов можно охарактеризовать главный цвета 2024 года по версии Pantone. Узнайте, что это за оттенок и как дизайнерам использовать его в своей работе.
Веб-дизайн
799
Модальное или немодальное окно: как выбрать?
В статье разбираемся что такое модальное и немодальное окно и в каких случаях их лучше всего использовать.
Веб-дизайн
30409
Полезные расширения от Google Chrome для дизайнеров
Рассказываем про самые полезные расширения Google Chrome для веб-дизайнеров, которые упрощают многие задачи и помогают сэкономить время.
Веб-дизайн
5448
Получайте первыми свежие статьи из нашего блога прямо на вашу почту
Введите корректный e-mail
Никакого спама. Только ценные и полезные статьи для вас!