Что такое motion design?

Пользователю достаточно 5−10 секунд, чтобы решить, оставаться на сайте или нет. Этого времени слишком мало для того, чтобы привлечь его внимание демонстрацией основных ценностей компании. Но если призвать на помощь motion design, всё может получиться! Мы всегда запоминаем веб-ресурсы, которые нас удивляют, впечатляют и заставляют задуматься. Сегодня поговорим о том, что такое motion design, где его применяют и в чём его преимущества.

Motion design или motion graphics — это направление современного искусства, которое заключается в анимировании статических изображений. Как только статический кадр начинает двигаться, он становится анимированной картинкой или графической анимацией, но это ещё не моушн-дизайн. Мы же говорим об «ожившем» изображении, наделённом определённым смыслом.

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

Развитие моушн-дизайна происходило вместе с развитием кино и анимации. Всё началось в 1825 году, когда жители Викторианской Англии увлеклись игрушкой тауматроп, основанной на оптической иллюзии. Тауматроп — это кружок с двумя наконечниками и картинками с каждой из сторон. Быстро вращая наконечники, можно увидеть, как картинки сменяют друг друга, оживая.

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

В 1876 году был изобретён первый прототип кинопроектора, позволивший соединять отдельные изображения в сценку, которую проецировали на стену. Изобретение получило меткое название «Волшебный фонарь», а его создатель Эмиль Рейно продемонстрировал его широкой публике в 1892 году — с тех пор это Международный день анимации.

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

Одним из основоположников анимационной графики стал режиссёр и дизайнер Сол Басс, который сотрудничал с Кубриком, Хичкоком, Скорсезе и многими другими. Среди его революционных работ — заставка к титрам фильма «Человек с золотой рукой» Премингера (рука главного героя складывается из белых полос на чёрном фоне), опенинг фильма «Головокружение», титры к «Психо» и «К северу через северо-запад» (режиссёр Альфред Хичкок), а также титры к фильму «Вестсайдская история» (режиссёры Джером Роббинс и Роберт Уайз). Сегодня приёмы, использованные Бассом, не вызовут у вас никакого удивления, но для 50-х — 60-х годов это было сенсационно.

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

Почему моушн-дизайн становится всё более популярным?

1. Визуализированная информация воспринимается быстрее и лучше, чем простой текст.
2. Около 50% нейронов нашего головного мозга обрабатывает именно зрительные образы.
3. Если работа связана с визуальными данными, производительность труда повышается в среднем на 17%.
4. Детали, представленные анимацией, запоминаются лучше на 4,5%.

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

К основным преимуществам анимационной графики следует отнести:

1. Быструю доставку сообщений. Из-за временных ограничений, свойственных сферам рекламы и инфографики, их ключевыми параметрами являются краткость и понятность.
2. Раскрытие сложных идей, концепций. Моушн-дизайн систематизирует данные в максимально лаконичной форме. Это тот случай, когда одно изображение заменяет тысячу слов. В короткий ролик можно вместить массу информации, которая усвоится зрителями без проблем.
3. Привлечение и удержание внимания. Многим пользователям больше нравится смотреть видео, а не читать. Анимационная графика заслужила свою популярность благодаря зрелищности.

Кроме того, моушн-дизайн:

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

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

Доносит самую суть, делает информацию лёгкой для понимания. Многие вещи проще понять, если есть возможность визуализировать их. За счёт визуального повествования моушн-дизайн «разбивает» сложную информацию, способствует простому и ясному донесению информации.

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

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

Экономит время. Как правило, длина моушн-роликов – от 30 секунд до 3 минут. Это особенно полезно для брендов, которые хотят произвести быстрый эффект и тем самым повысить узнаваемость бренда. Комбинация визуала и аудио рассчитана на максимальное использование возможностей человека по обработке информации. Меньше контента – больше полезных данных. То, что объясняет статья, состоящая из 2000 слов, можно показать за полминуты.

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

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

Если перечислить основные сферы применения motion design, это будут:

