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

Применение анимированной графики и трехмерной (3D) анимации

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

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

Моушн дизайн также широко применим в интерьерном маппинг дизайне, т.е. когда интерьеры декорируются посредством видеопроекторов. Это позволяет создавать совершенно новые пространства, текстуры и предметы декора, ведь проекторы можно осветить поверхность любой формы, изменив ее тем самым любую до неузнаваемости, и даже создать абсолютную иллюзию физического изменения пространства.
BTL-маркетинг, брендинг пространств и помещений и моушн технологии сейчас практически неразделимы. Реклама, презентации, видео-инфографика, макеты, логотипы, брендирование – во всех этих сферах бизнеса активно применяется и является трендом моушн дизайн. Современные эпизоды таких кинофраншиз, как Джеймс Бонд и Гарри Поттер, суперпопулярные сериалы, как Игра Престолов, – их локации, спецэффекты, оформление – все это «рисуется» графиками и аниматорами на компьютере.

Моушн дизайн как вид современного искусства

Благодаря активному развитию программного и аппаратного обеспечения для 3D-графики моушн дизайн получает активное развитие в кино, а также являет собой один из самых тресковых изысканных видов современного искусства. В 1960 году Джон Уитни был одним из первых, кто признал моушн-графику искусством и ввел этот термин в профессиональный жанр. Его компания Motion Graphics Inc. получила говорящее название и стала пионером моушн графики и дизайна в кино индустрии. В течении нескольких лет компания Джона Уитни активно работает над такими картинами, как Psycho, Advise & Consent, Man With The Golden Arm, Vertigo. Задачей компании было создание относительно простой, но атмосферной моушн-графики для усиления настроения фильма.
В дальнейшем моушн-графика получает активное развитие, создаются визуально привлекательные графические композиции в движении, которые также заимствуют элементы из фотографии, видео и иллюстрации. Благодаря этому объекты, персонажи и фоны изменяются, двигаются, взаимодействуют и трансформируются.
Такой вид моушн-искусства в синергии с бизнес-задачами получил активное применение в для презентаций тех или иных крупных мировых брендов. Очевидное преимущество моушн-графики как искусства перед другими изобразительными средствами самовыражения художника - это абсолютное отсутствие каких-либо границ реализации идей худождика. С помощью комьютера и современного программного обеспечения и аксессуаров можно претворить в жизнь любую фантазию или идею.

Моушн дизайн в бизнесе

На Facebook 85% видеоконтента просматривается без звука и, тем не менее, благодаря графическим технологиям бизнесу удается донести до целевой аудитории необходимый месседж даже без звукового сопровождения. Посредством моушн-графики создаются самые лучшие презентации. Информационный моушн дизайн как нельзя лучше способен продемонстрировать в графическом виде процессы, алгоритмы, раскрыть суть документов, технические параметры устройств, факты и цифры.
На сегодняшний день моушн дизайн сопровождает вас везде: в телефоне, рекламе, кино, на спектаклях и шоу-постановках, выставках, презентациях и, конечно, на телевидении.
Моушн дизайн &ndash это крайне перспективная форма создания визуально привлекательного контента с рекламной или имиджевой целью. Если вы задумываетесь о создании моушн графических презентаций, рекламных видео для продвижения бизнеса, обратитесь в , наша команда всегда рада разработать что-то уникальное, найти решение именно для вашего бизнеса и создать невероятный и фантастический контент.

Как стать дизайнером моушн графики

Профессия моушн дизайнера - это достаточно молодое направление в дизайне, возникшее в следствии развития современных технологий и программного обеспечения. Графические дизайнеры, веб дизайнеры, дизайнеры интерфейсов, иллюстраторы, 3d специалисты и конструкторы – все они в некоторой степени могут быть моушн дизайнерами.
Наиболее важным шагом для всех, кто планирует продолжить карьеру в этом направлении, является ознакомление с основами 3D-моделирования, анимации и графического дизайна. Одни из самых популярных компьютерных программ для создания моушн контента являются Adobe Premiere Pro, Cinema 4D, Adobe Photoshop, Adobe After Effects и Final Cut Pro. В наше время при желании практически любой талантливый художник может научиться создавать качественный моушн контент даже без профильного технического образования. В интернете можно найти огромное количество обучающих видео и других материалов про создание моушн-графики.
Важно постоянно следить за трендами, анализировать работы коллег, чтобы всегда понимать тенденции и перспективы индустрии. Моушн дизайнер - это профессиия, востребованная во всем мире. Средняя зарплата моушн дизайнера в США порядка $99000 в год. Профессионалы топ-уровня и руководящие специалисты имеют еще больший доход.
В качестве резюме можно констатировать, что профессия моушн дизайнера перспективна для творческих людей вне зависимости от того, есть у них профильное образование или нет. Главное – желание и упорство.

Спасибо! Вы успешно подписались на нашу рассылку.

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

Мы сделали подборку из 5 библиотек для создания анимации на web-сайтах, рассказав об их преимуществах, недостатках и сферах применения.

GreenSock Animation Platform

Но при этом для анимации HTML элементов tween.js совершенно не подходит - с этим справляются следующие два инструмента.

Move.js

