Моушн-дизайн

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

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

Но что такое моушн-дизайн? Вот руководство по моушн-дизайну, почему это важно и как начать его использовать.

Что такое моушн-дизайн?

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

Вот тут-то и появляется моушн-дизайн, иногда называемый анимационной графикой или моушн-графическим дизайном. Моушн-дизайн использует элементы анимированного графического дизайна (и, возможно, звук) для передачи сообщений. Общество экспериментального графического дизайна (SEGD) описывает его как «дисциплину, которая применяет принципы графического дизайна к кинопроизводству и видеопроизводству посредством использования анимации и визуальных эффектов». Хотя SEGD занимается кинопроизводством и видеопроизводством, он также широко представлен в Интернете и на мобильных устройствах.

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

Чем моушн-дизайн отличается от анимации?

Анимация — это общий термин, который охватывает все виды анимационных форматов, такие как пластилин, мультфильмы, аниме, 3D-анимация и так далее. Так где же моушн-дизайн вписывается? Это зависит от того, кого вы спрашиваете.

Некоторые люди думают, что моушн-дизайн — это разновидность анимации. Остин Шоу, профессор Motion Media Design, называет это формой анимации в книге «Дизайн для движения» . Другие, такие как Брайан Стоун и Лия Уолин в «Теории и практике моушн-дизайна» , называют это синтезом анимации, визуальной коммуникации, звука и других дисциплин.

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

Общая анимация обычно:

• Охватывает широкий спектр техник и стилей.
• Можно больше сосредоточиться на рассказывании историй
• Имеет тенденцию быть длиннее

Моушн-дизайн обычно:

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

Почему моушн-дизайн?

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

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

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

Почему моушн-дизайн важен в UI/UX

Голосовой поиск Google отображает анимированные элементы, пока вы говорите, чтобы вы знали, что он активно слушает.

• Оставьте отзыв. Анимация сообщает пользователю, когда произошло или происходит успешное (или неудачное) взаимодействие. Например, вспомните случай, когда вы использовали голосовой поиск Google или любой другой голосовой помощник. Как правило, вы увидите элементы, которые анимируются, когда вы говорите, давая вам знать, что веб-сайт или приложение активно слушают.
• Показывать состояния загрузки. Задержки во времени загрузки веб-сайта могут повлиять на коэффициент конверсии . Показ анимации (например, индикатора выполнения или индикатора загрузки) привлекает пользователей и снижает вероятность того, что они уйдут.
• Дайте навигационные подсказки . Анимация помогает пользователям подсказать, куда идти дальше. Например, в меню боковой панели со значками-гамбургерами значок гамбургера может быть анимирован в кнопку «закрыть» при открытии меню. Это позволяет пользователям знать, что они могут нажать на значок, чтобы закрыть меню.
• Показывать связь между состояниями. Для многоэтапных процессов, таких как экраны адаптации, использование анимации (например, слайдера, показывающего ваш прогресс) дает пользователям контекст того, как связаны между собой различные состояния.

Каждое приложение, веб-сайт или продукт, на который вы смотрите, включает в себя движение как часть продукта — от анимации кнопки «Нравится» в Твиттере до анимации, которую вы видите после отправки письма с любой цифровой платформы. Это дает пользователю подтверждение того, что задача выполнена, тогда как статические значки и PNG создают у пользователя ощущение, что продукт перестал работать или застопорился после их действия. Когда вы сравниваете, например, одно и то же приложение с интерактивной анимацией и без нее, статичный продукт выглядит «мертвым». – Махфуз Али, старший моушн-дизайнер Lottie.

Почему движение имеет значение в маркетинге

• Вызывать эмоции. Анимация оживляет статичных персонажей и элементы, что облегчает эмоциональную связь пользователей.
• Увеличение вовлеченности. Движение увеличивает вероятность того, что пользователи будут взаимодействовать с вашим контентом. Например, The Guardian использовала анимацию Лотти для интерактивного материала о британской дикой природе . По данным BuzzSumo, этой страницей поделились более 2000 человек в Facebook!
• Увеличение конверсии. Активные пользователи с большей вероятностью совершат конверсию. Эффективное использование анимации потенциально может привести к более высокому доходу.
• Будьте более запоминающимися: движущиеся изображения запоминаются легче , чем статические. Использование движения в вашем брендинге (например, анимированных логотипов) — это простой способ сделать ваш бренд более запоминающимся.
• Расскажите историю своего бренда. Как вы решаете, какой бренд купить? Часто речь идет о том, как вы относитесь к бренду, а не о том, что вы думаете о его продуктах. С помощью движения вы можете рассказать своим пользователям, на что похож ваш бренд – будь то игривый, инновационный, изысканный, причудливый и т. д., посредством визуального повествования.
• Обеспечьте захватывающий опыт. Motion обеспечивает захватывающий опыт и упрощает понимание плотной информации. Например, Vividbooks объединяет анимацию Lottie и дополненную реальность для создания интерактивных учебников. Каждый урок превращает образовательный контент в увлекательный, захватывающий опыт для учащихся – без движения это было бы намного сложнее.

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

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

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

1. Изучите основные принципы графического дизайна.

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

2. Изучите 12 принципов анимации.

В 1981 году аниматоры Диснея Олли Джонстон и Фрэнк Томас предложили 12 основных принципов анимации в своей книге « Иллюзия жизни: анимация Диснея» . Первоначально они применялись к анимации персонажей, но затем были приняты моушен-дизайнерами. Эти принципы включают в себя:

• Сквош и растяжка
• Ожидание
• Постановка
• Прямолинейное действие и поза в позу
• Последующие и перекрывающиеся действия
• Медленно и медленно
• Дуга
• Вторичное действие
• Тайминг
• Преувеличение
• Сплошной рисунок
• Обращаться

Если вы разрабатываете специально для UI/UX, Иссара Вилленскомер также написала популярный манифест «UX в движении» , в котором излагает 12 принципов:

• Ослабление
• Смещение и задержка
• Воспитание
• Трансформация
• Изменение значения
• Маскировка
• Наложение
• Клонирование
• затемнение
• Параллакс
• Размерность
• Долли и зум

3. Познакомьтесь с инструментами моушн-дизайна.

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

• Adobe After Effects. Если бы вам пришлось ответить, какое программное обеспечение лучше всего подходит для анимационного дизайна , ответом, вероятно, было бы Adobe After Effects . Это стандартное программное обеспечение, используемое для анимационного дизайна и анимации.
• Adobe Illustrator — используется для создания векторных изображений, которые будут использоваться в ваших проектах моушн-дизайна.
• Adobe Photoshop — используется для общего редактирования или создания изображений, например для создания раскадровки.
• Adobe Premiere Pro — используется для редактирования и создания видео — применимо, если вы создаете видеоролики с анимационным дизайном.
• Cinema 4D или Blender — используется дизайнерами, которым необходимо использовать 3D-работы.

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

4. Формальное образование и ресурсы для самообучения

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

Если вы хотите пойти по пути самообучения, есть также множество онлайн-ресурсов:

• Онлайн-курсы. В интернете есть огромный образовательный раздел , в котором представлены совершенно бесплатные курсы и учебные пособия. Другие известные платформы включают School of Motion и Motion Design School , которые предлагают платные курсы.
• Каналы YouTube . Каналов, которые предоставляют обучающие материалы для начинающих. 
• Книги Остина Шоу « Дизайн для движения» — отличное введение. В них исследуются принципы моушн-дизайна и рассматриваются методы создания увлекательных проектов моушн-дизайна. Для более академического чтения книга « Теория и практика моушн-дизайна» Брайана Стоуна и Лии Уолин предлагает углубленный обзор моушн-дизайна, его влияния и происхождения, а также того, как он применяется во многих областях.
• Платформы дизайна. Просмотр платформ дизайна может стать отличным источником вдохновения. Махфуз Али, старший моушн-дизайнер, рассказывает, что его любимые ресурсы по моушн-дизайну включают Dribbble, Instagram.

Я начинал как оператор и режиссер. Но в фильмах, которые я продюсировал, я всегда чувствовал недостаток глубины и динамики. Именно тогда я наткнулся на такие фильмы, как «Скотт Пилигримс против всего мира» и «Зомбилэнд» , и это изменило мой подход к миру кинопроизводства. Я начал изучать моушн-дизайн, чтобы реализовать его в своих фильмах (визуальные эффекты и композитинг). Вскоре после этого я полностью превратился в моушн-дизайнера/аниматора, вдохновленный разными культурами, стилями, а также современными и традиционными техниками. – Адриан Яп, моушн-дизайнер

Интерес к анимации у меня всегда был, с тех пор, как я посмотрел «Черепашек-ниндзя» в 2000-х годах. Это заинтересовало меня играми Miniclip, и еще в 2006 году я смог создать очень короткий анимационный клип. Это стало огромным событием для всех вокруг меня, поскольку в то время анимация была определена только в мультфильмах. Позже, после окончания университета, я начал свою карьеру в качестве моушн-дизайнера. Страсть и интерес, вызванные этими мультфильмами, побудили меня глубже изучить область моушн-дизайна. – Махфуз Али, старший моушн-дизайнер Lottie.

Как начать использовать моушн-дизайн (за несколько минут)

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

Сотрудничайте со своей командой, тестируйте анимацию в Интернете, на iOS и Android, интегрируйтесь с такими инструментами, как Adobe After Effects и другими.

Так что вперед и начните творить волшебство с движением – нам не терпится увидеть, что у вас получится.