Как стартовать в моушн-дизайне? Советы новичкам, часть 2. Портфолио. Задания для моушн дизайна


"Как на этом заработать или ,может быть, связать с ним будущую профессию?"

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

Для самостоятельного развития возможностей куча. Я например, азы after effects изучила на даче за пару недель по этому курсу - https://www.youtube.com/playlist?list=PLCDA26761262CF47B

Вот ресурс с видеоуроками на русском - http://videosmile.ru 

Так же рекомендую вступить в эту группу https://vk.com/motiongraphics самый крупный вконтакте ресурс. Там по темам можно найти все, что интересует, так же там хорошо следить за новыми работами, держать руку на пульсе, в общем. 

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

Про типографику вот еще классная группа https://vk.com/nicetype

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

Есть школа компьютерной графики RealTime, там есть короткие вводные курсы типа этого http://www.realtime.ru/courses/adobe-after-effects-intro/ еще там классно что можно купить курс проживанием и питанием, если Вы не москвич, и устроить себе такой моушн-отпуск)

Что касается заработка, то сразу, естественно, большого заработка не получится. Когда появятся какие-то навыки и портфолио, можно попробовать наняться в студию интерном(в том же AE регулярно вешают обявление о поиске работника), вообще, как мне кажется, быстрее всего обучаешься на живых проектах. Многие зарабатывают исключительно фрилансом, ищут клиентов через сарафанное радио или выкладывая портфолио в профильные группы.  

Миллион, в общем, возможностей.

thequestion.ru

Как стартовать в моушн-дизайне? Советы новичкам, часть 2. Портфолио

Портфолио - главное доказательство того, что вы умеете что-то делать.

Портфолио моушн-дизайнера - это примеры анимированных элементов. Да, не только видео - любых анимированных элементов.

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

1. Реклама;

2. Видео-презентации, эксплейнеры;

3. Заставки для ютуб- или теле-каналов;

4. Анимированная айдентика;

5. Анимация интерфейсов;

6. Эффекты для видео.

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

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

Есть всего 3 варианта создания первых работ для портфолио:

1. Сделать что-то бесплатно для друзей.

2. Сделать бесплатный концепт для вымышленного заказчика.

3. Сделать для заказчика тестовое задание бесплатно.

1. Как сделать что-то бесплатно для друзей?

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

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

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

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

2. Бесплатный концепт для вымышленного заказчика

motionhero.teachable.com

Почему моушн-дизайн не должен быть сложным

Моушн-дизайн помогает сделать интерфейсы выразительными и простыми в использовании. Несмотря на большой потенциал, он, пожалуй, наименее понятая из всех дисциплин дизайна. Это может быть связано с тем, что он является одним из новичков в семействе дизайна интерфейсов. Если визуальный дизайн и дизайн взаимодействия восходят к ранним графическим интерфейсам, то моушн-дизайн вынужден был ждать, пока современное оборудование начнет плавно рендерить анимацию. Частичное совпадение моушн-дизайна и традиционной анимации также вносит неразбериху. Можно потратить целую жизнь на освоение 12 принципов анимации Диснея, означает ли это, что моушен-дизайн интерфейсов также сложен? Люди часто говорят мне, что сложно проектировать движение или, что выбор правильных значений неоднозначен. Я утверждаю, что в наиболее важных областях интерфейса, моушен-дизайн может и должен быть простым.

С чего начать

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

Паттерны перехода

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

  1. Переходы на основе контейнера
  2. Переходы без контейнера.

Переходы на основе контейнера

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

  1. Анимируйте контейнер с помощью стандартной плавности Material design (это означает, что он быстро ускоряется, а затем мягко замедляется). В этом примере размеры контейнера и угловые радиусы анимированы от круглой кнопки до прямоугольника, который заполняет экран.

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

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

Если контейнер входит в границы экрана, он исчезает и масштабируется. Вместо анимирования с масштаба 0%, он начинается с 95%, чтобы избежать чрезмерного внимания к переходу. Масштабная анимация использует плавное замедление Material design, то есть начинается на максимальной скорости и мягко замедляется. Чтобы выйти, контейнер просто затухает без масштабирования. Анимация выхода должна быть более тонкой, чем анимация входа, чтобы сосредоточить внимание на новом контенте.Анимация замедлилась, чтобы проиллюстрировать, как контейнеры могут появляться при помощи анимации затухания и масштабирования

