Типы моушн дизайна 1

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

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

Моушн дизайн: какие виды бывают

Продающий видеоролик (эксплейнер)

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

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

Вот несколько вдохновляющих примеров:

Google BigQuery:

 

 

Что такое Slack?:

 

Продуктовый маркетинг

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

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

Вот пример инструмента Figma, который использует реальную жизнь и моушн дизайн:

 

Анимация пользовательского интерфейса

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

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

Типы моушн дизайна 2

Приложение для бронирования туров - от Олега Лебединского для Heyllow

Иконки

Также отличный способ улучшить свой интерфейс. Я видел, как вы зависаете над значками, и они начинают оживать. Есть бесплатный набор анимированных иконок от http://animaticons.co и их веб-сайт показывает, как можно использовать анимированные иконки.

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

Типы моушн дизайна 3

Автор: DUM!DUM!

Логотипы

Это может действительно помочь вашему бренду возвышаться над другими. Я люблю цитату “Делайте дизайн, чтобы радовать”. Я не уверен, где я это слышал, и если вы знаете, пожалуйста, дайте мне знать. Моушн дизайн придаёт прелесть дизайну, и в данном случае дизайну логотипа. Принесение этой радости будет отражать позитивность для вашего бренда.

Мой любимый пример-логотип Fubiz:

Вы можете увидеть его в действии на их сайте в левом верхнем углу и в середине чуть ниже меню (http://www.fubiz.net). Мне нравятся забавные выразительные анимации, которые рассказывают историю их бренда.

Короткометражные фильмы

Здесь я думаю, что анимация и моушн дизайн могут быть взаимозаменяемы. Я рассматриваю моушн дизайн в короткометражных фильмах, когда он представляет собой более простые формы и элементы дизайна. Напротив – анимация обычно содержит более подробные образы. Следующая цитата была вдохновлена книгой Лиз Блейзер под названием “ “Сторителлинг в анимации” (http://amzn.to/1tkkNB1).

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

Прекрасным примером этого является фильм под названием «Растяпа» Джордана Скотта:

Титры (фильмы и телевидение)

Я считаю – это то, с чего начался моушн дизайн. Сол Басс – известный дизайнер, создавший титры для многих известных фильмов. Если вы не знаете, кто он, вы должны обязательно найти о нём информацию. Он делал титры для «Анатомии убийства» (http://www.artofthetitle.com/title/anatomy-of-a-murder/) и ” Психо” (http://www.artofthetitle.com/title/psycho-1998/).

Лучшим ресурсом с огромной библиотекой для вдохновения является сайт под названием “Art of the Title”: http://www.artofthetitle.com

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

 Последовательность открывающих заголовков «Сорвиголовы» на Netflix

Презентации

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

Инфографика

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

Еще один вариант с инфографикой – это превратить вашу информационную графику в продающий видеоролик. Вот пример того, над чем я работал некоторое время назад для клиента:

Графика вещания (бродкаст дизайн)

Это включает в себя графику, представленную на новостной станциях или спортивных мероприятиях. Это графика для шоу, транслируемых в прямом эфире. Например, на новостных мероприятиях, когда имена говорящих людей анимируются.

Формат GIF

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

Вот некоторые замечательные люди, на которых можно подписаться на dribble, чтобы получить вдохновение для создания gif-файлов: https://dribbble.com/eranmendel и еще https://dribbble.com/MarkusM.

Типы моушн дизайна 4

Понедельники от Markus

Вывод

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

Оригинал: Kyle Ashby

Статью для вас перевёл я – моушн дизайнер Игорь Царёвмоушн дизайнер Игорь Царёв.

Вот мой шоурил. Найдите меня в соцсетях или напишите на почту igor@tsariov.ru