DesignWeb DevelopmentMarketingVALMAX
Что такое motion design и его роль в разработке сайтов?
21.9.2020 174

Что такое motion design и его роль в разработке сайтов?

Хоть в 2020-м году весь мир постигла череда не самых радужных событий. Ну ладно, будем честны — это треш! Тем не менее мир продолжает развиваться, мы научились работать и учиться онлайн, что уж говорить об актуальности онлайн покупок товаров и услуг. К чему это мы? — Подумали вы. Причем тут моушен дизайн?

Мы просто хотели сохранить интригу и лишний раз напомнить вам, что уйти или остаться на вашем сайте, посетитель обычно решает в течение первых десяти секунд. Это слишком мало времени для привлечения внимания и демонстрации основных ценностей. Именно эту задачу нам и помогает решить motion design — привлечь внимание, удивить человека зрелищной анимацией или нестандартной подачей. Мы всегда запоминаем сайты, которые нас впечатлили.

Motion Design или Motion Graphics — это одно из направлений современного искусства направленное на анимирование статических изображений (2D-графики). Широко используется в видеороликах, онлайн-играх, медиа, рекламе, кинематографе и конечно же в разработке сайтов и приложений.

Почему же моушн так популярен?

Немного физиологии и статистики:

  • Визуализации воспринимается в 60 000 раз быстрее по сравнению с простым текстом;
  • Примерно 50% нейронов головного мозга человека обрабатывает именно зрительные образы;
  • Производительность труда повышается на 17%, если работа связана с визуальными данными;
  • На 4,5% лучше запоминаются те детали, которые были представлены анимацией;

Именно эти особенности восприятия человека делают его настолько эффективным в решении главной для нас задачи — привлечь внимание. Заставить запомнить наш бренд или товар, а в итоге купить или как минимум поделится с другом.

Где лучше использовать?

Первый экран главной страницы. Это первое, что видят новые пользователи на сайте. Поэтому, как правило, первый экран самый эффектный. На нем вы можете показать позиционирование вашей компании или продукта с призывом ознакомится подробнее. Наш сайт тому пример!

Первый экран главной страницы.

Продукт. Если Ваш сайт направлен на презентацию одного или линейки однотипных товаров, то почему бы не использовать 3d motion design для более подробной их презентации. Например, если вы продаете оконные раздвижные системы, то показать их принцип работы в разрезе.

Продукт.

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

Ключевая информация.

Кнопки и триггеры. Так или иначе, на своем сайте мы стремимся сподвигнуть пользователя совершить какое-то действие: заполнить форму обратной связи, скачать презентацию, заказать товар. Анимация отлично помогает подсказать пользователю на что обратить внимание и какой следующий шаг. Вечный вопрос: “Красная или зеленая кнопка конвертирует лучше?” — Мы ответим: анимированная!

Кнопки и триггеры. Кнопки и триггеры.

Preloader. Для тех кто не знает, preloader — это заставка перед загрузкой страницы сайта. Красивая анимация прелоадера интригует пользователя, чем повышает шанс на то, что он дождется загрузки сайта. А еще, это просто красиво!

Preloader. Preloader.

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

Scrolling.

Подборка крутых моушен-проектов:

Кто и как реализует motion design на сайте?

Как вы наверное уже догадались, моушен дизайн рождается усилиями моушен дизайнера! И вы частично правы!

Действительно, многое зависит от motion дизайнера и его навыков, без него нам никак не обойтись, но создание действительно качественной анимации на сайте — это сложный, многогранный процесс, в котором принимает участие различные специалисты: графический дизайнер, маркетолог, программисты. Если говорить о видео, могут привлекаться: сценарист, режиссёр, оператор, монтажёр, продюсер, саунд-дизайнер.

Зачастую вся магия создается с использованием: Adobe After Effects, Adobe Photoshop, Adobe Illustrator, 2D Animation, 3D Animation, Graphic Design, Cinema 4D.

Нюансы:

Реализовывая моушен дизайн на своем сайте нужно понимать: Главное не перегнуть!

Что мы имеем в виду?

  • Соблюдайте баланс, не нужно запихивать анимацию в каждый элемент и страницу на сайте. Везде должна быть гармония. Помните, что сайт должен не только удивлять, но и быть удобным и понятным для ваших пользователей.
  • Моушен дизайн реализовывается с использованием достаточно сложных технологий, зачастую с использованием таких web-библиотек, как: Three.js, WebGL, wow.js, animate.css и другие. Чрезмерное использование или неправильная реализация может значительно повлиять на скорость загрузки сайта, а она в свою очередь на маркетинг, заказы и тд.
  • Анимации, как и весь другой сайт, требуют технической поддержки. Чем сложнее и чем чаще используется анимация на сайте, тем более затратная её поддержка и доработка. Тут важно заручится надежными партнерами в лице разработчиков и дизайнеров.

Выводы:

Если до этого вы возможно раздумывали нужна ли вашему сайту анимация, стоит ли заморачиваться или всё это лишь способ повыпендриваться. То сейчас понятно, что правильный подход к анимациям и контенту пропорционален проценту конверсии и вовлеченности аудитории на сайте. Ведь успех кроется в деталях!

А мы, как настоящие профессионалы, всегда будем рады создать для вас креативный, индивидуальный сайт, который сможет удивить!

Заказать сайт с моушн дизайном