На заре появления всемирной паутины использовался только статический текст. Потом появились изображения, а чуть позже ещё и анимация в виде GIF - и если вы достаточно взрослый, чтобы помнить 90-е годы, вы помните сайты с огромным количеством мигающего текста, высококонтрастных цветов и сомнительных шрифтов.
К счастью, с тех пор анимация в Интернете стала более сложной (и тонкой). Фактически, моушн-дизайн в настоящее время является важной частью создания привлекательного контента для Интернета и мобильных устройств. Вы можете посмотреть рейтинг курсов по моушн-дизайну на https://choosecourse.ru/motion т.к. это одно из самых востребованных направлений в веб-дизайне сегодня
Что такое моушн-дизайн?
Возможно, вы уже знаете термин графический дизайн. Это процесс передачи сообщений через визуальный контент. Вы увидите графический дизайн на плакатах, рекламных объявлениях, логотипах брендов, интерфейсах веб-сайтов или мобильных приложений и так далее.
Моушн-дизайн - это анимационная графика. Моушн-дизайн использует анимированные элементы графического дизайна (и, при необходимости, звук) для передачи сообщений. Пример моушн-дизайна - анимированная сова Duolingo, которая подбадривает вас всякий раз, когда вы завершаете урок в своем мобильном приложении
Если вы посмотрите на свой телефон, зайдёте на сайт или даже взгляните на свои умные часы, вы, вероятно, увидите примеры моушн-дизайна.
Примеры моушн-дизайна
- Голосовой поиск Google отображает анимированные элементы, когда вы говорите, чтобы вы знали, что он активно слушает.
- Оставление отзыва – Анимация запрашивает пользователя, когда успешное (или неудачное) взаимодействие имело место или происходит. Например, вспомните, когда вы использовали Голосовой поиск Google или любого другого голосового помощника. Как правило, вы увидите элементы, которые анимируются, когда вы говорите, сообщая вам, что веб-сайт или приложение активно слушает.
- Показать состояния загрузки - Задержки во времени загрузки веб-сайта могут повлиять на коэффициент конверсии. Отображение анимации (например, индикатора выполнения или загрузочного спиннера) привлекает пользователей и снижает вероятность того, что они уйдут.
- Подсказки навигации — анимация помогает пользователям подсказать, куда двигаться дальше. Например, в меню боковой панели со значками гамбургера значок гамбургера может быть анимирован в кнопку «закрыть» при открытии меню. Это позволяет пользователям знать, что они могут щелкнуть по значку, чтобы закрыть меню.
- Показать связь между состояниями - Для многошаговых процессов, таких как экраны входящей миграции, использование анимации (например, ползунка, показывающего ход выполнения) дает пользователям контекст того, как связаны различные состояния.