Моушен дизайн это: Волшебство в движении: что такое моушн-дизайн

Содержание

как появился и где применяется

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

Тауматроп — игрушка, основанная на оптической иллюзии: при быстром вращении кружка́ с двумя рисунками с разных сторон они воспринимаются как один. Была особо популярна в Викторианскую эпоху.

Пример тауматропа. Игрушка Икабода Крейна из фильма Тима Бертона «Сонная лощина»

Фенакистископ — прибор для демонстрации движущихся рисунков, конструкция которого основана на инерции человеческого зрения. Почти одновременно с ним был изобретён стробоскоп.

Зоотроп — устройство для демонстрации движущихся рисунков, конструкция которого основана на инерции человеческого зрения. Изобретателем зоотропа считается Уильям Джордж Горнер.

Зоотроп

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

В честь первого показа «светящихся пантомим» Рейно в 1892 году 28 октября отмечается как Международный день анимации.

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

Рейно применил некоторые приёмы, ставшие основой технологии мультипликации. В их числе — раздельное рисование персонажей и декораций.

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

Первым в истории полнометражным фильмом с синхронной речевой фонограммой в 1927 году стал музыкальный фильм «Певец джаза» по технологии «Вайтафон» со звуком на грампластинке.

Кинематограф стал средой, в которой зародился моушн-дизайн, он получил значительное развитие в пятидесятых годах в США благодаря таким дизайнерам, как Сол Басс, Морис Биндер и Пабло Ферро. В то время на телевидении стали появляться анимированные титры и логотипы. Так произошёл переломный момент: анимация перестала быть исключительно инструментом развлечения и получила новые функциональные задачи.

