Относительно новое направление в дизайне - моушн-дизайн, является одним из трендов 2018-2019 года. В этой статье мы расскажем о том, что представляет собой это направление, как моушн-дизайн применяется в веб-дизайне и приведем примеры из реальных ресурсов.

Что такое моушн-дизайн

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

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

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

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

Примеры использования моушн-дизайна в веб-дизайне

Рассмотрим основные приемы, которые используют веб-дизайнеры при применении моушн-дизайна на страницах.

Анимированные логотипы

Интересный прием, который применяется дизайнерами - анимирование логотипа. Самый известный пример - логотип Google, где применяется моушн-дизайн:

Данный прием позволяет компаниям обратить внимание пользователя на айдентику организации, повысить узнаваемость бренда. Больше об использовании фирменного стиля в дизайне сайтов мы писали в этой статье.

Фон

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

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

Еще один пример - видеобэкграунд, созданный с помощью моушн-дизайна:

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

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

Элементы навигации

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

Также очень часто моушн-дизайн можно увидеть при переходах с одного экрана на другой, при обычном скроллинге:

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

Призывы к действию

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

На примере помимо декоративных падающих букв на главном экране расположена кнопка, которая приглашает пользователя попробовать приложение и получить скидку в 10%. Дизайнеры специально сделали ее «пульсирующей», чтобы привлечь внимание пользователя.

Рекламные баннеры

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

На примере - известный ресурс Яндекс.Музыка. Сервис размещает рекламу вверху главного экрана. Чаще всего это ролики, выполненные с помощью моушн-дизайна. Так пользователь обращает внимание на баннер, просматривает рекламное предложение и переходит на другую страницу. Больше об использовании рекламных баннеров в дизайне сайта можно прочитать здесь.

Сайт-история

Иногда дизайнеры стремятся создать полностью уникальный и нестандартный ресурс. В этом случае моушн-дизайн применяется как целая концепция дизайна сайта. Оформление ресурса полностью построено на моушн-дизайне и рассказывает пользователю целую историю о продукте, компании и так далее. Такой прием еще называется сторителлингом. Часто подход используется на сайтах, посвященных фильмам, например:

Презентация продукта

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

Один из таких приемов - демонстрация товара в различных состояниях. Например:

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

На промо-сайтах можно увидеть эффекты при переходе с одного экрана на другой:

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

Видеоконтент

Также дизайнеры применяют моушн-дизайн в качестве дополнения текстового и графического контента. Например, вставляют на страницу видеоролики, которые рассказывают о продукте:

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

Отдельные декоративные элементы

Моушн-дизайн может присутствовать в отдельных элементах или областях на странице. Например:

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

Еще один дополнительный элемент, где может использоваться моушн-дизайн - экран загрузки. Часто «тяжелые» сайты требуют времени для загрузки и, чтобы пользователь не ушел с ресурса, дизайнеры делают «заглушки». Анимированные цифры или картинки также делают с помощью моушн-дизайна:

3D эффекты

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

Клиент может рассмотреть обувь со всех сторон, изучить характеристики и сразу заказать ее на сайте.

Особенности применения моушн-дизайна в дизайне сайтов

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

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

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

1. Технические возможности. Моушн-дизайн - достаточно «тяжелая» технология, поэтому дизайнерам нужно учитывать не только внешний вид сайта, но и его внутреннюю структуру. Если сайт будет постоянно «подвисать», не отображать видео или звук, созданный макет не будет иметь должного эффекта и будет только раздражать пользователей.
2. Юзабилити сайта. Креативные решения позволяют дизайнерам сделать запоминающийся ресурс, который может заинтересовать пользователей, но не проработать элементы для удобства пользования. В результате клиент уйдет к конкурентам с более простым и более понятным сайтом, оставив интересный ресурс.
3. Упорядоченность. Обилие спецэффектов также может сбить пользователей с толку и вытеснить сам продукт. Иногда маркетологи и дизайнеры настолько поглощены созданием креативного ролика, что забывают об основной его цели - презентовать товар. Поэтому важно использовать креатив в меру и не забывать о самом продукте.

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

Студия дизайна IDBI в своих работах также используют приемы с применением моушн-дизайна. Мы создаем ресурсы, которые становятся оригинальными промо-сайтами для компаний или отдельных продуктов, разрабатываем креативные решения для эффектной презентации услуг, а также способствуем оперативному донесению информации до клиентов. Наши работы доступны для просмотра в разделе «Портфолио».