Акция
Акция

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

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

Моушн-дизайн зарождался с развитием технологий — он появился на стыке графического дизайна и анимации, когда дизайнеры стали анимировать элементы, которые до этого были статичными. Но именно с развитием киноиндустрии, особенно в начальных титрах, появился 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, то сейчас для их разработки используют моушн-графику. Тесты подтверждают, что анимированные баннеры работают гораздо лучше статичных.

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

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

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

Примеры роста кликов, конверсий, заказов и прибыли:

В заключение

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

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

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

7
0
0
0
1

© 1PS.RU, при полном или частичном копировании материала ссылка на первоисточник обязательна

Инфографика «Идеальный дизайн сайта:
что указать в ТЗ для дизайнера, чтобы не возникло недомолвок»

6 обязательных условий, которые нужно прописать в ТЗ для дизайнера, чтобы получить макет мечты.

Получить бонус
Комментарии для сайта Cackle

Популярные статьи

Все популярные статьи »

Проверить позиции сайта

Запросы для проверки
Регион для проверки
Акция

Полетели к ТОПу!

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

Более 250 000 человек уже с нами!
Или подпишитесь на нас:

Подпишитесь на рассылку!

Будьте в курсе актуальных новостей и забирайте курс по созданию сайтов на Tilda за 1100 рублей 0 рублей!

Ваш email

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

×
Маркетинг

33 бесплатных инструмента для интернет-маркетолога

Реклама

Книга «Анатомия маркетинговой акции»

Продвижение сайтов

Чек-лист для SEO-аудита сайта своими руками

Социальные сети

Советы по продвижению бизнеса в соцсетях

Работа с репутацией

Инфографика «Важные факты об управлении репутацией»

Маркетплейсы

Чек-лист «Рекомендации по контенту на маркетплейсах»

И ещё 14 полезных материалов по этим категориям!

Базовый набор Digital-специалиста

20 бесплатных и полезных «плюшек» для маркетологов и владельцев бизнеса

Введи свой email и получи 20 «плюшек»

Закрыть и не показывать больше