UI-анимация

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

• 9занятий
• 3часа в неделю
• 5недель

Кому подойдет курс:

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

Чему вы научитесь:

• формировать анимационный процесс: подготовка макета, составление сценария, анимация блоков, запись видео.
• использовать инструменты создания анимации: тонкости Principle, возможности Origami, Figma (именно анимация)
• разбираться в фундаментальных принципах UI-анимации.
• создавать презентации для клиентов и шоты для портфолио.
• корректно передавать параметры анимации в разработку.

Программа:

Урок 1.

• смысл UI-анимации, связь с UX/UI-дизайном.
• что является результатом, для кого он, разбор примеров.
• поэтапный подход к разработке UI-анимации.
• отличие продукта от промо-проекта в плоскости анимации.
• где посмотреть готовые решения.
• сравнение инструментария.
• сценарии пользователя в анимации.
• google material design.
• функции UI-анимации.

Урок 2.

• возможности Principle.
• о 12 принципах анимации.
• разбор 1−5 принципов: easing, offset, transform, parallax, fade.
• что можно передать в разработку.

Урок 3

• инструменты Principle: drivers, components, hover, page scrolling.
• детальная работа с Parallax.

Урок 4.

• разбор 6−10 принципов: parenting, masking, overlay, clone, zoom.
• инструмент Principle drag.
• детальный разбор маскирования.

Урок 5. Вебинар с разбором работ.

Урок 6. Завершение работы с Principle: разработка большого проекта на основе продуманного сценария. Пример создания проекта.

Урок 7.

• возможности Origami, система нодов.
• практика с инструментами: страницы, параллакс, интерактивный текст, работа с изображением, loop, particles.
• 11−12 принципы анимации: размерность, привязка значений.
• разбор большого проекта в Origami.

Урок 8.

• анимационные возможности Figma.
• в каких случаях нужен After Effects.
• составление Keynote-презентации.
• ключевые темы презентации.

Урок 9. Заключительный вебинар с разбором работ.

Необходимые материалы и инструменты:

• macintosh.
• платные/пробные Sketch, Principle.
• бесплатный Origami, Figma.

Как проходит обучение

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

Что в итоге:

Практическое понимание, что UI-анимация — это необходимая часть диджитал-дизайна, плюс возможность ее качественной реализации и демонстрации.