Motion design: Моушн-дизайн: что такое и где используется

как появился и где применяется / Skillbox Media

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

Тауматроп — игрушка, основанная на оптической иллюзии: при быстром вращении кружка́ с двумя рисунками с разных сторон они воспринимаются как один. Была особо популярна в Викторианскую эпоху.

Пример тауматропа. Игрушка Икабода Крейна из фильма Тима Бертона «Сонная лощина»

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

Зоотроп — устройство для демонстрации движущихся рисунков, конструкция которого основана на инерции человеческого зрения. Изобретателем зоотропа считается Уильям Джордж Горнер.

Зоотроп

Эмиль Рейно усовершенствовал эти и похожие устройства, соединив их с «волшебным фонарём», что позволило просматривать движущиеся картинки не одному человеку, а одновременно нескольким.

В честь первого показа «светящихся пантомим» Рейно в 1892 году 28 октября отмечается как Международный день анимации.

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

Рейно применил некоторые приёмы, ставшие основой технологии мультипликации. В их числе — раздельное рисование персонажей и декораций.

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

Первым в истории полнометражным фильмом с синхронной речевой фонограммой в 1927 году стал музыкальный фильм «Певец джаза» по технологии «Вайтафон» со звуком на грампластинке.

Кинематограф стал средой, в которой зародился моушн-дизайн, он получил значительное развитие в пятидесятых годах в США благодаря таким дизайнерам, как Сол Басс, Морис Биндер и Пабло Ферро. В то время на телевидении стали появляться анимированные титры и логотипы. Так произошёл переломный момент: анимация перестала быть исключительно инструментом развлечения и получила новые функциональные задачи.

Войти в ИТ: профессия motion designer

О профессии рассказала руководитель команды моушн-дизайнеров в Wowmaking Елена Лазуко.

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

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

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

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

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

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

Для работы понадобится знание таких программ, как Photoshop, Adobe Illustrator, Figma, After Effects и ее плагины, Premiere Pro и Cinema4D.

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

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

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

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

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

Так и получилось.

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

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

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

Придумать новое помогает и работа с референсами.

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

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

Есть несколько школ по моушн-дизайну, за которыми советую следить: Motion Design School, School of Motion, ECAbrams. В своих блогах и ютюб-каналах они делятся интересными примерами.

Помогают черпать вдохновение такие ресурсы, как behance.net, dribbble.com, awwwards.com. Также можно искать в Instagram по хештегам #motion #motiondesign, под котором дизайнеры публикуют свои работы.

Из книг рекомендую прочитать “Взлом креатива” (Майкл Микалко), “Сделано, чтобы прилипать” (Чип и Дэн Хиз), “Кради как художник” (Остин Клеон), “Искусство цвета” (Иоханнес Иттен), “Словарь цвета для дизайнера” (Шон Адамс), “Основы дизайна” (Стивен Пенка), “Дизайн форма и хаос” (Пол Рэнд), “О языке композиции” (Юрий Гордон), “Тайминг в анимации” (Гарольд Уайтэкер, Джонс Халас), “Композиция кадра в кино и на телевидении” (Питер Уорд).

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

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

Если человек решил освоить новую специальность, то советую относиться к этому как к исследованию. При таком подходе меньше расходуется сила воли, так как не приходится себя заставлять учиться. Также следует четко определить свои цели и задать себе вопрос: что я могу сделать уже завтра, чтобы в итоге стать тем, кем хочу. И самое главное — верить в себя и помнить, что неудачи не причина отказываться от мечты.

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

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

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

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

Подняться на пару ступенек вверх в погоне за позицией моушн-дизайнера поможет наша подборка вакансий.

Статья обновлена в августе 2021 года. Права на товарный знак работа.by приобретены в мае 2019 года.

Что такое motion design, где применяется и как стать дизайнером

Когда в Comfy статичные картинки заменили анимацией, сделали новый контент в соцсетях и стали создавать 3D-фото, доход компании вырос на 193%, а лояльных пользователей стало в два раза больше. Магазину странных вещей Gara необычная анимация помогла получить в клиенты всемирно известный хулиганский бренд Vivienne Westwood. 

Редакция MC.today разобралась, почему анимированные заставки и моушн-дизайн лучше статики, сколько зарабатывают украинские motion-дизайнеры и как стать хорошим специалистом. 

---

Содержание:

Моушн-дизайн: что это такое

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

Глядя на анимированный ролик Gara c серьгами, сразу видим, как они смотрятся на ушах и почему их форма именно такая:

А вот эта анимация помогает рассмотреть серьги-панды со всех ракурсов:

 

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

Где применяется моушн-дизайн

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

Направления motion design: чем отличается 2D- и 3D-анимация

Основных направлений у моушн-дизайна два: это 2D- и 3D-анимация. 