подробное описание и обзор — CheckROI

  • Профессии
    • Профессии в аналитике Профессии в дизайне Профессии в маркетинге Профессии в менеджменте Профессии в программировании Все Профессии

      Кто такой UX-аналитик

      Профессии

      Профессия Data-маркетолог: чем занимается специалист по дата-маркетингу, сколько…

      Профессии

      Кто такой HR-аналитик

      Профессии в дизайне

      Профессия «Дизайнер текстильного интерьера»: подробное описание и обзор

      Профессии в дизайне

      Профессия «флорист»: подробное описание и обзор

      Профессии в дизайне

      Профессия «фотограф»: подробное описание и обзор

      Профессии в дизайне

      Кто такой художник по рекламе

      Профессии в маркетинге

      Head of SMM: кто это и чем занимается,…

      Профессии в маркетинге

      Профессия блогер: как использовать силу соцсетей для обогащения?

      Профессии в маркетинге

      Кто такой директор по маркетингу

      Профессии в маркетинге

      Профессия «контент-мейкер в спорте»: подробное описание и обзор

      Профессии в менеджменте

      Мастер презентации и публичных выступлений: подробное описание и…

      Профессии в менеджменте

      Профессия «руководитель отдела продаж»: подробное описание и обзор

      Профессии в менеджменте

      Профессия «онлайн-преподаватель»: подробное описание и обзор

      Профессии в менеджменте

      Специалист по управлению персоналом: какие функции выполняет, каким…

      Профессии в программировании

      Профессия «Go-разработчик»: подробное описание и обзор

      Профессии в программировании

      Специалист по GIT: зачем нужна система управления версиями

      Профессии в программировании

      Профессия VoIP-инженер: специалист по настройке IP-телефонии

      Профессии в программировании

      Кто такой IT-рекрутер

      Профессии

      Профессия «Дизайнер текстильного интерьера»: подробное описание и обзор

      Профессии

      Мастер презентации и публичных выступлений: подробное описание и…

      Профессии

      Профессия «флорист»: подробное описание и обзор

      Профессии

      Профессия «фотограф»: подробное описание и обзор

  • Онлайн-курсы
    • Курсы для бизнеса Курсы по дизайну Курсы по маркетингу Курсы по программированию Все Курсы для бизнеса

      Топ-10 курсов по управлению командами

      Курсы для бизнеса

      Топ-12 курсы по управлению на Agile: Scrum, Kanban,…

      Курсы для бизнеса

      Топ-10 курсов для финансистов

      Курсы для бизнеса

      Топ-3 курса по работе с персоналом в спортивной…

      Курсы по дизайну

      ТОП-8 курсов Tilda: создание сайтов с нуля

      Курсы по дизайну

      Топ-11 курсов для 3D-дизайнеров

      Курсы по дизайну

      Топ-10 курсов по ландшафтному дизайну

      Курсы по дизайну

      Топ-6 курсов по сервисному дизайну

      Курсы по маркетингу

      Топ-11 курсов по сквозной аналитике

      Курсы по маркетингу

      Топ-9 курсов по контент-менеджменту

      Курсы по маркетингу

      Топ-6 курсов для директоров по маркетингу

      Курсы по маркетингу

      Топ-7 курсов по созданию спортивного контента

      Курсы по программированию

      Топ-6 курсов для VR & AR-разработчиков

      Курсы по программированию

      Топ-3 курса по компьютерному зрению (Computer Vision)

      Курсы по программированию

      Топ-5 курсов по Power BI

      Курсы по программированию

      Топ-10 курсов по тестированию мобильных приложений

      Онлайн-курсы

      Летние скидки в Skillbox

      Онлайн-курсы

      Топ-11 курсов по сквозной аналитике

      Онлайн-курсы

      Топ-10 курсов по управлению командами

      Онлайн-курсы

      Топ-12 курсы по управлению на Agile: Scrum, Kanban,…

  • Рубрики
    • Soft Skills Аналитика Базовые понятия Бизнес и управление Менеджмент проектов Продажи ВКонтакте Дизайн Бренд дизайн Веб-дизайн Графический дизайн Дизайн интерьеров Инстаграм Интернет-маркетинг Email-маркетинг SEO SMM Контекстная реклама (PPC) Копирайтинг Фриланс Программирование Все Soft Skills

      «Google Таблицы»: гайд для простых людей

      Аналитика

      Профессия аналитик: обязанности, зарплата, где учиться и как…

      Аналитика

      Профессия Web-аналитик: кто такой и чем занимается, зарплата…

      Базовые понятия

      Типизация в программировании или как выбрать свой язык

      Базовые понятия

      Стоимость привлечения клиента (CAC): расчет и формулы

      Базовые понятия

      Как рассчитать LTV: формула и пример расчёта жизненной…

      Базовые понятия

      Что такое CPS (PPS): показатель, формула расчёта, модель…

      Базовые понятия

      Что такое CTR: формула расчета, примеры и среднее…

      Базовые понятия

      Какая формула расчета CPM в рекламе и маркетинге?

      Базовые понятия

      Что такое CPC и какая формула расчета?

      Базовые понятия

      Что такое CPA и какая формула расчета CPA…

      Бизнес и управление

      Как составить коммерческое предложение, чтобы увеличить свои шансы

      Бизнес и управление

      Ведение деловых переговоров: этапы, техники, лайфхаки

      Бизнес и управление

      Лид-магнит: что это, основные виды + примеры и…

      Бизнес и управление

      Сегментация целевой аудитории: Топ-5 методов

      Бизнес и управление

      Что такое Call-to-action (CTA): виды призывов к действию…

      Бизнес и управление

      Как определить целевую аудиторию для любой сферы

      Менеджмент проектов

      Лид-магнит: что это, основные виды + примеры и…

      Менеджмент проектов

      Сегментация целевой аудитории: Топ-5 методов

      Менеджмент проектов

      Что такое Call-to-action (CTA): виды призывов к действию…

      Менеджмент проектов

      Как определить целевую аудиторию для любой сферы

      Продажи

      Как составить коммерческое предложение, чтобы увеличить свои шансы

      ВКонтакте

      Таргетинговая реклама в социальных сетях: что это такое…

      ВКонтакте

      Как сделать пост ВКонтакте, чтобы его дочитали до…

      ВКонтакте

      Размеры оформления контента ВКонтакте

      ВКонтакте

      Как сделать статью в ВК: пошаговая инструкция от…

      ВКонтакте

      Лучшее время для публикации поста Вконтакте

      ВКонтакте

      20 универсальных тем и идей для постов Вконтакте

      ВКонтакте

      Рекламный пост Вконтакте: лучшие идеи + примеры

      ВКонтакте

      Сервисы и генераторы для розыгрышей и конкурсов в…

      Дизайн

      Инфографика: что это, где брать и как научиться…

      Дизайн

      Цветовой круг Иттена: что это такое и как…

      Бренд дизайн

      Цветовой круг Иттена: что это такое и как…

      Веб-дизайн

      Цветовой круг Иттена: что это такое и как…

      Графический дизайн

      Цветовой круг Иттена: что это такое и как…

      Дизайн интерьеров

      Цветовой круг Иттена: что это такое и как…

      Инстаграм

      Что такое Инстаграм и зачем он нужен

      Инстаграм

      Как оформить аккаунт Инстаграм для успешного продвижения: подробное…

      Инстаграм

      Работа с блогерами в Инстаграм в 2020: influence-marketing

      Инстаграм

      Как продвинуть пост в Инстаграм

      Инстаграм

      Как написать развлекательный пост в Инстаграм: инструкция, идеи…

      Инстаграм

      Информационный пост в Инстаграм: идеи + примеры +…

      Инстаграм

      Контент-план для Инстаграм: руководство + примеры + инструменты

      Инстаграм

      Размеры в Инстаграм в 2020: фото, видео, текст,…

      Интернет-маркетинг

      Продвижение «ВКонтакте»: 25 советов + 20 сервисов, упрощающих…

      Интернет-маркетинг

      Особенности продвижения в одноклассниках: аудитория, товары, методы раскрутки

      Интернет-маркетинг

      Интернет-маркетинг

      Полный список работ по продвижению сайта в современных…

      Интернет-маркетинг

      Продвижение в Instagram 2020: пошаговая инструкция для начинающих

      Интернет-маркетинг

      Как найти и удалить дубли страниц на сайте:…

      Интернет-маркетинг

      SMM в VK: особенности соцсети + пошаговая инструкция…

      Интернет-маркетинг

      Что такое SMO (Social Media Optimization) оптимизация сайта?

      Email-маркетинг

      Email-маркетолог: кто это и чем занимается, зарплата и…

      Email-маркетинг

      Как писать e-mail рассылки

      SEO

      Полный список работ по продвижению сайта в современных…

      SEO

      Как найти и удалить дубли страниц на сайте:…

      SEO

      Что такое зеркало сайта и как указать поисковикам…

      SEO

      Как сделать комплексный технический аудит сайта?

      SEO

      Как установить на сайт код Google аналитики

      SEO

      Как установить счетчик Яндекс Метрики на сайт

      SEO

      Заголовки 4U: подробный разбор + примеры

      SEO

      Как добавить сайт в инструменты Яндекс Вебмастера

      SMM

      Продвижение «ВКонтакте»: 25 советов + 20 сервисов, упрощающих…

      SMM

      Особенности продвижения в одноклассниках: аудитория, товары, методы раскрутки

      SMM

      Продвижение в Instagram 2020: пошаговая инструкция для начинающих

      SMM

      SMM в VK: особенности соцсети + пошаговая инструкция…

      SMM

      Что такое SMO (Social Media Optimization) оптимизация сайта?

      SMM

      Как сделать рассылку в директ: инструкция + сервисы…

      SMM

      Как создать маску для Инстаграм: пошаговая инструкция +…

      SMM

      5 ступеней к успешному SMRM или как улучшить…

      Контекстная реклама (PPC)

      Контекстная реклама (PPC)

      Как заработать во время карантина 2020: профессии +…

      Контекстная реклама (PPC)

      Профессия «специалист по контекстной рекламе»: кто это, что…

Что такое Motion Design и как стать моушн дизайнером

Motion Design или motion graphics — это графические элементы в движении. Однажды, когда статичная графика уже перестала удивлять её стали оживлять, так стал рождаться Motion Design, который сегодня превратился в целый мир разных направлений.

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

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

 

Кто такой моушен дизайнер

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

Russian Motion Design 2013 from Designcollector Network on Vimeo.


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

С чего начать обучение

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


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


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

Далее можно переходить к изучению анимации: здесь, например, вам помогут книги о тайминге и 12 принципов анимации от Дисней.

Теперь перейдем к изучению пакетов программ, в которых предстоит работать. Примерный список для новичка:

  • Adobe Illustrator — нужен для подготовки векторных изображений, которые будем анимировать;
  • Adobe Premiere Pro или аналоги — для несложного монтажа;
  • Adobe After Effects — супер программа для анимации и монтажа. Возможностей у нее просто не счесть! Must have любого моушен дизайнера. 
  • Cinema 4d — программа для трехмерной анимации. Её преимущество по сравнению с другими 3D редакторами в том, что она легко взаимодействует с Adobe After Effects.

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

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

 

