Motion дизайн: какво е, с какви програми се прави и как се учи

Motion дизайнът е графичен дизайн, който се движи. Надписите в началото на филм, анимираното лого преди видео, обяснителният клип с икони и графики, бутонът, който леко подскача при натискане в приложение: всичко това е работа на motion дизайнер. Професията стои между графичния дизайн, анимацията и видеомонтажа и взема по нещо от всеки.

Къде се използва

• Видео и телевизия: заглавни надписи, графики в новини и спортни предавания, анимирани надписи с имена.
• Реклама и социални мрежи: кратки анимирани реклами, анимирани публикации.
• Обяснителни видеа: продукт или идея, разказани с анимирана инфографика.
• Интерфейси: преходи между екрани, индикатори за зареждане, микроанимации на бутони в сайтове и приложения.
• Бранд идентичност: анимирано лого и правила за движение на марката.

Основните понятия

Ключови кадри. Аниматорът задава стойността на свойство (позиция, размер, прозрачност, цвят) в определени моменти, а програмата изчислява междинните кадри. Изображението към този материал показва точно това: ромбовете във времевата линия на Blender са ключови кадри.

Плавност (easing). Предметите в реалния свят не тръгват и не спират мигновено. Анимация с постоянна скорост изглежда механична, затова движението се ускорява и забавя. Това се настройва с криви в графичния редактор на програмата.

Тайминг. Колко кадъра трае едно движение определя усещането: бързото изглежда енергично, бавното – тежко или спокойно.

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

Звук. Добрият motion дизайн често се прави в ритъм с музиката или звуковите ефекти.

С какви програми се работи

Blender е свободен софтуер с отворен код под лиценза GNU GPL. Разработчиците му изрично казват, че можете да го ползвате за всякаква цел, включително търговска и учебна. Това го прави разумна първа програма: всичко научено за ключови кадри и криви в него важи и другаде.

Lottie решава проблема как анимация от дизайнера да стигне до приложението, без да се превръща в тежко видео. Анимацията се прави в After Effects и се изнася с приставката Bodymovin като JSON файл, който библиотеките на Lottie възпроизвеждат в уеб, на Android и iOS, в React Native и в Windows. Така една и съща анимация работи навсякъде и остава векторна.

Достъпност: движение, което може да се изключи

Анимацията в интерфейсите има и обратна страна. W3C посочва, че анимираното съдържание разсейва някои потребители или им причинява гадене, а при нарушения на вестибуларния апарат (вътрешното ухо) – световъртеж и главоболие. Насоките за достъпност на уеб съдържанието WCAG 2.2 имат критерий 2.3.3 „Анимация при взаимодействие“ (ниво AAA): анимация на движение, предизвикана от действие на потребителя, трябва да може да се изключи, освен ако е съществена.

W3C предлага три начина да се изпълни: да се избягва ненужната анимация, да има бутон за изключването ѝ или да се спазва настройката за намалено движение в браузъра или операционната система. В CSS това е медийната заявка prefers-reduced-motion. Motion дизайнерът, който работи по интерфейси, трябва да предвиди как изглежда всяко движение и без анимация.

Как се учи

1. Основи на графичния дизайн. Композиция, типография и цвят са същите като в статичния дизайн. Ако ги нямате, започнете от графичния дизайн.
2. Ключови кадри и криви. Анимирайте прости форми: топка, която пада и отскача, квадрат, който се превръща в кръг. Тези упражнения учат тайминг и плавност по-добре от всеки сложен ефект.
3. Анимиран текст. Надписи, които се появяват и изчезват в ритъм.
4. Кратки завършени проекти. Анимирано лого, 15-секунден клип за социални мрежи, анимирана графика с данни.
5. 3D, ако ви привлича. Blender отваря и пътя към 3D анимацията. За професиите там вижте материала за 3D художника и гейм дизайнера.

Шоурийлът е вашата визитка

Motion дизайнерите се наемат по шоурийл: кратко видео, обикновено до минута-две, с най-силните моменти от работата им. Сложете най-доброто в началото, режете в ритъм с музиката и показвайте само неща, с които се гордеете. До шоурийла е добре да има и няколко отделни проекта с кратко описание каква е била задачата и какво точно сте направили.

Добрият курс по motion дизайн трябва да завършва именно с шоурийл и няколко такива проекта. Тъй като motion дизайнът и монтажът често вървят заедно, полезно е да владеете и основите на видеомонтажа.