2D-анимация делает статичные плоские картинки движущимися. У двухмерных персонажей есть только две величины: ширина и высота, они не объемные. Помните мультфильмы Disney 80-х и 90-х годов? Это отличный пример 2D-объектов.

Пример 2D-моушн-дизайна. Источник

3D-анимация объемная и более реалистичная. Чтобы сделать такую, дизайнеру придется работать с программами, требовательными к ресурсам устройства.

А вот здесь на картинке можно увидеть различия между принцессами «Диснея» в 2D- и 3D-форматах:

Источник

Как стать моушн-дизайнером и что необходимо знать

Такой специалист может освоить какое-то одно направление: 2D или 3D. Или оба сразу. Начинают свой путь обычно с более легкого – создания двухмерной графики.

Навыки моушн-дизайнера такие:

• графический дизайн;
• композиция;
• теория и психология цвета;
• типографика;
• анимация;
• основы сценарного искусства;
• основы программирования.

А список основных программ, с которыми обычно работают эти специалисты, выглядит так:

• Adobe Illustrator – инструмент для создания векторной графики.
• Adobe Photoshop – инструмент для работы с изображениями.
• After Effects – 2,5D программа для создания анимации.
• Adobe Premiere Pro – программа для видеомонтажа.
• Blender – программа для создания и редактирования 3D-графики.
• Cinema 4D – редактор 3D-моделирования.

Вот как начинали свой путь в профессии украинские моушн-, графические и продуктовые дизайнеры и что они советуют новичкам:

Алина Редькина, дизайнер в Kworq, прошла несколько курсов, но рисовать в компьютере так и не научилась. Поэтому решила получить полное высшее образование по направлению дизайна в Америке. Параллельно с учебой Алина работала дизайнером на фрилансе и набивала руку. Даже успела поработать арт-директором, но в итоге с головой погрузилась в дизайн. Теперь она вместе с агентством, в котором работает, делает рекламу для Etat Libre d’Orange и Louboutin. Вывод: дизайнеру нужно много учиться и обязательно параллельно тренироваться на реальных проектах. Курсы и стационарное обучение могут стать первой ступенькой, но практика важнее.

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

Эдуард Михайлов, молодой украинский моушн-дизайнер, по образованию программист, успел поработать фрилансером и в штате разных компаний. Но сейчас ушел в криптоарт (цифровое искусство. – Прим. ред.) и продает свои работы коллекционерам за большие деньги. Чтобы стать таким успешным, Эдуард много учился и развивал свой Instagram, выкладывая туда работы. В соцсетях его заметили всемирно известные бренды, диджеи и музыканты, а потом уже сработало сарафанное радио. По мнению Эдуарда, именно криптоарт делает художника свободным, не зависящим от правок и мнений заказчиков. На NFT-платформах (здесь выкладывают свои работы цифровые художники. – Прим. ред.) можно заработать в разы больше, чем на обычных заказах.

Сколько зарабатывают дизайнеры в Украине

По данным сайта DOU, средняя зарплата дизайнеров в Украине в июне – июле 2021 года $1,5 тыс.:

Это на $300 больше, чем за этот же период в прошлом, 2020 году.

В Киеве дизайнерам в среднем предлагают $2 тыс., а в регионах – $1,2 тыс.:

Всего на сайте DOU сегодня представлено около 380 вакансий для дизайнеров. Больше всего такие специалисты востребованы в Киеве, Львове и Харькове. Дизайнеры из Киева с опытом работы больше 10 лет могут рассчитывать на зарплату более $2,5 тыс.

Заключение

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

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

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

Новая рубрика «About Motion Design» на Behance Russia | by Behance Russia

Рад всех приветствовать, меня зовут Павел Штылер, я креативный директор и сооснователь молодой студии Playd. В Behance Russia я буду отвечать за статьи про моушн-дизайн. Буду счастлив познакомить вас с этим поистине безграничным миром.

Что такое моушн-дизайн?
Это оживление чего-либо, по средствам анимации.

This is Motion Graphics! https://www.behance.net/gallery/21451453/This-is-Motion-Graphics-

Любой объект, даже самой нетривиальной формы, может вобрать в себя искусство моушн-дизайна. Мо-диз достаточно молодой вид искусства, выросший из стартовых титров кинематографа в шестидесятые годы в Америке. Считается, что всё началось с фильма Альфреда Хичкока «На север через северо-запад», автором которых являлся Saul Bass. В России же моушн-дизайн начал своё развитие с рекламных роликов.

Основными инструментами в настоящее время являются: After Effects, Cinema4D, Softimage (ныне закрытый проект Autodesk). Но не стоит зацикливаться исключительно на этих программах — всё зависит исключительно от самого дизайнера. Ежегодно появляются новые средства для анимации, по средствам кода или отрисовки от кадра к кадру. Да и, конечно же, нет предела совершенству.

Моушн-дизайн, как и любое Digital-искусство, ежедневно развивается и пускается во все тяжкие. Так на свет появляются вот такие безумные штуки:

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