Какие направления включает в себя Motion Design

Моушн дизайн включает в себя множество направлений. Давайте рассмотрим несколько из них с примерами: 

1. Покадровая анимация

Этот метод оживления пришел из мультипликации, здесь каждый кадр прорисовывается отдельно  как при создании старых мультфильмов (например “Ну, погоди”).
Это непростая и долгая работа, но иногда результат стоит того:


Fears from Nata Metlukh on Vimeo.


2. Стоп-моушн

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

Buhito from Maria T. Domenech on Vimeo.



McDonald’s Made of Love — Beef (DC) from EMENES GmbH on Vimeo.



Starbucks Coffee Perfection from Rogier Wieland on Vimeo.


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

 

3. Шейповая анимация (shape motion)

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

What is Branding? from David Brier on Vimeo.


Фигуры можно преобразовывать и так:

KST — Factory from Homeboy on Vimeo.


Ну а это уже использование векторных изображений (они же тоже их фигур))

Explainer / Optimized Checkout from Artemii Pogodin on Vimeo.


В дополнение к шейпам добавился такой тренд, как liquid motion — движение жидкости. Этот стиль подразумевает «перетекание» одного элемента в другой, сопровождается брызгами, каплями или волнами.

Autentica Cuba from Daniel Mikhailov on Vimeo.


4. Трехмерная анимация

Все можно сделать объемным и конечно же анимировать. Смотрится очень эффектно:


Isometric motion graphics from Gennady Dobrynin on Vimeo.



 

Изучайте этот прекрасный мир, смотрите хорошие работы и творите новые прекрасные анимации!

 

Как Motion Design изменил мою жизнь

С 2001 года я работал дизайнером и композером на телевидении и в многих киевских постпродакшенах, а также более семи лет был совладельцем и организатором студии Baker Team, там мы делали много рекламы и сотрудничали с топовыми киевскими продакшенами для таких известных брендов, как Philip Morris, Oriflame, Nestle, Seiko, Unicef, Philip Morris, Yota, Intel и многих других.

В нашем офисе работали Максим Гудин, Алексей Сидоренко, Женя Яровой и другие крутые перцы.
Но пришло время, и я решил завершить работу студии, и одной из причин сделать это было то, что нам не удавалось выйти на рынок за пределы Украины, хоть наше качество и цены позволяли.
Тогда я еще не понимал, как нужно было делать этот процесс правильно. И я остановился перед выбором, снова нести резюме в очередную студию или попробовать что-то новое. Теперь я работаю удаленно по всему миру. Сотрудничаю и получаю приглашения на проекты от таких студий как The Mill, We Are Royalle, Buck, Brand New School, Aixponza, Mans vs Machine, Shapes and Forms, Loop и многих других.

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

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

Выбор направления

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

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


AlexMaltsev 2019

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


Не скучно и доходчиво на примерах и заданиях можно изучить все тонкости композиции в книге Ольги Голубевой.


А так же статья с полным разбором композиционных трюков и приемов сторителлинга TheCinematographyof «TheIncredibles” от Pixar.


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


Также, с позволения автора перевода, все три статьи есть на RENDER.RU.

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


AlexMaltsev 2019

Гениальная книга «ColorandLight» от Джеймса Гарни, поможет разобраться со всеми нюансами цвета и света, чтобы избежать банальных ошибок в своих работах.


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

С чего начать?
Первое время я рекомендую смотреть на чужие работы и стараться их повторить. Не стоит начинать с чистого листа, пока нет достаточного опыта. Это довольно сложный процесс, который под силу не каждому. Хороший дизайнер, никогда не начнет работу без референсов и примеров. Это можно сказать и про Моушн дизайнера. Необходимо найти хотя бы 1-2 схожие работы, прежде чем приступить к работе. Это очень упростит процесс создания анимации. Сейчас есть целые сервисы, где художники черпают вдохновение и делятся своими работами. Я использую behance, pinterest, motiongrapher и профильные каналы в инстаграм.


AlexMaltsev 2019

Студия или фриланс?

Так что же все-таки лучше, тепленькое местечко в студии или фриланс?
И там, и там, есть свои плюсы и минусы. В команде очень быстро обучаешься и перенимаешь опыт у коллег по цеху. Работая командой, легче создать что-то крутое, а главное, получится намного быстрее, чем в одиночку. Но есть и свои минусы, если ты работаешь “на дядю”. Ты не можешь выбирать проекты, над которыми тебе интересно работать. Тебе дали задачу, и ты ее делаешь. Ты не можешь влиять на свой заработок. Но я очень рекомендую сперва поработать в компании, а потом уже идти на фриланс.
На фрилансе достаточно своих плюсов. Ты выбираешь когда работать и сколько работать. Ты сам находишь себе клиентов и выбираешь, с кем работать а с кем лучше не связываться).
Сейчас я делаю проекты только те, которые мне интересны и не ставлю перед собой хватать все подряд что предлагают любой ценой. И считаю это самым большим достижением в моей профессиональной карьере.

Перспективы
Мир анимации и моушн графики — это океан возможностей и перспектив. Существует множество разных стилистик, разных направлений анимации. Эта профессия хороша тем, что тебе постоянно приходится учиться, и экспериментировать чтобы оставаться в тренде и не пасти задних. Можно быть специалистом широкого профиля или наоборот, делать анимацию только в одном стиле. Всегда найдутся желающие на тот или иной стиль анимации. Моушн дизайнер, довольно молодая профессия и рынок испытает кадровый голод.
В месяц я получаю примерно от 3 до 6 приглашений на проект, но выбираю обычно одно.
Я имел определенный багаж знаний и опыта, но пришлось учиться заново и более осознанно подходить к выполнению задач. Я сделал упор на изучение новых и более эффективных техник создания визуализаций, изучения нового софта, а также заполнению пробелов в теоретических знаниях. Около года я потратил на изучение синемы 4д и ее возможностей. Я не посещал курсы и у меня не было учителей, всей информации хватает в интернете бесплатно.
Сколько себя помню, всегда работал и понимал в Maya, это реально крутой софт и я против него ничего не имею, но я как дженералист чувствовал ограничения, особенно в том что касалось процедурных анимаций. И если я решил все делать сам, мне нужен был комбайн,
Cinema4d оказалась идеальным решением.