1. Телевидение (заставки, титры, субтитры, оформление программ).
2. Кино (заставки, опенинги, титры, трейлеры, тизеры).
3. Маркетинг (рекламные ролики, промоматериалы, нативная реклама, анимационная инфографика).
4. Медиа (новостные, образовательные, развлекательные видеоролики).
5. Бизнес (презентации, инфографика для конференций).
6. Образование (короткие ролики для раскрытия любой темы).
7. Индустрия развлечений (игры, видеопроекты, стриминговые сервисы)

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

Рекомендуется использовать анимационную графику:

1. На первом экране главной страницы. Тогда это будет первое, что бросится в глаза новым пользователям сайта. Здесь стоит сделать акцент на позиционировании компании или продукта с призывом ознакомиться с ними подробнее.
2. Для эффектной презентации продукта. Если основная цель ресурса – продемонстрировать продукт или линейку однотипных товаров, motion design идеально подходит для эффектной презентации. Например, если сайт продаёт автоматические ворота, можно показать принцип их работы.
3. Для представления ключевой информации. Это могут быть преимущества продукта или компании, а также услуги, которые она оказывает. Для каждого отдельного случая найдётся своё решение.
4. Для кнопок и триггеров. Любой продающий сайт должен мотивировать пользователей к совершению неких действий: заказу товара, скачиванию презентации, заполнению формы обратной связи и т.д. Моушн-дизайн подсказывает, на что следует обратить внимание, какой следующий шаг совершить.
5. Для усиления призывов к действию. Если анимировать стандартный call-to-action, можно привлечь дополнительное внимание к форме на сайте и увеличить конверсию.
6. Для заставки перед загрузкой сайта. Красивая анимация прелоадера способна заинтриговать пользователей и повысить шансы на то, что они не пожалеют своего времени и дождутся полной загрузки ресурса.
7. Для оживления сайта при скроллинге. Можно добавить обычной прокрутке страницы зрелищности, превратив её в целое действо, при котором одна анимация переходит в другую. Посетителям захочется увидеть, что будет дальше, поэтому они доскроллят до конца страницы.

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

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

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

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

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

На чём стоит сконцентрироваться специалистам? Существуют программы подготовки с акцентом на 2D-рисунки и раскадровку, на анимацию 3D-моделей, на режиссуру, но любому профессионалу пригодятся знания и навыки в смежных областях.

Что имеет значение для пользователей? То, что анимационной графики в современном мире много и, скорее всего, будет ещё больше.

Обратим внимание на основные направления развития, которые стали возможны только благодаря моушн-дизайну:

1. Кинетическая типографика. Дизайнеры и шрифты всегда были неразлучны. С распространением графической анимации надписи начали подвергать всевозможным изменениям – их растягивают, скручивают, разрывают и т.д. Часто буквы заставляют двигаться, чтобы проиллюстрировать некое понятие. Это способствует сращиванию визуального и текстового контента.
2. Морфинг. Этот эффект позволяет визуализировать метафоры и аналогии, рассказывать короткие истории, которые клиенты воспринимают лучше текстов. Один из излюбленных дизайнерских приёмов – превращение логотипов компаний в другие фигуры.
3. 2D + 3D. Плоские рисунки и трёхмерные модели появляются в коммерческих роликах вместе. Объёмные изображения стали популярными и в статической графике, но сторонний наблюдатель не всегда может отличить продукты рендеринга от фотографий или рисунков. Контраст двухмерной и трёхмерной графики актуализируется только за счёт анимации, так как мы не можем потрогать 3D-модели с экранов. Нужно учесть, что производство трёхмерной графики стоит дороже, чем двухмерной. А их комбинация позволяет сэкономить, создав к тому же привлекательную картинку и продемонстрировав объём нужных элементов. Так что всё это во благо бизнеса.
4. Виртуальная реальность. Статической графики мало для имитации жизни, хотя VR-технологии совершенствуются с каждым годом. И всё-таки анимация играет ключевую роль в работе над дизайном виртуальной реальности. Многие компании уже сегодня общаются со своей аудиторией в дополненной и виртуальной реальности, например, в мобильных приложениях.

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

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

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

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

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