Переходы без контейнера

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

  1. Стартовая композиция исчезает затухая, тогда как конечная композиция медленно появляется.
  2. Когда конечная композиция появляется, она также тонко масштабируется с помощью плавного замедления Material design. Опять же, масштаб применяется только к появляющейся композиции, чтобы выделить новый контент в отличии от старого.

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

Лучше практики

Сохраняйте простоту

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

Выберите правильную продолжительность и плавность

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

Плавность описывает скорость, с которой анимация ускоряется и замедляется. Большинство навигационных переходов используют стандартную плавность Material design, которая является асимметричным типом плавности. Это означает, что элементы быстро ускоряются, а затем осторожно замедляются, чтобы сосредоточить внимание на конце перехода. Это придает анимации естественность, поскольку объекты в реальном мире не стартуют и не останавливаются внезапно. Если переход кажется жестким или роботизированным, вероятнее всего была ошибочно выбрана, симметричная или линейная плавность.Анимация замедлилась, чтобы проиллюстрировать различные типы плавностиПаттерны и лучшие практики, изложенные в этой статье, предназначены для создания практичного и тонкого стиля движения. Это подходит для большинства приложений, однако некоторые бренды могут требовать более интенсивного выражения стиля. Чтобы узнать больше о стилизации движения, ознакомьтесь с нашими инструкциями по настройке здесь.

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

Спасибо Brenton Simpson.

ux.pub

Моушн-дизайнерам: 8 сайтов для вдохновения

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

 

Motiongrapher

 

Motiongrapher – «мировой рупор в индустрии моушн дизайна». Отличный ресурс. Служит источником вдохновения для творческих людей со всего мира. Здесь вы найдете все самое новое и интересное в сфере графики и дизайна:

  •  лучшие работы студий и фрилансеров;
  •  интервью с профессиональными дизайнерами.

Проект некоммерческий. Во главе Motiongrapher – профессиональные дизайнеры и режиссеры. Сайт постоянно обновляется и радует качественным и профессиональным материалом.

 

Перейти на сайт

 

From up north

 

From up north – международный сайт для творческих людей. Кураторы сайта отбирают лучшее в сферах:

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

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

 

Перейти на сайт

 

Behance

 

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

 

Перейти на сайт

 

Vimeo

 

Vimeo — сервис для ценителей качественного и профессионального видео. Главное отличие Vimeo от популярного видеохостинга YouTube — серьезная и креативная аудитория, которая знает толк в работах и критике. Рекомендуем раздел Vimeo Staff Picks, с сотнями тщательно отобранных работ моушн дизайнеров и кинолюбителей.

 

 

Art of the title

 

Art of the title – уникальный ресурс с огромной библиотекой заставок и титров к фильмам, сериалам, мультфильмам. Кроме самих видео на сайте вас ждут интервью с дизайнерами о том, как создавался тот или иной проект: от идеи до технических деталей. Отличный сайт, на котором можно найти много интересного и почерпнуть вдохновение.

Перейти на сайт

 

Motion Graphics Served

 

Motion Graphics Served – «дочерний» проект Behance, всецело посвящен моушн графике. Здесь выкладывают работы лучших профессионалов Behance.

 

Перейти на сайт

 

Inspiration Grid

 

Inspiration Grid курируется сайтом From Up North. Проект представляет собой галерею с работами талантливых художников, фотографов и дизайнеров со всего мира. Моушн дизайн представлен категорией Video & motion.

 

Перейти на сайт

 

Dribbble

 

Dribbble – социальная сеть для дизайнеров со всего мира. Платформа работает по принципу Твиттера, только вместо сообщений – так называемые шоты (shots) – небольшие образцы дизайна. Мало кто знает, что помимо статичных изображений в разделе After Effects много интересных Gif’ок. Сайт тщательно отбирает пользователей, поэтому, в основном, здесь можно встретить работы очень высокого качества.

 

Перейти на сайт

 

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

 

Удачи Вам и побольше вдохновения!

 

Источник: https://videosmile.ru/lessons/read/moushn-dizayneram-8-saytov-dlya-vdohnoveniya.html

flatro.ru