Переход был очень болезненным, так как и многие новые инструменты и сама философия мне казалась чуждой. Но с каждым новым уроком от Грейскей Горилла, Добромира Дьянкова, и Рафаеля Рау, боль становилась все меньше и примерно через год я наконец то почувствовал уверенность от работы в Синеме.
Я слышал что существует GPU рендер под названием Октан, и на тот момент это была экзотика для меня и достаточной информации о нем я не находил. Однажды я увидел на вимео видео не очень известного на тот момент артиста Somei с его роликом для Oppo.

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

Завел инстаграм и начал выкладывать зачем-то свои первые тестовые рендеры.


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


Alex Maltsev 2019

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


AlexMaltsev 2019

Я опубликовал эту картинку в группе октан на фейсбуке и оказалось, что результат понравился не только мне. )

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

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

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

Cinema4d это как уютная песочница с игрушками, в которой никогда не бывает скучно. Очень нравится экспериментировать с партиклами, рендер движками и новыми инструментами для создания графики. Очень сложно за всем успеть, но мне кажется если перестать интересоваться новинками, очень легко выпасть из этого скоростного экспресса.
Следующим скорее всего логическим этапом развития, стала покупка и погружение в x-particles. Вот один из моих первых тестов, когда я пытался разобраться с модификатором xp-branch:


AlexMaltsev 2019

Потом я создал несколько хайрез картинок из этого проекта и оформил все на своем бехансе под названием Dope, который стал одним из самых интересных проектов в моем портфолио на данный момент.

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


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

Несколько советов

— не ищите мотивацию

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

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

— знайте себе цену

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

— management

Не берите много проектов одновременно, я обычно работаю только над одним, максимум два.

— будьте на связи

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

— берегите нервы

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


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

5 причин, по которым моушн дизайн помогает вам общаться с людьми / ХабрПривет, Хабр! Представляю вашему вниманию перевод статьи «5 Reasons Motion Graphics Help You Connect With People» автора Katy French.

Оригинал статьи: Katy French | Перевод статьи сделал моушн дизайнер Игорь Царёв

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

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


Касательного этого формата может возникнуть некоторая путаница. Это что, видео? Это что, мультики? В основном, моушн дизайн – это термин нашей индустрии для анимированного видео. Это могут быть 2D-анимации, 3D-рендеринги или GIF-файлы.

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

Пример: мы создали этот простой моушн дизайн, чтобы помочь объяснить, как работает приложение Google Calendar для приложения Quickbooks.

Как моушн дизайн помогает брендам?


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

Все больше медиа-платформ поддерживают видео, и люди начинают предпочитать — если не ожидать – информацию, которая будет доставляться в этой упаковке. (Согласно опросу 2014 года Levels Beyond survey, 40% потребителей сказали, что они скорее будут смотреть видео бренда, чем читать ту же информацию.)

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

  • Традиционная реклама: онлайн или телевизионная реклама (национальная или региональная).
  • Промо-ролики: вирусные ролики, практические кейсы, отзывы, обзоры продуктов — всё, что рекламирует вашу работу или бренд. Могут быть редакционными или рекламными.
  • Объяснительные видео (эксплейнеры): введение, обзор, процессы, учебные пособия (туториалы) для продуктов, услуг или идей.
  • Видео культурного маркетинга: контент для демонстрации вашего бренда, людей или проекта.
  • Видео контент для привлечения подписчиков в социальных сетях: Facebook, Instagram, Snapchat, YouTube и т. д. Может быть образовательным или чисто развлекательным. (По данным Tubular Insights, 46% потребителей заявили, что сделали покупку в результате просмотра видео бренда в социальных сетях.)
  • Рекламно-информационные материалы: информация о компании, о продукте или всё, что департамент продаж регулярно передает. (Превращение этой информации в моушн дизайн может сэкономить время и энергию.)

5 самых больших преимуществ моушн дизайна


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

1. Он эмоционально увлекателен


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

(Вот почему вы испытываете физический страх в фильме ужасов или радость в романтических комедиях.)

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

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

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

2. Моушн дизайн доносит только самую суть, делая информацию легкой для понимания


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

(Исследование MIT 2014 года показало, что вы можете обрабатывать визуальную информацию всего за 13 миллисекунд.)

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

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

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

3. Моушн дизайн — это пассивный опыт


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

(Помните, что большинство потребителей предпочитают смотреть, а не читать.)

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

4. Возможность использовать моушн дизайн в разных областях


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

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

Пример: еще в 2011 году мы создали удобный моушн дизайн для объяснения ценности визуализации данных. Как эксперты по визуализации данных, мы хотели что-то такое, что позволило бы разбить концепции всех: от дизайнеров до маркетологов брендов. Это видео остается одним из наших самых популярных, и мы постоянно ссылаемся на него в нашем контенте—целых 6 лет спустя.

5. Моушн дизайн великолепен, когда у вас мало времени


Большая часть моушн дизайна длятся от 30 секунд до 3 минут, что невероятно полезно, когда вам нужно произвести эффект как можно скорее. (Это особенно полезно в социальных сетях. Согласно исследованию Facebook 2015 года, даже просмотр менее 10 секунд видео может помочь повысить узнаваемость бренда и сформировать намерение о покупке.)

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

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

Пример: мы сотрудничали с NBC Universal для создания моушн дизайна, призывающего американцев сократить объёмы бытовых отходов. Вместо пространной статьи, это 45-секундное видео включало данные Совета по защите природных ресурсов и быстрый совет, чтобы помочь зрителям.

Как начать делать моушн дизайн


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