Move.js - javascript-библиотека, позволяющая делать всё то же, что и tween.js, только с использованием CSS3 и HTML5 вместо Canvas. Она является не самой легкой (как для JS), но одной из самых популярных. Набор заранее заготовленных видов анимации (поворот, наклон, ротация и тд.) делает её также одной из самых легких в использовании.

Пример кода c использованием Move.js:

Move("#example-4 .box") .rotate(140) .end();

WOW.js + Animate.css

На самом деле это не настоящие библиотеки или фреймворки для анимации, по крайней мере в привычном понимании.

Animate.css - всего лишь CSS файл, в котором собраны несколько десятков правил, связанных с анимаций, а WOW.js - всего лишь маленький скрипт, запускающий эти анимации по мере прокрутки страницы.

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

Во-первых, решает легковесность. Всего 2 КБ и никаких зависимостей!

Во-вторых, wow.js и animate.css являются крайне простыми в использовании. Скорее всего, вам не придется написать ни строчки лишнего JS кода. Достаточно подключить эти два скрипта к странице и добавить к элементу, который нужно анимировать, пару css классов: класс wow и класс нужной нам анимации.

Теперь при загрузке страницы вместо статического отображения этот элемент будет красиво крутиться:

Для настройки анимации используются специальные data-атрибуты, например, data-wow-duration=»2s» задаст продолжительность кручения в 2 секунды.

Демо, более подробную документацию и полный список data-атрибутов можно найти на официальном сайте WOW.js , полный список классов анимации - на официальном сайте Animate.js.

Анимация средствами JQuery

Pas de Deux, Норман Макларен 1968

Анимация — это не искусство рисования в движении, а искусство движения в рисовании. — Норман Макларен

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

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

Сфокусируйтесь на движении, а не на коде

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

Ранние эскизы Bugs Bunny от Чака Джонса показывают размышления о том, как придать ему форму, вес и движение.

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

Это почти как планировать иллюстрацию, основываясь на цвете карандаша, который у вас есть (и нет). Это не правильно.

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

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

Сфокусируйтесь на цели

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

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

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

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

кричащая

элегантная

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

Изучите движение

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

Youtube позволяет смотреть видео с различной скоростью воспроизведения с помощью панели настройки плеера.

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

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

Легче создать «невидимую анимацию», когда вы понимаете, как люди видят движение. Поэтому изучить мир вокруг вас — хорошая идея.

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

Источник: Мартин Драпо — Backbone Game Engine.

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

Рассказывайте вашу историю гармонично

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

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

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

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

Делая сначала небольшие, но важные макеты и тесты, такие как эти, поможет вам активизировать ваше общее гармоничное движение. Есть множество отличных сайтов, которые сделали это просто потрясающе. Reverend Danger и Every Last Drop , использовали анимацию везде, чтобы рассказать свою историю.

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

Итог

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

• Избавьтесь от «сначала код» менталитета,

• Делайте анимацию практичной и полезной,

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


Но самое главное, получайте удовольствие от процесса создания вашей анимации.

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

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

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

Огромное спасибо http://www.webdesignerdepot.com и, как обычно, обязательно посмотрите прошлые подборки с красивыми сайтами:

www.noiretrenoir.com

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

barcampomaha.org

Совершенно восхитительный и разноцветный сайт, который наполнен разными анимированными монстрами и иностранцами.

www.azahran.com

www.quechua.com

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

Parallax.js

Сайт используется в место демо страницы которая демонстрирует работу скрипта Parallax.js. Ну что сказать, всё выглядит очень и очень эффектно!

www.buffalowildwings.com

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

goodtwin.co

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

www.intacto10years.com

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

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

www.ipolecat.com

Этот сайт использует в основном красивые иллюстрации, но при перелистывании слайдера они не много анимированные, что придаёт сайту некой причудливости.

www.octaveoctave.com

Интересный сайт с необыкновенными картинками и рисунками, плюс анимация. Другими словами — необыкновенно, но стильно.

www.milkable.me

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

www.mitchlana.com

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

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

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

Прогрессия

Анимация загрузки

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

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

Анимация выполнения

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

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

Скелетные экраны

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

Визуальный отклик

Анимированный ответ на действия пользователя

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

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

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

Привлечение внимания

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

Навигация

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

Смена состояния

Переходы очень важны для отображения смены состояний. В своей статье Smart Transitions In User Experience Design (англ), Эдриан Зумбруннен показывает, как анимация может помочь пользователю сохранить контекст после нажатия на ссылку, перемещающую его в другую секцию той же страницы.

Просто сравните этот статичный, мгновенный переход:

С анимированным поведением:

Креативные эффекты

Креативная анимация может сделать ваш UX действительно красивым и запоминающимся. Она добавляет в UI развлекательный элемент.

Сторителлинг и длинный скроллинг

Совсем недавно, правило «над складкой» было бесспорным. Дизайнеры концентрировали большую часть своего внимания на заполнении этой области ценной информацией. К счастью, теперь мы знаем, что это правило не обязательно верно. На самом деле, 66% внимания на обычной медиа странице, тратится на область под складкой (англ). Такой сдвиг делает скроллинг важным элементов интерактивного дизайна.

Анимация вдыхает в скроллинг жизнь и интерес

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

Заключение

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

Перевод статьи Ника Бабича