Денежный успех и развитие моушн-дизайн получил из-за работы в сегменте B2B: в среде презентаций и представления продукта, рекламных роликов и т.д. Но и как самостоятельный вид искусства он чувствует себя весьма комфортно. Появляется всё больше дизайнеров, которые выполняют проекты «for fun».

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

Павел Штылер,
Специально для Behance Russia

Давайте это анимируем: на что способен Motion Design :: РБК Pro

Материал раздела Основной

Современный интернет невозможно представить без анимации. Она помогает приюту «Супер Собака» пристраивать своих животных, а Versace — привлекать внимание к показам. Иван Кудрявцев (Setters) — о том, какие бизнес-задачи способен решить Motion Design

Что такое Motion Design?

Это любое видео, где есть анимированная графика. Даже простой ролик, на который накладываются субтитры или плашки с именами героев, уже можно назвать Motion Design. Маркетинг и SMM сложно представить без анимации. Люди потребляют контент быстро и в большом объеме, поэтому зацепить внимание аудитории и вовлечь ее в коммуникацию нужно с первого кадра. Это редко удается статичной картинке.

Какие задачи решает Motion Design?

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

Например, студия Petrick сделала рекламную кампанию для приюта «Супер Собака».

A Guide to Motion Design Principles

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

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

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

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

Истоки моушн-дизайна

Сочетание моушн-дизайна и UX относительно ново, но его корни уходят корнями в Дисней. Фрэнк Томас и Олли Джонстон были одними из самых уважаемых аниматоров Уолта Диснея и ключевыми участниками создания таких классических произведений, как Pinnochio , Bambi и Fantasia .Их 12 основных принципов анимации остаются влиятельными в анимационной графике для кино, телевидения и цифрового контента.

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

Современные дизайнеры попытались восполнить этот пробел. Один из наиболее наглядных примеров — 10 принципов дизайна движения , адаптация Disney, разработанная экспертом по анимации Хорхе Р.Канедо Эстрада. Тем не менее, выводы требуют перевода, если их нужно применять в дизайне цифровых продуктов целостно.

10 принципов моушн-дизайна Хорхе Р. Канедо Эстрада.

Самая амбициозная попытка переориентировать принципы движения на интерактивные элементы пользовательского интерфейса (и их значение для UX) — это работа Иссары Вилленскомера « UX in Motion Manifesto ». Его глубина поразительна, но это не легкое чтение.

При создании 12 принципов UX в движении , Вилленскомер:

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

Моушн-дизайн и пользовательский интерфейс: важные отличия

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

Движение — это больше, чем просто украшение

Моушн-дизайн — это не синоним UI-анимации. Это очень важно, потому что UI-анимация почти всегда рассматривается как косметическая запоздалая мысль, не имеющая отношения к UX (за исключением добавления очарования). Движение — это не украшение, это поведение, а поведение может только помочь или затруднить взаимодействие с пользователем.

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

Моушн-дизайн связан с двумя фундаментальными взаимодействиями: в реальном времени и не в реальном времени.

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

Взаимодействие в реальном времени: поведение при движении немедленно реагирует на действия пользователя. (Стэн Якусевич) Взаимодействие не в реальном времени: после взаимодействия пользователи должны ненадолго подождать и наблюдать за поведением при движении.(Виталий Рубцов)

Движение поддерживает юзабилити

Motion-дизайн должен поддерживать удобство использования четырьмя различными способами.

• Ожидание: Когда пользователи взаимодействуют с элементами пользовательского интерфейса, какое поведение движения они ожидают увидеть? Соответствует ли движение ожиданиям или вызывает недоумение?
• Непрерывность: Приводят ли взаимодействия к последовательному поведению при движении на протяжении всего взаимодействия с пользователем?
• Повествование: Связаны ли взаимодействия и вызываемое ими поведение движения с логической последовательностью событий, которая удовлетворяет намерения пользователя?
• Взаимосвязь: Как пространственные, эстетические и иерархические атрибуты элементов пользовательского интерфейса соотносятся друг с другом и влияют на принятие решений пользователем? Как движение влияет на существующие взаимосвязи между элементами?

12 Принципов анимационного дизайна цифровых продуктов

1.

Ослабление

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

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

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

2. Смещение и задержка

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

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

Когда пользователи перемещаются между экранами, смещение и задержка сигнализируют о существовании нескольких вариантов взаимодействия.

Это приложение для криптовалюты вводит сразу несколько элементов пользовательского интерфейса. Их появление немного смещено, чтобы проинформировать пользователей о том, что элементы связаны, но различны. (Gapsy Studio)

3. Воспитание

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

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

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

Здесь положение синего ползунка определяет непрозрачность фоновой маски, распространение эффекта свечения вокруг лампочки и числовое значение шкалы интенсивности света.(Ayoub Kada)

4. Преобразование

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

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

Преобразование сигнализирует о начале, середине и завершении загрузки. (Аарон Икер)