Топ-10 курсов по моушн-дизайну — CheckROI

  • Профессии
    • Профессии в аналитике Профессии в дизайне Профессии в маркетинге Профессии в менеджменте Профессии в программировании Все Профессии

      Кто такой UX-аналитик

      Профессии

      Профессия Data-маркетолог: чем занимается специалист по дата-маркетингу, сколько…

      Профессии

      Кто такой HR-аналитик

      Профессии в дизайне

      Профессия «Дизайнер текстильного интерьера»: подробное описание и обзор

      Профессии в дизайне

      Профессия «флорист»: подробное описание и обзор

      Профессии в дизайне

      Профессия «фотограф»: подробное описание и обзор

      Профессии в дизайне

      Кто такой художник по рекламе

      Профессии в маркетинге

      Head of SMM: кто это и чем занимается,…

      Профессии в маркетинге

      Профессия блогер: как использовать силу соцсетей для обогащения?

      Профессии в маркетинге

      Кто такой директор по маркетингу

      Профессии в маркетинге

      Профессия «контент-мейкер в спорте»: подробное описание и обзор

      Профессии в менеджменте

      Мастер презентации и публичных выступлений: подробное описание и…

      Профессии в менеджменте

      Профессия «руководитель отдела продаж»: подробное описание и обзор

      Профессии в менеджменте

      Профессия «онлайн-преподаватель»: подробное описание и обзор

      Профессии в менеджменте

      Специалист по управлению персоналом: какие функции выполняет, каким…

      Профессии в программировании

      Профессия «Go-разработчик»: подробное описание и обзор

      Профессии в программировании

      Специалист по GIT: зачем нужна система управления версиями

      Профессии в программировании

      Профессия VoIP-инженер: специалист по настройке IP-телефонии

      Профессии в программировании

      Кто такой IT-рекрутер

      Профессии

      Профессия «Дизайнер текстильного интерьера»: подробное описание и обзор

      Профессии

      Мастер презентации и публичных выступлений: подробное описание и…

      Профессии

      Профессия «флорист»: подробное описание и обзор

      Профессии

      Профессия «фотограф»: подробное описание и обзор

  • Онлайн-курсы
    • Курсы для бизнеса Курсы по дизайну Курсы по маркетингу Курсы по программированию Все Курсы для бизнеса

      Топ-10 курсов по управлению командами

      Курсы для бизнеса

      Топ-12 курсы по управлению на Agile: Scrum, Kanban,…

      Курсы для бизнеса

      Топ-10 курсов для финансистов

      Курсы для бизнеса

      Топ-3 курса по работе с персоналом в спортивной…

      Курсы по дизайну

      ТОП-8 курсов Tilda: создание сайтов с нуля

      Курсы по дизайну

      Топ-11 курсов для 3D-дизайнеров

      Курсы по дизайну

      Топ-10 курсов по ландшафтному дизайну

      Курсы по дизайну

      Топ-6 курсов по сервисному дизайну

      Курсы по маркетингу

      Топ-11 курсов по сквозной аналитике

      Курсы по маркетингу

      Топ-9 курсов по контент-менеджменту

      Курсы по маркетингу

      Топ-6 курсов для директоров по маркетингу

      Курсы по маркетингу

      Топ-7 курсов по созданию спортивного контента

      Курсы по программированию

      Топ-6 курсов для VR & AR-разработчиков

      Курсы по программированию

      Топ-3 курса по компьютерному зрению (Computer Vision)

      Курсы по программированию

      Топ-5 курсов по Power BI

      Курсы по программированию

      Топ-10 курсов по тестированию мобильных приложений

      Онлайн-курсы

      Летние скидки в Skillbox

      Онлайн-курсы

      Топ-11 курсов по сквозной аналитике

      Онлайн-курсы

      Топ-10 курсов по управлению командами

      Онлайн-курсы

      Топ-12 курсы по управлению на Agile: Scrum, Kanban,…

  • Рубрики
    • Soft Skills Аналитика Базовые понятия Бизнес и управление Менеджмент проектов Продажи ВКонтакте Дизайн Бренд дизайн Веб-дизайн Графический дизайн Дизайн интерьеров Инстаграм Интернет-маркетинг Email-маркетинг SEO SMM Контекстная реклама (PPC) Копирайтинг Фриланс Программирование Все Soft Skills

      «Google Таблицы»: гайд для простых людей

      Аналитика

      Профессия аналитик: обязанности, зарплата, где учиться и как…

      Аналитика

      Профессия Web-аналитик: кто такой и чем занимается, зарплата…

      Базовые понятия

      Типизация в программировании или как выбрать свой язык

      Базовые понятия

      Стоимость привлечения клиента (CAC): расчет и формулы

      Базовые понятия

      Как рассчитать LTV: формула и пример расчёта жизненной…

      Базовые понятия

      Что такое CPS (PPS): показатель, формула расчёта, модель…

      Базовые понятия

      Что такое CTR: формула расчета, примеры и среднее…

      Базовые понятия

      Какая формула расчета CPM в рекламе и маркетинге?

      Базовые понятия

      Что такое CPC и какая формула расчета?

      Базовые понятия

      Что такое CPA и какая формула расчета CPA…

      Бизнес и управление

      Как составить коммерческое предложение, чтобы увеличить свои шансы

      Бизнес и управление

      Ведение деловых переговоров: этапы, техники, лайфхаки

      Бизнес и управление

      Лид-магнит: что это, основные виды + примеры и…

      Бизнес и управление

      Сегментация целевой аудитории: Топ-5 методов

      Бизнес и управление

      Что такое Call-to-action (CTA): виды призывов к действию…

      Бизнес и управление

      Как определить целевую аудиторию для любой сферы

      Менеджмент проектов

      Лид-магнит: что это, основные виды + примеры и…

      Менеджмент проектов

      Сегментация целевой аудитории: Топ-5 методов

      Менеджмент проектов

      Что такое Call-to-action (CTA): виды призывов к действию…

      Менеджмент проектов

      Как определить целевую аудиторию для любой сферы

      Продажи

      Как составить коммерческое предложение, чтобы увеличить свои шансы

      ВКонтакте

      Таргетинговая реклама в социальных сетях: что это такое…

      ВКонтакте

      Как сделать пост ВКонтакте, чтобы его дочитали до…

      ВКонтакте

      Размеры оформления контента ВКонтакте

      ВКонтакте

      Как сделать статью в ВК: пошаговая инструкция от…

      ВКонтакте

      Лучшее время для публикации поста Вконтакте

      ВКонтакте

      20 универсальных тем и идей для постов Вконтакте

      ВКонтакте

      Рекламный пост Вконтакте: лучшие идеи + примеры

      ВКонтакте

      Сервисы и генераторы для розыгрышей и конкурсов в…

      Дизайн

      Инфографика: что это, где брать и как научиться…

      Дизайн

      Цветовой круг Иттена: что это такое и как…

      Бренд дизайн

      Цветовой круг Иттена: что это такое и как…

      Веб-дизайн

      Цветовой круг Иттена: что это такое и как…

      Графический дизайн

      Цветовой круг Иттена: что это такое и как…

      Дизайн интерьеров

      Цветовой круг Иттена: что это такое и как…

      Инстаграм

      Что такое Инстаграм и зачем он нужен

      Инстаграм

      Как оформить аккаунт Инстаграм для успешного продвижения: подробное…

      Инстаграм

      Работа с блогерами в Инстаграм в 2020: influence-marketing

      Инстаграм

      Как продвинуть пост в Инстаграм

      Инстаграм

      Как написать развлекательный пост в Инстаграм: инструкция, идеи…

      Инстаграм

      Информационный пост в Инстаграм: идеи + примеры +…

      Инстаграм

      Контент-план для Инстаграм: руководство + примеры + инструменты

      Инстаграм

      Размеры в Инстаграм в 2020: фото, видео, текст,…

      Интернет-маркетинг

      Продвижение «ВКонтакте»: 25 советов + 20 сервисов, упрощающих…

      Интернет-маркетинг

      Особенности продвижения в одноклассниках: аудитория, товары, методы раскрутки

      Интернет-маркетинг

      Интернет-маркетинг

      Полный список работ по продвижению сайта в современных…

      Интернет-маркетинг

      Продвижение в Instagram 2020: пошаговая инструкция для начинающих

      Интернет-маркетинг

      Как найти и удалить дубли страниц на сайте:…

      Интернет-маркетинг

      SMM в VK: особенности соцсети + пошаговая инструкция…

      Интернет-маркетинг

      Что такое SMO (Social Media Optimization) оптимизация сайта?

      Email-маркетинг

      Email-маркетолог: кто это и чем занимается, зарплата и…

      Email-маркетинг

      Как писать e-mail рассылки

      SEO

      Полный список работ по продвижению сайта в современных…

      SEO

      Как найти и удалить дубли страниц на сайте:…

      SEO

      Что такое зеркало сайта и как указать поисковикам…

      SEO

      Как сделать комплексный технический аудит сайта?

      SEO

      Как установить на сайт код Google аналитики

      SEO

