UI анімація інтерфейсів – відеокурс

Мова викладання в курсі – російська. Незабаром буде доступна українська версія цього курсу.

Відеозаписи лекцій без зворотного зв’язку та участі викладача. Ви отримаєте доступ до матеріалів одразу після оплати.

Курс ідеально підійде

Веб-дизайнер

На курсі ви навчитеся робити анімовані прелодери, іконки, промосайти, додатки та інші анімовані роботи, які прикрасять ваше портфоліо.

UI/UX-дизайнер

Ви опануєте анімацію інтерфейсів, зможете створювати мікровзаємодії та плавну анімацію.

Motion-дизайнер

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

]Чого ви навчитеся

На курсі ви дізнаєтеся, як створюється і де застосовується анімація інтерфейсів, які види анімації існують, як оживити презентацію і зробити креатив для відеобаннера.

– Анімувати інтерфейси.
– Готувати матеріали до анімації.
– Створювати мікровзаємодії.
– Створювати плавну анімацію.
– Писати сценарії роликів і робити розкадрування.
– Створювати анімацію статичної концепції.
– Проектувати ефектні презентації для клієнта.
– Працювати в AfterEffects, Principle, Webflow, Atomic.

Програма курсу

1. Вступ до motion design

– Знайомство.
– Введення в motion design: тренди, різновиди, застосування.

2. 12 принципів анімації Walt Disney Studios

– Принципи побудови анімації, таймінги та ізинги.
– Передчуття та розтягування.
– Управління увагою.
– Як правила класичної анімації працюють у UI.

3. Motion design в інтерфейсах

– Роль анімації в інтерфейсах сайтів і додатків.
– Розбір сфери застосування: створення прототипів зі зворотним зв’язком, мікровзаємодії, анімація іконок, прелоадерів, відеобекграундів, презентацій і шоурилів. WebGL.
– Основні інструменти та формати.

4. After Effects

– Можливості програми.
– Знайомство з інтерфейсом та інструментами.
– Composition і Precompose.
– Маски.
– Ключі.
– Перші кроки в After Effects.
– Навчаємося на кішках: анімація примітивів і ключових параметрів.

5. Іконки – занурення у світ мікроанімації

– Як придумати анімацію іконок.
– Підготовка вектора.
– Анімація.
– Конвертація в GIF.

6. Прелоадери

– Цікаві приклади прелоадерів.
– Природа прелоадера.
– Придумуємо, малюємо, анімуємо.

7. Material design

– Матеріал як метафора в концепції material design.
– Філософія концепції material design.
– Суть і основні принципи.
– Розглянемо приклади material design.
– Основні фішки анімації material design.
– Репозиторії та готові пресети.

8. Principle

– Введення та огляд найперспективнішого редактора для швидкої анімації інтерфейсних елементів і прототипів.
– Можливості програми Principle.
– Знайомство з інтерфейсом і принципами роботи.
– Робота з шарами.
– Панель анімації та драйвери.
– Анімація сценарію.

9. Webflow – інструмент прототипування веб-інтерфейсів

– Знайомство з веб-інтерфейсом, що дає змогу створювати адаптивні анімовані прототипи сайтів.
– Огляд інтерфейсу програми, інструментарію, прикладів.
– Перетворимо лендінг із PSD на HTML і накрутимо різної анімації на скрол і появу блоків.

10. Atomic

– Можливості програми.
– Знайомство з інтерфейсом і принципами роботи.
– Компоненти, екшни та анімація.
– Імпорт зі скетча і створення анімації сценарію.

11. анімація статичної концепції.

– Пошук референсів.
– Написання сценарію. Розстановка акцентів.
– Ключові фішки в анімації.
– Підготовка PSD/AI-файлів до анімації. Таймінг, правильні кліки і скроли.

12. чиста магія – створення шоурілу, що продає.

– Що впливає на створення шоуріла, який продає.
– Створюємо шоуріл.

13. Робочі будні моушн-дизайнера

– Розповідаємо про штатний робочий день моушн-дизайнера.
– Методи оптимізації робочого часу та простору.
– Правильний симбіоз програм і репозиторіїв.
– Територія відповідальності.
– Ініціатива та пошук ідей.

14. Анімація концепції для презентації клієнту

– Статичні та динамічні мокапи.
– Монтаж.
– Звук.
– Переходи між сценами.
– Відеохостинги.