5. Изменение стоимости

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

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

Значения вводятся в движении, чтобы показать пользователям, что они могут повлиять на данные. (Тарас Мигулко)

6. Маскировка

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

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

Маскирование используется для перехода от захвата изображения к загрузке и включению в онлайн-магазин. (SELECTO)

7. Накладка

В 2D-пространстве нет глубины, и элементы пользовательского интерфейса могут перемещаться только по оси X или Y. Наложение создает иллюзию различия переднего и заднего плана в 2D-пространстве пользовательского интерфейса. Путем имитации глубины оверлей позволяет скрывать и раскрывать элементы в соответствии с потребностями пользователя.

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

Наложение позволяет пользователям быстро архивировать или удалять записи в этом приложении для заметок. (Каран Капур)

8. Клонирование

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

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

Пользователи могут с уверенностью нажимать на цветные кружки, потому что они явно исходят от значка «Добавить заметки». (Ариука)

9. Затмение

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

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

Скрытность предоставляет пользователям важные взаимодействия, позволяя им оставаться ориентированными на повествование о продукте.(Кайл Абаркес)

10. Параллакс

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

• Интерактивные элементы перемещаются быстрее и появляются на переднем плане.
• Неинтерактивные элементы движутся медленнее и уходят на задний план.

Parallax направляет пользователей к интерактивным элементам пользовательского интерфейса, позволяя неинтерактивным элементам оставаться на экране и сохранять единство дизайна.

С параллаксом наиболее важные интерактивные элементы перемещаются быстрее всего, в то время как неинтерактивные элементы перемещаются медленнее и отступают на задний план. (Тубик)

11. Размерность

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

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

Размерность подразумевает, что элементы 2D пользовательского интерфейса имеют несколько интерактивных сторон — точно так же, как объекты в физическом мире. (Санг Нгуен)

12. Dolly and Zoom

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

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

Dolly: взгляд пользователя приближается к фоновому изображению. (Янош) Масштаб: точка зрения пользователя не приближается к изображению. Скорее, увеличивается масштаб изображения.(Виктор Альдабальде)

Движение — это связь

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

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

---

Сообщите нам, что вы думаете! Пожалуйста, оставьте свои мысли, комментарии и отзывы ниже.

• • •

Дополнительная информация в блоге Toptal Design:

Все, что вам нужно знать о том, как стать дизайнером анимационного дизайна

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

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

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

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

Чем занимается дизайнер анимационной графики?

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

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

Кроме того, могут быть возможности и за пределами этих более традиционных приложений анимированной графики. Хосе Андрес, менеджер сообщества разработчиков Enklu Cloud, рассматривает дополненную реальность (AR) и виртуальную реальность (VR) как следующее крупное расширение в мир дизайнерских технологий. «Я углубился в мир интерактивных технологий, — говорит Андрес.«Инструменты, к которым у меня есть доступ сейчас, сильно изменили мой процесс проектирования. Я могу начать разрабатывать концепцию и создавать активы с помощью инструментов AR и VR намного быстрее, чем с помощью традиционного программного обеспечения для настольных компьютеров ».

В зависимости от того, какой тип анимированной графики вам нравится, вы можете закончить работу над дорогим фильмом в Голливуде или фрилансером вступительное слово для нового приложения для iPhone.

Где работают дизайнеры моушн-графики?

По данным Бюро статистики труда (BLS), аниматоры и дизайнеры мультимедиа обычно работают в киностудиях, компаниях по производству компьютерных систем и программного обеспечения, а также в рекламных агентствах. ¹ В 2018 году в этой отрасли также был очень высокий процент (59%) самозанятых работников, что свидетельствует о возможности организации удаленной работы в полевых условиях. ¹

«Наша студия специализируется на услугах по брендингу и графическому дизайну для вещательных компаний на Twitch®, YouTube® и Facebook Gaming®», — говорит Ник Авола из Visuals by Impulse. Авола объясняет, что все их моушн-дизайнеры работают удаленно. «Мы считаем, что благодаря ему художники становятся более счастливыми и эффективными. Наша команда может распоряжаться своим временем по собственному желанию.Отвлекающие факторы сведены к минимуму, и дизайнеры могут «оказаться в зоне».

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

Какие навыки нужны дизайнерам моушн-графики?

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

3-D моделирование

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

Анимационная перспектива

«Хороший трехмерный дизайнер понимает движение и временные рамки», — говорит Джозеф. «Объекты могут двигаться.Источники света тоже. Камера, с которой видят зрители, тоже может двигаться. Дизайнер может ставить сложные движения, по одному элементу за раз, и раскручивать их разными способами ».

Организация

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

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

Процедурная анимация

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

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

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

Текстурирование и световые эффекты

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

Понимание контекста большого изображения