5 шагов по внедрению моушен-дизайна в вашу дизайн-систему

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 5 шагов по внедрению моушен-дизайна в вашу дизайн-систему

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

  1. Восторг пользователей: Движение может превратить стандартный опыт в запоминающееся взаимодействие.
  2. Обучение пользователей: Движение может предоставлять контекст и информацию, не требуя действий, таких как дополнительные клики.
  3. Концентрация внимания пользователей: Движение может привлечь внимание и выделить важный фрагмент данных или ключевой элемент интерфейса.

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

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

Шаг 1 – Начните с аудита

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

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

Когда вы начинаете аудит, обратите внимание на следующие паттерны:

  • Кривые синхронизации
  • Типы использования (фокус, информирование)
  • Паттерны хореографии (количество объектов в движении)
  • Паттерны эффектов (масштаб, непрозрачность и т.д.)
  • Флоу в которых отсутствует движение
  • Флоу, в которых движение слишком тяжелое

Аудит может быть таким простым. Например, в виде таблицы паттернов:

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 5 шагов по внедрению моушен-дизайна в вашу дизайн-систему

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

Шаг 2 – Создание руководящих принципов

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

Чтобы найти правильный баланс, рассмотрите принципы, которые контекстуально направляют улучшения UX: где нужны более сильные возможности и фидбек действий? Где возникают проблемы при обучении новых пользователей? Или где пользователи дезориентированы в нашей навигации?

Вот некоторые из наиболее эффективных принципов движения, которые команды масштабирования использовали для реализации движения в своих системах:

В попытке стандартизации Material Design определил три принципа для движения: информативный, сосредоточенный и выразительный. Затем команда определила четыре варианта использования каждого из трех принципов: иерархия, фидбек, статус и анимация персонажа.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 5 шагов по внедрению моушен-дизайна в вашу дизайн-систему

IBM считает, что движение может быть описано как выразительное или продуктивное. Это в основном относится к состояниям открытия / закрытия (например, переключатели или модальные окна), но они могут быть использованы в других случаях, когда быстрое движение более надежно, чем причудливое выразительное движение.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 5 шагов по внедрению моушен-дизайна в вашу дизайн-систему

Salesforce следует аналогичному паттерну, создавая блок только для «Личности и брендинга». Вместо того, чтобы интегрировать индивидуальность бренда во все анимации, они позволяют своему брендовому моушен-дизайну быть контекстным.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 5 шагов по внедрению моушен-дизайна в вашу дизайн-систему

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

Шаг 3 – Разработка строительных блоков

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

Эти блоки состоят из продолжительности, плавности, эффектов объекта (начальное / конечное состояния) и элегантной хореографии (анимация нескольких объектов).

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 5 шагов по внедрению моушен-дизайна в вашу дизайн-систему

Один из подходов к систематизации эффектов – сопоставление их с вашими принципами. Эта таблица показывает соотношение принципа, компонента, эффекта, продолжительности и плавности.

Продолжительность

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 5 шагов по внедрению моушен-дизайна в вашу дизайн-систему

Подобно тому, как вы назначаете типографику с помощью тегов h2, h3, h4, h5, h5, вы можете назначать теги следующим масштабам: t1, t2, t3, t4, t5 (t значит продолжительность). Вы также можете выбрать описательные имена, такие как: «Очень быстро», «Быстро», «Нормально», «Медленно», «Очень медленно» и т. д. Временные шкалы могут включать как продолжительность, так и плавность. Однако чаще всего продолжительность и плавность движения зависят от объекта, его размера и пройденного расстояния.

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

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

  • На основе объектов: кнопки / небольшие компоненты = 100MS – 200MS, переходы страниц = 500MS – 700MS
  • Размер и расстояние: Движение составляет 100MS на каждые 10% движения области просмотра
  • Сложность анимации: переходы, где последовательность из 2-5 объектов анимации = 300-400MS; 6-10 объектов анимации = 500-700MS

Плавность (Easing)

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

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

Постоянные вибрации движения могут быть такими же простыми, как документирование 2–3 типов плавности кривых Безье: default-ease (custom), ease-in, and ease-out

Называя тип плавности, вы можете либо назвать его по продолжительности, например, «T1-subtle-spring», либо интегрировать плавность в шкалу времени: «t1 uses cubic-ease», «t2 uses linear ease».

Другая стратегия состоит в том, чтобы исходить из компонентов или их состояний «in / out». Например, вы можете использовать Productive Easing (продуктивная плавность) для функциональных, быстрых, линейных движений и использовать Expressive Easing (экспрессивная плавность) для восхитительных движений, управляемых эмоциями.

