Моушн-дизайн в создании сайтов: полное руководство для начинающих

«Моушн-дизайн», или «моушн-графика» (эти термины часто используются как синонимы) — это анимированные графические элементы, такие как текст, геометрические формы и другие элементы графики.

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

Моушн-графика появилась в 1940-х годах благодаря экспериментальной работе Оскара Фишингера и Нормана Макларена. А в 1950-х годах дизайнеры Сол Басс, Морис Биндер и Пабло Ферро сделали моушн-графику популярной. Фильмы, над которыми работали эти дизайнеры, до сих пор служат источником вдохновения для многих моушн-дизайнеров.

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

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

И лучше один раз увидеть, чем сто раз услышать:

Когда в маркетинге используют моушн-графику

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

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

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

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

Наиболее частые сферы применения моушн-дизайна

• Видео: заставки перед видеороликами, титры, субтитры, визуальные эффекты.
• Обучающие видеоролики. С помощью моушн-графики можно легко проиллюстрировать новую информацию или объяснить какое-либо явление – от принципов экономики до научных открытий.
• Моушн-дизайн также используется при производстве простых игр и в развлекательных проектах.
• Бизнес-презентации и инфографика тоже не обошли стороной такой привлекательный способ подачи информации — презентации, кейсы, проморолики – всё это делается с помощью моушн-графики.

Как создается моушн-дизайн

Чаще всего моушн-дизайнер получает от дизайнера или иллюстратора статичную иллюстрацию и, используя программы, такие как Adobe After Effects, он готовит их к анимации.

Иногда моушн-дизайнеру приходится адаптировать, изменять или даже полностью воссоздавать дизайн, прежде чем двигаться дальше.

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

В каких программах создают моушн-дизайн

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

В предыдущем разделе я упомянул Adobe After Effects. Это одна из самых популярных программ, которая хорошо зарекомендовала себя, особенно среди профессионалов. Но, конечно же, существует множество других программ:

1. Видеоредакторы:

   • Adobe After Effects;
   • Adobe Premiere Pro;

2. Программы для работы с графикой:

   • Adobe Illustrator;
   • Adobe Photoshop;
   • CorelDraw

3. Программы для создания и редактирования 3D-графики и анимации:

   • Autodesk 3ds Max;
   • Autodesk Maya;
   • Blender;
   • Cinema 4D.

Применение моушн-дизайна в разработке сайтов

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

Как можно использовать моушн-дизайн для сайта?

Переходы. Стильно оформленный переход между разделами сайта или лендинга может заметно добавить эффектности вашему сайту.

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

Прелоадеры и загрузка. Пока контент подгружается, чтобы посетитель сайта не скучал, разработчики делают прелоадеры — индикатор, который сообщает, что контент загружается.

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

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

Призыв к действию. Если анимировать привычный всем call-to-action, можно увеличить конверсию. Или как минимум привлечь дополнительное внимание к форме на сайте.

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

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

На таком сайте нет привычного нам скроллинга сверху вниз — при скролле сменяются разные блоки сайта, и посетителю последовательно рассказывают целую историю – от начала и до конца. Для реализации такого сайта как раз используется моушн-дизайн.

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

В заключение

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

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

Ну а если вам нужно создать необычный баннер или анимировать сайт, напишите нам, придумаем что-нибудь интересное. :)

---