Что это такое? Motion Design – это направление в дизайне. Основной «продукт» деятельности – анимированная графика. Такое оформление появилось не так давно, но уже завоевало сердца пользователей в Интернете.
На что обратить внимание? Анимация востребована в разных сферах: от рекламы на ТВ и в Интернете до создания сайтов и промо-материалов. Для лучшего понимания моушн-дизайна следует разобраться в его принципах и отличиях от других направлений.
В статье рассказывается:
- Суть Motion Design
- Сферы применения Motion Design
- Отличие Motion Design от других видов дизайна
- Принципы Motion Design
- Этапы работы в Motion Design
- Тренды в Motion Design
- Инструменты в Motion Design
- Требования к специалистам Motion Design
- Варианты изучения Motion Design
-
Пройди тест и узнай, какая сфера тебе подходит:
айти, дизайн или маркетинг.Бесплатно от Geekbrains
Суть Motion Design
Motion Design – это процесс создания анимированных графических объектов. Анимационной графикой (моушн-графикой) называют визуальное оформление, которое позволяет «оживить» статичную иллюстрацию. Эти элементы используются во многих сферах – интернет, медиа, реклама, телевидение, кинематограф, мобильные приложения, видеоигры и т.д.
Любые анимированные изображения или надписи, которые повсюду окружают человека, – результат работы моушн-дизайнера. Использование анимационной графики помогает эффективнее донести информацию до потенциального потребителя (клиента), поскольку задействуются одновременно три канала восприятия – изображение, текст и звук.
Необходимо помнить о том, что анимационная графика имеет свои характерные особенности по сравнению с обычной анимацией и видео. Моушн-графика только иллюстрирует данные или идеи, не раскрывая сюжет (в этом состоит ее отличие от мультипликации).
Motion Design – оптимальное решение для создания кратких, но емких, сообщений. Кроме того, элементы моушн-анимации хорошо подходят для сложных проектов, так как позволяют в доступной форме донести их суть.
Анимационная графика обладает целым рядом преимуществ.
- Быстро доносит информацию. Как известно, в рекламе и инфографике, из-за ограничений во времени, сообщения должны быть краткими и понятными.
- Позволяет в простом и доступном формате раскрыть сложные идеи и концепции, а также упорядочить данные. Зачастую всего лишь одно изображение способно заменить тысячи слов. В краткий ролик можно вместить огромное количество важной информации, которая эффективно усваивается зрителями.
- Легко акцентирует и удерживает внимание. По статистике большинство пользователей предпочитают смотреть видео, а не читать текст. Этим и объясняется популярность моушн-графики.
Сферы применения Motion Design
Благодаря своей эффективности, элементы Motion Design окружают нас практически повсюду.
- Основные сферы
Во многих видах деятельности необходимо кратко, зрелищно и информативно представить потенциальным потребителям (клиентам) бренд, продукт или событие. Для этих целей и используется моушн-дизайн, позволяющий эффектно вывести новинку на рынок, привлечь внимание зрителя к ключевым моментам, а также добиться максимальной результативности от размещенного контента.
- Интерактивные элементы, использующиеся в оформлении сайта или приложения
Как показывает практика, пользователи больше времени проводят на сайте (в мобильном приложении), если в макете присутствуют цепляющие внимание акценты. Например, «выезжающие» наименования разделов, анимированные логотипы и иконки, интересная смена баннеров и окон и т.д.
- Образовательные проекты
Использование возможностей 3D Motion Design помогает качественнее доносить информацию до студентов, слушателей курсов и учеников онлайн-школ. Доказано, что материалы лекции, дополненной анимированными диаграммами и списками, воспринимаются гораздо лучше.
- Видеоклипы
Моушн-графика делает музыкальные клипы зрелищнее. Например, видео к одному из треков певицы Alseyda набрало огромное количество просмотров за счет нестандартного решения – дизайнеры анимировали каждое слово композиции.
входят в ТОП-30 с доходом
от 210 000 ₽/мес
Скачивайте и используйте уже сегодня:
Топ-30 самых востребованных и высокооплачиваемых профессий 2023
Поможет разобраться в актуальной ситуации на рынке труда
Подборка 50+ бесплатных нейросетей для упрощения работы и увеличения заработка
Только проверенные нейросети с доступом из России и свободным использованием
ТОП-100 площадок для поиска работы от GeekBrains
Список проверенных ресурсов реальных вакансий с доходом от 210 000 ₽
- Презентации
Абсолютное большинство пользователей между прочтением инструкции в текстовом формате и просмотром обучающего видео выберут второй вариант. Эта особенность восприятия – эффективный инструмент в руках организаторов онлайн-курсов, блогеров и владельцев сайтов. Презентации, состоящие из анимированных слайдов, сопровождающихся соответствующей озвучкой, помогают быстро и доходчиво донести последовательность действий, а также познакомить потенциальных потребителей (клиентов) с новым продуктом или услугой.
- Заставки к кинофильмам
Впервые анимированные титры были использованы в 1955 году в процессе создания фильма «Человек с золотой рукой». Белые линии постепенно сливались, образуя очертания руки. Автор этого необычного для того времени приема – американский графический дизайнер Сол Басс. Альфреда Хичкока, британского кинорежиссера, очень заинтересовал данный метод.
Позднее возможности моушн-анимации стали применять для оформления заставок к телепередачам. Сегодня же моушн-дизайн занял прочные позиции на YouTube-каналах.
- Реклама и SMM
Ни для кого не секрет, что в этой сфере крайне важно с первых секунд «зацепить» внимание. Моушн-дизайн – проверенный временем инструмент, который помогает заинтересовать зрителей тем, что происходит на экране. Благодаря динамичной смене картинок, такие ролики набирают огромное количество просмотров.
Кроме того, Motion Design позволяет повысить лояльность аудитории, поскольку подписчики активнее интересуются контентом. Простые анимированные элементы используются даже в email-рассылках. Причем подобные письма гораздо реже игнорируются получателями.
Если SMM-специалист умеет создавать анимированные ролики, это положительным образом сказывается на его репутации. Являясь востребованным профессионалом можно устанавливать соответствующие расценки на свои услуги. К тому же, прокачав этот навык, можно смело принимать предложения о сотрудничестве от крупных брендов.
Отличие Motion Design от других видов дизайна
Для обывателей эти два понятия – синонимы. Однако, моушн-дизайн и анимация имеют определенные отличия (несмотря на то, что разница между ними «размыта»). Моушн-дизайнеры могут брать в работу анимацию. В то же время анимационные дизайнеры вполне могут работать с графикой.
Речь идет не только о развлекательных роликах, а также о деловом контенте, который помогает не только дать информацию о продукте, но и продать его, а также объяснить концепцию бренда.
Анимация – это самодостаточная анимированная графика, которая не зависит от других работ.
Главная ее задача – вызвать у человека эмоции. Поэтому чаще всего анимация используется в развлекательных целях. Например, фильмы (в том числе, короткометражки), клипы и телешоу.
В эту категорию входят несколько видов динамической графики:
- базовая анимация;
- двухмерная анимация (2D);
- трехмерная анимация (3D);
- покадровая анимация;
- моушн-графика.
Как уже упоминалось выше, анимационные ролики обладают сюжетом. Motion Design, в свою очередь, представляет собой подачу информации в динамике (факты и сведения, история бренда, короткая заставка). Чтобы усилить эффект, визуальный ряд сопровождается звуковой дорожкой. Это является главным критерием, который определяет разницу между этими двумя направлениями.
Зачастую моушн-дизайнерам ошибочно приписывают задачи графических дизайнеров. Однако, специалисты, работающие с графикой, занимаются более статичными изображениями. Они разрабатывают айдентику для компаний, дизайн упаковки и рекламу и т.д. Иными словами, работа графических дизайнеров направлена на создание имиджа бренда и отстройку от конкурентов.
Принципы Motion Design
Плавность
Это имитация того, как реальные объекты ускоряются и замедляются с течением времени. Данный принцип относится ко всем UI-элементам, которые показывают движение.
Противоположность плавности – линейное движение. UI-элементы могут мгновенно переходить от высокоскоростного движения к стационарному и наоборот. Поскольку подобное поведение не характерно для объектов физического мира, пользователям оно кажется странным.
Смещение и задержка
В случае, если несколько UI-элементов двигаются одновременно и с одинаковой скоростью, пользователи группируют их. При этом они могут упустить из виду, что каждый элемент обладает собственной функциональностью.
Скачать файлИспользование смещения и задержки позволяет создать иерархию между UI-элементами, передвигающимися одновременно. Они, определенно, связаны друг с другом. Но, при этом, сохраняют свои отличия. Чтобы избежать полной синхронности, время, скорость и пространство между элементами смещаются, создавая эффект «одно за другим».
Когда пользователь перемещается между экранами, эти принципы напоминают о том, что есть и другие способы взаимодействия.
Родительские элементы
Родительские элементы связывают функции UI-элементов. Если изменить свойство в родительском элементе, свойства дочерних также поменяются. Все характеристики элементов могут быть взаимосвязаны между собой.
В частности, положение родительского элемента можно привязать к масштабу дочернего элемента. В этом случае, если родительский элемент передвигается, дочерний элемент увеличивается или уменьшается.
Таким образом, родительские элементы устанавливают связь между UI-элементами, выстраивают иерархию и дают возможность нескольким элементам одновременно взаимодействовать с пользователями. Эффективность родительских элементов будет значительно выше, если они используются в онлайн-режиме.
Трансформация
Трансформацией называется переход одного UI-элемента в другой. Знакомый всем пример: кнопка загрузки становится индикатором выполнения, а он, в свою очередь, превращается в иконку завершения.
на обучение «Моушн-дизайнер» до 10 ноября
С позиции UX трансформация позволяет пользователям отслеживать свой рабочий статус по отношению к цели. Кроме того, она визуализирует состояние системы. Это крайне важно в тех случаях, когда прогрессия между UI-элементами связана с начальной и конечной стадией (к примеру, загрузка файла).
Смена значений
Представления значений (чисел, текста и графики) – основа цифровых интерфейсов. Этот принцип Motion Design активно применяется в различных сферах – от приложений крупнейших банков до персональных календарей и онлайн-магазинов. Эти представления подвержены изменениям, поскольку связаны с существующими наборами данных.
Маскировка
Маскировка представляет собой стратегическое обнаружение и скрытие частей элемента пользовательского интерфейса. С помощью изменения формы и масштаба периметра элемента, этот принцип сигнализирует об изменении пригодности. Однако, элемент остается опознаваемым. Для этих целей оптимальны подробные иллюстрации и фото. Обычно дизайнеры используют маскировку для того, чтобы пользователи поняли, что они проходят через ряд взаимодействий.
Наложение
Как известно, в двухмерном пространстве нет глубины, поэтому UI-элементы продвигаются только по осям X и Y. За счет наложения создается иллюзия переднего плана и фона в пространстве пользовательского интерфейса. Данный принцип позволяет создать глубину, скрывая и раскрывая элементы в соответствии с потребностями пользователей.
Читайте также!
Используя наложение, нельзя забывать про информационную иерархию. В частности, в приложении для создания заметок пользователь изначально должен увидеть перечень своих записей. Далее наложение может применяться для выявления дополнительных опций для каждой заметки – «Удалить» или «Архивировать».
Клонирование
Клонированием называется поведение движения, при котором одни UI-элементы разделяются на другие. Обычно этот принцип используется для того, чтобы акцентировать внимание пользователей на важных моментах и отметить функции взаимодействия.
Реализация UI-элементов в интерфейсе подразумевает определенную исходную точку, которая связана с элементом на экране. Как показывает практика, если компоненты внезапно появляются и резко исчезают, пользователям требуется дополнительный контекст для более качественного взаимодействия.
Затемнение
Чтобы лучше понять в чем заключается этот принцип, необходимо представить дверь из матового стекла. Для того, чтобы ее открыть, требуется взаимодействие. Тем не менее, в общих чертах можно предположить, что находится с другой стороны.
Затемнение позволяет создать интерфейс, призывающий пользователя к взаимодействию. Одновременно на экране возникает подсказка. Чаще всего этот прием используется для создания навигационного меню, экранов для ввода логина и пароля, а также окон с файлами и папками.
Параллакс
Этот принцип проявляется в том случае, когда несколько UI-элементов передвигаются одновременно, но с разной скоростью. Основная задача параллакса – установить иерархию.
- Интерактивные элементы двигаются быстрее и остаются на первом плане.
- Неинтерактивные, напротив, обладают меньшей скоростью и отступают на второй план.
Параллакс позволяет сделать акцент на интерактивных UI-элементах. Неинтерактивные элементы при этом по-прежнему остаются на экране и поддерживают дизайнерское единство.
Размерность
Этот принцип помогает создать иллюзию, что UI-элементы имеют несколько интерактивных сторон (по подобию объектов физического мира). Поведение элементов построено на том, что они как будто складываются, переворачиваются и всплывают. Кроме того, они могут быть наделены реалистичными свойствами глубины.
на обучение «Дизайнер интерфейсов (UX/UI)» до 10 ноября
Размерность также выступает в качестве повествовательного устройства. Подразумевается, что разные стороны UI-элемента связаны и позволяют создать плавные переходы экрана.
Перемещение и масштабирование
Эти принципы помогают пользователям окунуться в пространство UI-элементов, а также сделать их крупнее, чтобы рассмотреть в деталях.
- Перемещение появляется в тот момент, когда точка зрения пользователя приближается к UI-элементу. Чтобы лучше понять в чем заключается этот принцип, можно представить человека с камерой, который, желая сделать снимок крупным планом, подходит поближе к цветку.
- Масштабирование предполагает, что пользовательская точка зрения и UI-элементы остаются фиксированными, но при этом пользователь имеет возможность увеличить или уменьшить их размеры. Возвращаясь к предыдущему примеру, необходимо представить, что человек стоит на месте и попросту использует опцию масштабирования, чтобы сделать фото крупным планом.
Этапы работы в Motion Design
Как уже упоминалось выше, моушн-дизайнер работает с простейшими анимациями. Его задача – превратить статичную графику в динамическое изображение. Чтобы добиться вау-эффекта, дизайнеры используют разнообразные приемы, применяют ключи и графики анимации. Например, меняют настройки позиции объектов таким образом, чтобы перемещение выглядело более естественным (объекты должны разгоняться и тормозить плавно).
Дизайнер, работая над проектом в 3D-пространстве, заставляет элементы не только перемещаться влево-вправо и вверх-вниз, но и вращаться вокруг своей оси.
В результате получается готовый ролик – завершенная сцена, видеоклип или маркетинговое видео.
Создание ролика с помощью Motion Design состоит из нескольких этапов.
- Команда проекта получает новый заказ с утвержденным техническим заданием на создание ролика.
- Сценаристы готовят сценарий, который обязательно содержит завязку, кульминацию, развязку, а также диалоги и действия.
- Дизайнеры создают раскадровку – схематические рисунки того, что должно происходить в кадре.
- После того, как заказчик утвердит сценарий и раскадровку, дизайнеры приступают к отрисовке каждой сцены в векторном редакторе или собирают их на основе шаблонов.
- Далее сцены загружают в видеоредактор After Effects и оживляют с помощью анимации. Эта программа позволяет заставить героев и предметы двигаться в кадре. Кроме того, можно выставить настройки таким образом, чтобы графика и титры появлялись и исчезали в нужный момент. На этом этапе происходящее в кадре дополняется различными эффектами. К примеру, вращение, плавное появление и исчезновение, перетекание одного элемента в другой и т.д.
- Затем готовый ролик выгружают из редактора, выбирая подходящий формат, чтобы показать остальным членам команды и заказчику. Исходник проекта остается у дизайнера, чтобы можно было оперативно внести корректировки.
Тренды в Motion Design 2023 года
В настоящее время в Motion Design популярны следующие тренды.
- Цепляющее интро – вступительная заставка. Позволяет оживлять ролики и фильмы с помощью современных приемов.
- Моушн-коллаж. Используются различные эффекты: обычные фото дополняются иллюстрациями и 3D объектами, часть реалистичной фотографии может быть заменена на рисунок, перетекание одного изображения в другое и т.д.
- Анимация текстов и интерфейсов. Как показывает практика, подобная анимация хорошо привлекает внимание. Поэтому анимированные надписи и интерфейсы используются во многих сферах – от сайтов и социальных сетей до брендинга. Текст может растягиваться по горизонтали или по вертикали, буквы могут скручиваться или переворачиваться и т.д. При создании интерфейсов актуальны красивые моушн-элементы, которые привлекают внимание пользователя и заставляют его больше времени провести на странице.
- Высокая популярность 3D-элементов. Эти объекты используются повсеместно – начиная от презентаций и заканчивая визуальным наполнением игр.
- Анимированные логотипы. Анимация помогает пользователю в деталях запомнить логотип, а также акцентирует внимание на сайте или мониторе, транслирующем рекламные ролики. Чаще всего используется эффект перетекания, объемность и коллаборация разных стилей.
- Стоп-моушн (движущиеся картинки). Чаще всего эти простые ролики используются для продвижения товаров и услуг.
- Сложные визуальные эффекты, не характерные для физического мира. Именно благодаря этому тренду зрители могут восхищаться реалистичными динозаврами, трансформерами, взрывами и т.д.
- Движущаяся 3D-графика. Сочетание 3D, анимации, звука и видео позволяет визуализировать фантастические сцены.
- Эстетика ошибок – намеренное искажение, визуальный шум, сбой привычных настроек. Увидев подобный объект, его хочется рассмотреть поближе, погрузиться в него, хоть на несколько мгновений почувствовав себя частью другой реальности.
- Морфинг – это прием, который помогает дизайнеру создать эффект перетекания одного элемента в другой.
Инструменты в Motion Design
Чтобы работать над проектами с помощью возможностей Motion Design, требуются специальные программы и инструменты. Самые популярные из них собраны в таблице.
Программы для монтажа видео | Программы для работы с графическим дизайном | Инструменты для работы с 3D-графикой и 3D-анимацией |
Adobe After Effects | Adobe Illustrator | Autodesk 3ds Max |
Adobe Premiere Pro | Adobe Photoshop | Autodesk Maya |
Nuke | LightWave 3D | |
Autodesk Combustion | Adobe Flash | Blender |
Apple Motion | Cinema 4D |
Кроме того, часто моушн-дизайнеры пользуются специальными сервисами, в которых можно подобрать готовые шаблоны. Чтобы не создавать ролики с нуля, стоит обратить внимание на следующие сервисы.
- Mixkit – сток, который позволяет бесплатно использовать видео, музыку и видеошаблоны.
- Istockphoto – платный ресурс с огромным выбором графики и музыки.
- Videohive – платный сток с визуальным контентом различной тематики.
- Free3d – ресурс с громадной подборкой трехмерных моделей для программ Maya, 3ds Max, Cinema 4D, Blender и др.
- Adobe Stock – большая коллекция фото- и видеоконтента , анимации и 3D-моделей.
Требования к специалистам Motion Design
Обязательное условие – знание основ графического дизайна.
- Разбираться в теории цвета (колористике), грамотно подбирать цветовую палитру проекта, знать основы психологии цвета.
- Создавать правильные композиции, чтобы происходящее в кадре было живым и интересным. Моушн-дизайнер должен уметь гармонично разместить графические элементы и связать их друг с другом в единую картинку.
- Обладать навыками типографики (художественного и выразительного оформления текста). Дизайнеру, работающему с возможностями Motion Design, важно понимать, какие шрифты максимально подходят к концепции проекта. Например, можно использовать современные или готические шрифты, выбрать начертание с засечками или без них и т.д. Кроме того, необходимо знать приемы, позволяющие вписать текст в общую композицию, чтобы привлечь внимание и вызвать эмоции у читателя.
- Владеть навыками сценарного мастерства. Так как анимационная графика раскрывает перед зрителями какую-то историю, дизайнер должен понимать, как создать сюжетную линию. Также необходимо владеть приемами драматургии и знать основы режиссуры.
- Иметь навыки работы в специальных профессиональных программах и сервисах.
Помимо этого, высококвалифицированный моушн-дизайнер должен обладать следующими компетенциями:
- уметь работать с информацией (искать, анализировать, пользоваться различными информационными ресурсами);
- сотрудничать с другими членами команды (фотографами, режиссерами, кодерами и т.д.)
Также профессионалу в сфере Motion Design следует отслеживать актуальные тренды и осваивать новые инструменты (программы). Еще одно обязательное требование на пути к успеху – важно уметь рассказывать зрителю истории, в доступной и понятной форме донося до аудитории главную идею. Еще необходимо анализировать собственные работы, а также проекты коллег и конкурентов.
Современные реалии требуют от моушн-дизайнера непрерывного обучения и повышения квалификации (в этом плане очень эффективны курсы по Motion Design). Кроме того, чтобы получить крупный проект, потребуется умение эффектно презентовать себя и свое портфолио.
Варианты изучения Motion Design
Начиная изучать моушн-дизайн с нуля, стоит обратить внимание на следующие моменты.
- Освоить основы графического дизайна и цифровой анимации (в том числе теорию цвета, композицию, типографику и принципы анимации).
- Изучить программные продукты (Adobe After Effects, Cinema 4D или Blender).
- Проанализировать портфолио опытных моушн-дизайнеров. Это необходимо для того, чтобы понять, какие приемы в анимации позволяют добиться максимальной убедительности. Можно использовать учебники, курсы и онлайн-семинары.
- Отрабатывать полученные знания на практике. Нельзя бояться брать в работу реальные проекты. Важно пробовать себя в различных техниках и стилях. Начать лучше с простых анимаций, а затем, набив руку, переходить к более сложным заданиям.
- Обмениваться опытом с другими дизайнерами и аниматорами. Важно получать экспертные отзывы о своих работах, чтобы понять, какие навыки нужно подтянуть.
- Следить за новыми тенденциями и технологиями в сфере Motion Design. Стоит уделить время отраслевым блогам и форумам, посещать семинары и конференции, подписаться на опытных дизайнеров в социальных сетях.
- Нельзя забывать о том, что изучение моушн-дизайна требует огромного терпения, упорства, готовности к экспериментам и ошибкам. Только постоянное оттачивание навыков на практике позволяет создавать уникальные анимации и моушн-графику.
Читайте также!
Срок обучения возможностям Motion Design напрямую зависит от базы: имеющегося образования, опыта и квалификации. Важное значение имеет и то, с какими программами и сервисами предстоит работать. Получить профессию моушн-дизайнера можно несколькими способами.
- Получить высшее образование в университете, специализирующемся на графическом дизайне, цифровых медиа и смежных областях. Обучение занимает от 3 до 5 лет и позволяет приобрести разносторонние знания в сфере моушн-дизайна.
- Получить среднее образование по специальности «Графический дизайнер» в колледже. Обучение длится от 1 года до 3 лет.
- Очные и онлайн-курсы. С основами Motion Designи специализированными программными продуктами можно познакомиться с помощью учебников и курсов. Срок обучения зависит от опыта и темпа обучения. В среднем – от нескольких месяцев до года (и более).
- Самообучение. Как показывает практика, многие специалисты в сфере моушн-дизайна предпочитают именно этот вариант обучения. Они в комфортном темпе изучают литературу и программное обеспечение, нарабатывают опыт и создают портфолио. Этот способ самый гибкий из всех вышеперечисленных. Однако, сложно спрогнозировать, сколько времени потребуется для того, чтобы овладеть Motion Designи начать откликаться на вакансии.
Таким образом, срок освоения профессии моушн-дизайнера зависит от целеустремленности, мотивации к обучению, а также от желаемого уровня квалификации. Чтобы быть в тренде, важно непрерывно осваивать новые навыки и совершенствовать уже имеющиеся.
Новичкам, которые только планируют приступить к изучению Motion Design, лучше всего начать с прочтения следующей специализированной литературы. Эти книги помогут сформировать прочный фундамент для дальнейшего обучения.
- «The Art of Movement: An Introduction to Motion Design» by Angie Taylor
- «After Effects for Designers: Volume 1: Master the basics of Adobe After Effects» by Angie Taylor
- «Motion Graphic Design: Applied History and Aesthetics» by Jon Krasner
- «Dynamic Animation and Simulation in Adobe After Effects: Create engaging animations with After Effects» by Angie Taylor
- «Introduction to Motion Design» by Ash Thorp
- «Animation 101: Mastering the Basics of Motion Design» by Angie Taylor
- «Motion Design School: Advanced Motion Graphic Design Techniques» by Angie Taylor
В этой подборке собраны источники, которые позволяют познакомиться со сферой моушн-дизайна, в том числе с историей, основными концепциями, принципами и т.д. Есть здесь и учебные пособия, помогающие освоить самые популярные программы и сервисы для создания проектов с помощью Motion Design.