Часто бывает, что экспрессивная плавность наиболее целесообразна для анимации появления, а продуктивная для анимации исчезания с экрана. Модальные всплывающие окна, тумблеры, карточки и переходы часто используют как экспрессивную, так и продуктивную плавности.

Эффекты

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

Чтобы систематизировать эти эффекты, вы можете использовать имена, которое описывают их в связках или которые описывают их как состояния при появлении и исчезновении с экрана.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 5 шагов по внедрению моушен-дизайна в вашу дизайн-систему

Когда вы документируете эти эффекты, используйте описательные имена, например, «Card-Fade-In» или «Card-Grow», или используйте звукоподражание. При использовании звукоподражания выразительный переход страницы может называться pop, swoosh или boom (ознакомьтесь с Keynote slide transitions или панелью эффектов After Effect).

Хореография

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

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

  • Простое и сложное: небольшое количество объектов в движении может быть основано на контейнере, что означает, что блоки содержимого внутри контейнера перемещаются в зависимости от него.
  • Основывайтесь на принципах: фокусируйте пользователей на объекте, чтобы показать контекст навигации или показать пространственный контекст, например, где найти кнопку.
  • Повествование: на разных этапах пользовательского путешествия усложните хореографию: новый пользователь видит 2-3 объекта в движении, а опытный пользователь видит 4-8 объектов.
  • Доступность: предложите настройки для уменьшения интенсивности движения или сохранения движения в контейнерах, а не в элементах.

Шаг 4 – Подготовка спецификаций перевода

Дизайнеры должны переводить файлы в соответствии с рабочим кодом. Самый простой способ документировать анимацию – это отобразить начальное и конечное состояния. Это предпосылка формирования ключевых фреймов – для интерполяции изменений между состоянием A и состоянием B.

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

Существует два эффективных метода документирования концепций движения: диаграммы и текст.

Метод 1: Характеристики диаграммы

Вы обычно можете открыть панель настроек любимого приложения и сделать скриншот или вручную документировать график (так же, как диаграмму Ганта).

Графики помогают четко обозначить хореографию и продолжительность.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 5 шагов по внедрению моушен-дизайна в вашу дизайн-систему

Диаграмма выше показывает длительность (мс) и перекрытие последовательностей анимации, а также:

  • Цвет: объект (цвет координирует эффект с временной шкалой)
  • Метки: тип преобразования (масштаб, перемещение, поворот и т. д.), продолжительность (мс), имя объекта
  • Формы (начало / конец): тип плавности

Метод 2: Характеристики текста

Этот второй подход похож на код, но дизайнеры не должны бояться говорить слово «код». Это может быть так же просто, как обучение:

  • Непрозрачность: определяется в процентах: 0% – 100%
  • Масштаб: определяется в единицах или процентах: 1px, 2000px, 0 – 100%
  • Высота подъема: ось Z: 0, 1, 2 и т.д.
  • Движение: x и y координаты (также может быть % высоты и ширины экрана)
  • Цвет: HEX значения

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

В After Effects есть плагин Inspector Spacetime, который переводит свойства ключевого фрейма в текстовый файл.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 5 шагов по внедрению моушен-дизайна в вашу дизайн-систему

Для продвинутых концепций движения, таких как физика, акселерометры, системы частиц или 3D-модели, требуется более ручной процесс, чтобы найти перевод 1: 1. Обсуждение поможет понять параметры кода, даст правильную стратегию дизайна.

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

Начните использовать движение

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

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

Motion Design в цифровом опыте будущего

Дизайн Глеб Кузнецов • 22 октября 2018 г. • 7 минут ЧИТАТЬ

Когда дизайнеры создают продукты, они рассказывают истории пользователям. У дизайнеров есть много инструментов, чтобы сделать историю более интересной. Motion Design — один из самых мощных инструментов, который есть у дизайнеров. Истинную силу движения можно увидеть в мобильных опытах. Мобильное приложение без движения — это просто последовательность независимых экранов.Но когда дизайнеры внедряют движение, происходит нечто волшебное — дизайн оживает — приложение становится интерактивной историей, которая может заинтересовать пользователей.

Сегодня мы исследуем концепцию проектирования движений в интерфейсах будущего с помощниками искусственного интеллекта (ИИ).

Строим будущее искусственного интеллекта

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

Building the future state of Artificial Intelligence Building the future state of Artificial Intelligence

Автомобильный ИИ визуальный дизайн Глеб Кузнецов .

Текущее состояние дизайна ИИ имеет два основных недостатка:

  • Обратная связь, предоставляемая системой, не очень информативна. Непонятно, как система обрабатывает ваш запрос или что именно происходит с информацией.
  • Обратная связь, предоставляемая системой, не передает эмоций. Это робот. Когда пользователь взаимодействует с такой системой, он чувствует, что дает команды компьютеру. Единственное отличие от традиционного графического интерфейса состоит в том, что для команды используется другой носитель (голосовой или клавиатурный ввод).
Дизайнеры

пытаются решить эти проблемы и заставить машины выглядеть и чувствовать себя живыми.

Online Email Template Builder

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

Попробуйте бесплатные другие продукты

Вот как мы можем достичь этого с помощью движения:

VUI, который строит доверие

Будущее состояние систем искусственного интеллекта будет определять приоритеты VUI, который создает доверие. Доверие помогает построить мост между человеком и машиной. Если доверие отсутствует, пользователи вряд ли будут взаимодействовать с системой. Одним из наиболее важных аспектов укрепления доверия является предоставление пользователям чувства контроля. Видимость состояния системы, пользовательский контроль и свобода — 2 из 10 эвристик юзабилити для дизайна пользовательского интерфейса, придуманных Якобом Нильсеном, все еще применимы к проектированию VUI.

Но что это значит в контексте системы ИИ? Система должна реагировать на запрос пользователя с соответствующей обратной связью. Эта обратная связь должна дать пользователям полное понимание того, что делает система.

Визуальная обратная связь при вводе пользователем

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

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

Artificial Intelligence UI design Artificial Intelligence UI design

Проектирование интерфейса искусственного интеллекта для Rokid.

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

С помощью динамической визуальной коммуникации можно достичь глубокого погружения. Давайте посмотрим, как это работает на практике; движение может быть использовано для подтверждения действий. Обратите внимание на пример «Распознавание голоса» из тематического исследования Rokid.Визуальная обратная связь делает это очевидным, когда система слышит пользователя, потому что звуковая волна становится видимой только тогда, когда пользователь предоставляет команду. Второй пример — «Системный графический интерфейс». Обратите внимание, что круг делает горизонтальное движение, чтобы обозначить ответ «Нет».