«Хороший дизайнер знает, для чего будет использоваться его дизайн», — говорит Джозеф.Он подчеркивает, что видео, мультимедиа, игровой дизайн и виртуальная реальность растут и являются возможным направлением для дизайнеров анимированной графики. Но каждое отдельное приложение требует разного подхода. «Разберитесь во всех этих приложениях и как их спланировать».

Адаптивность

«Планы меняются, также как и объем и цели проекта», — говорит Авола, объясняя, что опытные дизайнеры движения должны быть готовы изменить свое первоначальное видение, чтобы учесть отзывы клиентов. «Оставайся скромным и бросай вызов ударам.”

Сроки

По словам Аволы, расчет времени — один из самых сложных и самых важных навыков для дизайнера анимированной графики. «Моушн-дизайн — инструмент, ориентированный на сюжет, и лучшие истории содержат естественный поток и ритм».

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

Заработная плата и перспективы работы дизайнера анимационного дизайна

Вы будете рады услышать, что дизайнеры анимированной графики довольно хорошо оплачиваются за свои технические знания. По данным BLS, средняя годовая заработная плата мультимедийных художников и аниматоров в 2018 году составляла 72 520 долларов США. ¹ Специалисты, зарабатывающие больше всего в этих областях, были наняты компаниями-разработчиками программного обеспечения и киноиндустрией. ¹

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

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

В этой карьере нет единого пути, но BLS объясняет, что работодатели для дизайнеров анимированной графики и аниматоров обычно предпочитают кандидатов со степенью бакалавра и сильным портфелем работ. ¹

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

Начните свою карьеру в области анимации

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

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

¹ Бюро статистики труда, Министерство труда США, Руководство по профессиональным перспективам, [по состоянию на декабрь 2019 г.] www.bls.gov/ooh/. Информация представляет собой усредненные данные по стране по перечисленным профессиям и включает работников всех уровней образования и опыта. Эти данные не отражают начальную зарплату.Условия трудоустройства в вашем районе могут отличаться.

ПРИМЕЧАНИЕ РЕДАКТОРА: эта статья была первоначально опубликована в 2015 году. С тех пор она была обновлена, чтобы включить информацию, относящуюся к 2020 году.

100 дней моушн-дизайна. Как я научился создавать 50 штук… | Тяньтянь Сюй | 100-дневный проект

1. Руководствуясь идеями

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

Например, я хотел выразить свою любовь к чтению.Чтобы воплотить в жизнь мою идею перелистывания книги, я нашел учебник «Откройте вашу книгу» на Youtube и узнал, как включить 3D-слой для 2D-объекта.

100 дней движения — Book Flip

Точно так же я хотел создать чашку латте с тыквенными специями. Я нашел учебник Flat 2D Smoke Clouds на Youtube и узнал, как использовать управление ползунком и выражение покачивания.

100 дней движения — латте с тыквенными специями

Подход, основанный на идеях, поддерживал меня в мотивации и подтолкнул к открытию новых техник.

2. Оставайся скромным

Я был оптимистично уверен в своих навыках моушн-дизайна в начале проекта. Моя уверенность быстро упала, когда я начал изучать After Effects — огромный пробел в навыках заставил меня осознать, насколько ограниченными были мой опыт и знания в области моушн-дизайна.

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

Эффект Даннинга-Крюгера

Чем больше я осознавал свою некомпетентность, тем скромнее становился.

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

3. Будьте 1%

Перед тем, как я начал 100-дневный проект, я тратил большую часть своего свободного времени на контент: социальные сети, Netflix… Иногда я даже мог пойти в онлайн-класс или почитать книгу. Но все это было просто вводом.

В интернет-культуре существует «правило 1%», которое описывает степень участия интернет-сообщества: только 1% участников сообщества активно создают новый контент, 9% участников редактируют контент и 90% участники только просматривают контент.

Правило 1% (Интернет-культура)

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

Я хочу принадлежать к 1% людей, создающих контент — эта мысль побудила меня приходить сюда каждый день, особенно когда это сложно.

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

Вот 10 креативщиков, которые вдохновляли меня на протяжении всего проекта:

Подайте заявку на участие в нашей программе Motion Designer

Обзор

Погрузитесь в мир анимированной графики

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

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

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

Содержание курса

Развитие новых навыков

Двухлетняя программа Motion Designer охватывает весь спектр навыков, необходимых для начала карьеры в индустрии движения. Для достижения успеха не требуется никакого предыдущего опыта. Программа состоит из 67 недель обучения в нашем кампусе в Карлскруне и 23 недель стажировки в любой точке мира.

Исследуй и твори

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

Практические техники

Поэкспериментируйте с различными техниками ремесла.К ним относятся принципы дизайна, повествование, раскадровка, рисование жизни, принципы анимации, покадровая анимация, дизайн персонажей и анимация, CEL-анимация, 2D-векторная анимация и 3D-анимация.
Научитесь работать с целым рядом различного отраслевого программного обеспечения — как на семинарах, так и на упражнениях.
Hyper Island предоставляет полный пакет Adobe.

Разработка и продвижение

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

Полное содержание курса

Карьерные возможности

Старт карьеры дизайнера анимации

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

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

Узнайте больше на странице выпускников Hyper Island в LinkedIn

Covid-19

IRL по сравнению с Интернетом?

С 2020 годом в зеркале заднего вида мы с нетерпением ждем наступающего года занятий! Первая неделя школы (9-13 августа) будет проходить очно в кампусе Hyper Island.Эта неделя, также известная как Неделя Hyper Island Way, — это возможность встретиться со своим классом и погрузиться в методологию Hyper Island. Ожидается ваше личное присутствие.

Недели 2 и 3 (16-27 августа) будут проходить онлайн для всех студентов. Эти недели известны как недели инноваций и видения, и они наполнены вдохновляющим опытом и встречами с отраслевыми экспертами. Вы присоединитесь к этим 2 неделям (только) удаленно.

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

Karlskrona Campus

История Hyper Island началась в 1996 году с первого класса цифровых медиа в старой переоборудованной тюрьме в Карлскруне. Спустя более 20 лет кампус Карлскруны остается лучшим местом для творческих экспериментов и инноваций.

Узнайте больше о нашей программе, вдохновитесь рассказами наших выпускников и подайте заявку сегодня.

Посетите наш кампус Карлскруна

Посмотрите это видео и узнайте, как подать заявку на участие в наших дневных программах получения диплома в качестве студента из Северных стран. Процесс подачи заявки отличается для иностранных студентов — если вы подаете заявку из-за пределов Северного региона, пожалуйста, свяжитесь с [email protected] — наша команда будет рада помочь

Наша методология

The Hyper Island Way

Hyper Island methodology основан на подходе, ориентированном на учащегося и основанном на опыте. Мы облегчаем учебные поездки, в которых открытие, раскрытие, применение и размышление — все это часть процесса, посредством которого участники приобретают полезные навыки и знания, которые они могут сразу же применить.

Учитесь на практике

Стройте, создавайте, экспериментируйте! Благодаря более чем 20-летнему опыту мы знаем, что лучше всего люди учатся, активно действуя.

Работа в команде

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

Готовность к работе

Мы строим обучение на реальных примерах и практических задачах, чтобы все это сразу стало актуальным и полезным.

Глобальная сеть экспертов

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

Программа Motion Designer в Карлскруне дала мне творческие инструменты, необходимые для конкуренции в постоянно развивающейся отрасли, сосредоточив внимание на моем личном развитии.

— Александр Шванднер

Выпускник, дизайнер движения Карлскруна

Лучшее профессиональное образование

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

Кабинет в Карлскруне
С богатейшим историческим наследием Швеции прямо за дверью и панорамным видом на океан, Hyper Island Karlskrona является идеальным местом для творчества. Наши студенты в Карлскруне развивают свои таланты в атмосфере, полной вдохновляющей красоты. Жить в Карлскруне — значит жить удивительно близко к Европе.Несколько ежедневных отправлений в Копенгаген отправляются поездом с центрального вокзала.

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

FAQ’s

Успешные абитуриенты должны иметь как минимум аттестат о среднем образовании («Gymnasieexamen») или его иностранный эквивалент. Предыдущий опыт работы не требуется.

Для иностранных / платных студентов есть два стандартных варианта оплаты для этой программы: (1) Оплатите всю плату за обучение сразу, чтобы получить скидку 5%; (2) Оплатите обучение тремя частями.

Программа Motion Designer требует, чтобы вы проживали в кампусе Hyper Island в Карлскруне. Вы будете учиться с понедельника по пятницу с 09:00 до 17:00. Это означает, что вам нужно будет переехать в течение первых 67 недель программы. Hyper Island не рекомендует работать во время программы.

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

Hyper Island предоставит необходимую документацию для подачи заявлений в Шведское миграционное агентство (Migrationsverket) для студентов, которым требуется студенческий вид на жительство. Чтобы получить эту резервную копию от Hyper Island, вы должны быть платным иностранным студентом, который прошел с нами процесс международного приема. Если вы не уверены, являетесь ли вы иностранным студентом, свяжитесь с нами.

Чтобы считаться скандинавским студентом, имеющим право на бесплатное образование YH, вы ДОЛЖНЫ иметь личный идентификационный номер И соответствовать хотя бы одному из следующих критериев:
1) Быть гражданином Швеции, Исландии, Норвегии, Дании, Финляндии или любого другого смежных территорий.
2) Иметь право постоянного проживания в одной из указанных выше стран.
3) Иметь временное право на проживание в Швеции на весь срок программы. Вас могут попросить загрузить доказательство вашего права на проживание.
Ваше право на проживание не должно зависеть от вашего обучения в Hyper Island. Обратите внимание, что Hyper Island не может оказывать какую-либо иммиграционную поддержку или спонсорство студентам из Северных стран.

Где сейчас работают наши выпускники

Программа стажировки

Введение в моушн-дизайн и анимационные кривые в After Effects (Holke 79).Онлайн-курс

Добавление движения к графическому дизайну представляет собой новый уровень самовыражения для любого творца, но также и еще один уровень сложности. Чтобы облегчить этот переход, Борха Холке — дизайнер движения с более чем 10-летним опытом и клиентами, такими как Canal + и Converse — научит вас осваивать синхронизацию , и кривые ускорения в Adobe After Effects, чтобы помочь вам создать свои собственные язык движения.

В этом курсе вы научитесь с нуля использовать профессиональные инструменты анимации, доступные в After Effects.

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

Далее вы узнаете об Adobe After Effects и о том, как Холке использовал его в своей карьере. Оттуда вы установите его на свой компьютер, если у вас его еще нет.

Вы изучите некоторые основные инструменты программы: слои, слои-фигуры, ключевых кадров, , кривые анимации и рендеров, .

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

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

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

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

Для графических дизайнеров, которые хотят научиться использовать движение как слой выражения в своих проектах.

Вам не понадобится предыдущий опыт работы с Adobe After Effects; Вам понадобится только компьютер с установленным программным обеспечением и интерес к графическому дизайну и моушн-дизайну .

Впервые в Adobe After Effects? В этом случае мы рекомендуем пройти курсы «Основы Domestika», чтобы узнать, как использовать программное обеспечение: Введение в After Effects.

Изучите моушн-дизайн в Figma. Получить работу.

Мы гарантируем, что это наиболее полный онлайн-курс по моушн-дизайну с использованием Figma.Микровзаимодействия, анимация, создание красивого UX / UI и многое другое! Вы изучите современные принципы и передовые практики моушн-дизайна, создавая реальные дизайнерские проекты в Figma, шаг за шагом вместе с профессионалами индустрии дизайна.

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

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

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

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

Мы будем использовать Figma и Figma Smart Animate для достижения этой цели, потому что теперь это инструмент №1, используемый ведущими современными дизайнерами. Figma заменяет все устаревшие инструменты дизайна прошлого (мы говорим о вас, Adobe After Effects).

Мы также предоставляем вам все файлы Figma, шаблоны дизайна премиум-класса и ресурсы в этом курсе, так что вы можете сохранить и использовать их при работе со всеми своими будущими клиентами!

Учебная программа очень практичная. Даниэль шаг за шагом проведет вас от начала до конца, чтобы стать дизайнером движения, который сможет создавать свои собственные красивые профессиональные проекты.

Курс охватывает следующие темы:

1. 1.Введение в Figma — изучите различные части Figma и то, что вам нужно получить начал. Мы углубимся в важные детали, чтобы вы смогли начать работу, чтобы не было путаницы.

2. 2. Введение в Smart Animate — Smart Animate от Figma меняет правила игры. Вы узнаете, как изменить все различные свойства, которые он поддерживает, а затем применить эти знания при создании и объяснении некоторых простых прототипов.

   • Масштаб

   • Позиция

   • Непрозрачность

   • Вращение

   • Заливка

   • Упражнение: создание простого взаимодействия

   • Упражнение: анимация элементов навигации

   • Упражнение: создание большого прототипа

3. 3.Проект: приложение Photo Inspiration — вы перейдете к своему первому проекту, где воспользуетесь предоставленными ресурсами и уже изученными знаниями для создания собственного прототипа мобильного приложения Photo Inspiration.

   • Активы проектирования

   • Фильтрация по категориям

   • Переходы экрана + взаимодействия при перетаскивании

   • Простые микровзаимодействия

4. 4.Почему движение так важно? Вы узнаете, как движение играет важную роль в создании продуктов, которые можно использовать, и как оно помогает создавать повествование и укрепляет ментальные модели.

   • Распространенные заблуждения о моушн-дизайне

   • Как движение помогает повысить удобство использования

   • Повествование + ментальные модели

5. 5.Принципы моушн-дизайна — в этом разделе вы узнаете о принципах моушн-дизайна и о том, что делает они являются неотъемлемой частью успеха любого дизайна.

6. 6. Создание движения в Figma — время объединить теорию и практические знания, которые вы получили, и прыгнуть прямо обратно в Figma, чтобы построить несколько меньших прототипов. Даниэль шаг за шагом проведет вас через каждое упражнение.

7. 7. Процесс моушн-дизайна — Как моушн-дизайн вписывается в «нормальный процесс дизайна»? Не надо беспокоимся мы вас прикрыли. Дэниел объяснит свой процесс определения правильных решений движения для пользователя. потребности.

8. 8. Проект: Карусель National Geographic — Узнайте, как создавать простые и сложные версия эффекта карусели в Figma.

9. 9. Микровзаимодействия — Узнайте глубже, почему микровзаимодействия так важны. Затем ты прыгнешь Правильно в Figma, чтобы создать свою собственную анимацию с Даниэлем, используя плагин Figmotion.

10. 10. Проект: Мобильное приложение для умного дома — Приложения для умного дома становятся все более популярными. Научиться создать простой домашний экран и затем анимировать его с помощью Figma.Следуйте за Даниэлем, пока он объясняет как он создали сложное взаимодействие по регулировке температуры.

    • Создание главного экрана

    • Создание взаимодействия с переключателем

    • Взаимодействие с регулировкой температуры

11. 11.Обратная связь — узнайте, как правильно организовать и собрать конструктивную обратную связь для вашего конструкции.

12. 12. Проект: Целевая страница для ремонта дома. Когда-нибудь хотелось разработать комплексную целевую страницу с анимированные элементы? Вот твой шанс. Следуйте за Даниэлем, пока он проведет вас через процесс разрушения посадка страницу на несколько прототипов.

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

    • Движение в элементах формы

    • Прогресс формы

    • Анимация содержимого формы

    • Входы + кнопки: Часть 1

    • Входы + кнопки: Часть 2

    • Входы + кнопки: Часть 3

    • Входы + кнопки: Часть 4

    • Подсказки

    • Вход карусели

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

15. 15. Демонстрация ваших прототипов. У вас есть все эти прототипы, но как вы их продемонстрируете? портфолио? Мы рассмотрим несколько вариантов записи вашего прототипа как для Mac, так и для Windows. а также экспортируйте его в предпочитаемый формат.

    • Kap для Mac

    • Как использовать Кап

    • Использование вашего Kap GIF в Figma

    • Screenity для Chrome + Windows

    • Как использовать Screenity

    • Использование экранного GIF-изображения в Figma

Выпускники Zero To Mastery сейчас работают в Google, Tesla, Amazon, Apple, IBM, JP Morgan, Facebook, Shopify и других ведущих технологических компаниях.Они также работа в качестве лучших фрилансеров, получающих зарплату при удаленной работе по всему миру. Это можешь быть ты.

И тебе нечего терять. Вы можете начать обучение прямо сейчас, и если этот курс не соответствует вашим ожиданиям, мы вернем вам 100% в течение 30 дней. Никаких хлопот и вопросов.

Нажмите «Начать обучение», чтобы присоединиться к Академии и начать изучать моушн-дизайн. Увидимся внутри курс!

Motion Graphics vs.Анимация: в чем разница?

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

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

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

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

Дизайн анимированной графики от Giaky®

Что такое анимированная графика?

–

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

Хотите, чтобы столбики на графике приподнялись, чтобы добавить визуального чутья? Это анимированная графика.

Хотите, чтобы на вашем сайте вращался логотип? Это анимированная графика.

Анимационная графика приводит в движение формы и буквы. Дизайн через Эбигейл Ким

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

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

Зачем возиться с анимированной графикой вместо гораздо более дешевой статической инфографики?

Дизайн приложения для анимированной графики от Kid Mindfreak

Анимированная графика может визуально иллюстрировать сложные идеи. Думайте о анимированной графике как о наглядном пособии. Некоторые идеи (особенно большие, абстрактные) трудно объяснить словами или неподвижными изображениями. Несколько секунд анимированной графики могут все прояснить.Просто подумайте о том, как поля пароля иногда вибрируют или становятся красными, когда вы вводите неправильный пароль, мгновенно сигнализируя о том, что вам нужно повторить попытку.

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

Что такое анимация?

–

Анимация — это более широкий общий термин, под которым попадает анимированная графика. История анимации насчитывает более 100 лет. (Хотите покопаться в этой истории? Посмотрите это замечательное руководство по анимации).

Эта анимация рассказывает о том, что происходит при отправке текстовых сообщений во время вождения. Анимационный дизайн от SB.D

Анимация — это любой метод, который заставляет статические объекты или изображения двигаться, будь то рисованные мультфильмы, компьютерная графика, аниме, пластилин или анимированная графика.Эти категории являются , а не взаимоисключающими. Большая часть анимированной графики выполняется с помощью CGI, но теоретически вы также можете создавать анимированную графику, нарисованную от руки.

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

Напротив, анимация как особая форма искусства больше фокусируется на кинематографических эффектах и ​​методах повествования для создания повествования.

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

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

Итак, когда вы используете термин «анимация» по сравнению с анимированной графикой?

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

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

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

—

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

Последовательность повествовательного названия для конференции и фестивалей «Юг через Юго-Запад» через герб

Видео — это предпочтительный тип контента от брендов №1: 93% цифровых маркетологов считают, что видео в социальных сетях привлекло им новых клиентов.Более половины пользователей взаимодействуют с брендом после просмотра одного из их видео в социальных сетях.

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

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

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

Видео

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

Когда использовать другие методы анимации

Анимированный дизайн от fatchvrdsgn

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

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

Маркетинг в движении

—

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

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