Motion can reinforce the actions a user is performing. Motion can reinforce the actions a user is performing.

Движение может усилить действия, выполняемые пользователем. Иллюстрации из интерфейса системы Rokid Alien.

ясности для государственных изменений

Изменения состояния в пользовательском интерфейсе часто по умолчанию предусматривают жесткие сокращения — пользователи видят только два состояния — первый экран, который принимает пользовательский ввод, и второй экран с результатами.Резкие изменения затрудняют отслеживание изменений состояния и увеличивают когнитивную нагрузку (дополнительная мощность мозга для создания связи между двумя состояниями).

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

Clarity for state changes Clarity for state changes

Персональный AI помощник движения Глеб Кузнецов .

Процесс Делания (POD)

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

The system is proceeding user request and show this animated effect. The system is proceeding user request and show this animated effect.

Система обрабатывает запрос пользователя и показывает этот анимированный эффект. Изображение: Глеб Кузнецов .

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

Концепция POD (процесс выполнения) помогает дизайнерам достичь этой цели. Motion Design заполняет пробел в понимании, давая пользователю понять, что должно произойти. Вот как это работает:

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

Как мне разработать POD для моего продукта?

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

POD for pulling out files from Dropbox for Brain.ai POD for pulling out files from Dropbox for Brain.ai

POD для извлечения файлов формы Dropbox для Brain.ai. Фото: Глеб Кузнецов.

интерфейс, который передает личность

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

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

Усилить силу мелких деталей

«Детали — это не детали. Они делают дизайн ».

Эта вечная цитата из Чарльза Имса напоминает нам, что каждая деталь в продукте влияет на то, как его воспринимают пользователи. Простое внимание к деталям часто является сигналом для пользователей, что люди, которые создают продукт, заботятся о них.Даже такие мелочи, как значок, могут сыграть значительную роль в пользовательском опыте.

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

Icon morphing animation for Rokid AI voice assistant Icon morphing animation for Rokid AI voice assistant

Значок морфируемой анимации для голосового помощника Rokid AI

Язык Движения

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

Motion language Motion language

Визуальный дизайн для будущего мобильного взаимодействия Глеб Кузнецов для мозга.аи.

AI, который чувствует человека

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

В видео 103EX Rolls-Royce демонстрирует, как дать искусственному интеллекту душу.Благодаря движению «Дух экстаза» (украшение капота на автомобилях Rolls-Royce) становится не просто декоративным элементом. Это становится естественной частью опыта, функциональным элементом, который будущие водители будут ассоциировать с автомобилем.

AI that feels human AI that feels human

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

Заключение

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

Как то, что вы читаете? Подпишитесь на наши главные истории.
,
Как графика движения влияет на пользовательский опыт

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

Источник

Что такое Motion Design?

Многие люди не знают, что именно означает термин «дизайн движения». Давайте немного проясним это. Прежде всего, термин «движущийся дизайн» является краткой формой «движущийся графический дизайн».

Как следует из названия, он состоит из трех элементов: движения, графики и дизайна. Это сочетание графики, которая движется в пространстве и времени.

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

  • анимационных фильмов,
  • видео,
  • анимированный текст,
  • веб-приложений.

motion design Источник

Дизайнеры используют различные программные и другие инструменты для создания графики движения. Adobe After Effects — один из самых популярных инструментов, используемых графическими дизайнерами, который позволяет создавать и изменять графику с добавленным элементом времени. Adobe Flash также используется для создания дизайна движений для веб-приложений. Другие профессиональные инструменты для работы с графикой включают Maxon Cinema4D и Softimage.

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

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

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

Почему важен графический дизайн Motion?

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

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

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

Вот некоторые методы, в которых маркетологи могут использовать графику движения для удовлетворения всех своих потребностей в коммуникации:

  • Традиционные объявления: Маркетологи могут использовать графику движения в онлайн-видео или телевизионной рекламе для демонстрации своей продукции.
  • Промо-ролики: В эту категорию включены все виды редакционных или рекламных роликов, таких как вирусные видеоролики, тематические исследования, отзывы, отзывы пользователей.
  • Видео объясняющего: Большинство людей используют движущуюся графику в видео объясняющего. Они включают в себя введение в новые продукты или услуги, обзоры, бизнес-процессы и учебные пособия.
  • Видео в социальных сетях: Еще одна популярная форма графики движения — это видеоролики в социальных сетях, созданные для привлечения последователей на таких социальных платформах, как Facebook, Instagram, Snapchat, YouTube и т. Д.Согласно исследованию Tubular Insights, 64% потребителей убеждены, что покупают продукт после просмотра видео в социальных сетях.

Как Motion Design может улучшить пользовательский опыт?

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

Согласно опросу, проведенному Wyz Owl, 81% предприятий используют видео в качестве маркетингового инструмента, потому что он стимулирует вовлечение и улучшает пользовательский опыт.

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

1. Создайте эмоционально увлекательный контент

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

motion design Источник

Промо-видео для Ой!

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

2. Помогает понять сложные процедуры

Графика движения

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

motion design Источник

Отличный пример этого можно увидеть в видеофильме с движением, разработанном The Nature Conservancy.

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

3. Отражает индивидуальность вашего бренда

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

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

Пример из другой статьи об анимированных логотипах

4. Они оказывают влияние в небольшой период

Большинство движущихся графических изображений располагаются в диапазоне от 30 секунд до 3 минут, что очень полезно, когда вам необходимо оказать влияние в течение короткого периода времени.

Объяснение видео для Photo Creator

motion design Анимация о системах кибербезопасности от Агентства Фолио Иллюстрации

Графика движения использует возможности обработки информации обычного человека и позволяет вам оказывать значительное влияние при меньшем количестве контента.Что делает статью из 1500 слов, чтобы объяснить словами, можно визуально передать менее чем за 15 секунд. Это идеальная альтернатива для тех случаев, когда у вас меньше времени, чтобы оказать влияние.

Заключение

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

Об авторе: это гостевой пост Мехула Раджпута, генерального директора и соучредителя Mindinventory, фирмы по разработке и разработке мобильных приложений. Он занимается блоггингом как хобби, пишет о мобильных технологиях, дизайне приложений и разработке приложений.
Заглавное изображение из пакета Mirage в бесплатной векторной библиотеке Ouch

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

,

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *