УВАГА Весь курс ви можете придбати прямо на цій платформі. Доступ надається автоматично після оплати курсу! Модулі відкриваються поступово кожний тиждень.AnimationON — це професійний курс для ux/ui designers, web designers.
Ви отримаєте системні знання про Figma Autolayout, Component, Varaiant, Налаштування Interaction простих анімацій а також складних. Навчитесь створювати сценарії ідей простих анімації для UI елементах, та для складних WEB.
Курс включає:
- 70+ відео матеріалів та 10+ Бонусів UI анімацій (75% це практика)
- Все в записі 2 місяці + 1 місяць додаткового доступу
- Бонусні відео, лінки на приклади анімацій для дизайнера та як реалізувати кодом (показ для дизанера)
- Створиш 3 кейса та 10 концептів для свого портфоліо
- Переніс анімації в Lottie, Figma Make та модуль про АІ в анімації
- Упакуєш свої анімації в презентації для Behance / Dribbble / Upwork тощо
- Чат підтримки
- Сертифікат про підвищення кваліфікації
P.S. При оплаті повної суми, модуль 3D Spline у подарунок та 20+ Бонусних Анімацій
Курс фокусується на Animation & Interaction у Figma для UI/UX та Web-дизайнерів. Велика частина присвячена практиці: створення складних анімацій, принципам Disney, роботі з AI, Lottie та оформленню портфоліо.
Програма курсу
Переднавчання. Запис Шалена Анімація
Міні-курс "Шалена Анімація"
Це вижимка про основу роботи з анімацією, як дизайнеру працювати із анімацією, не втрачаючи UX, а також як створювати, якими інструментами та правилами.
Якщо ви вже проходили окремо це міні навчання, перейдіть на кожний урок і натисність кнопку підтвердження перегляду і йдіть далі.
- Введення в анімацію та взаємодію у Figma
- Інтерактивні прототипи в Figma
- Види анімації і їх застосування в дизайні
- Техніки і принципи анімації для поліпшення UX
- Практичні кейси: застосування анімації у реальних проєктах
- Презентація анімації клієнтам і команді
00 Модуль - Про курс
Перегляд відео на 16хв
00 Знайомство
01 Про курс | Телеграм канали
01 Модуль - Теорія. Як працює анімація
Перегляд відео на 2 год 10 хв
7. 00 Update program Figma
8. 01 Interaction види / налаштування / використання
9. 02 Анімація у дизайні
- 03 Smart Animation
- 04 Bezier vs Spring Animation
- 05 Швидкість анімації
- 06 Принципів Веб Анімації. 12 типів
Загальний огляд на 1 год 17хв
14. 01 Практика. Привʼязки
15. 02 Практика. Autolayout — Важлива складова для дизайну
- 03 Практика. Component / Variants
- 04 Практика. Variants налаштування Interaction UI elements
- 05 Атоми та молекули анімації
Загальний перегляд модулю 5 год
- 01 Анімація з легкістю. Як не робити помилки
- 02 Налаштування interaction та його вид
- и
[*]03 Open & Swap Overlay
[*]04 Interaction Back & Scroll to
[*]05 Interaction On Drag / While Hover / Mouse
[*]06 Поглиблений процес UI Interaction
[*]07 Огляд реального проєкту по налаштуванню переходів та ховерів
[*]08 Принципи 12 Disney у UI. Практика (NEW)
04 Модуль - Архітектура Motion: Сценарій крок за кроком
Загальний перегляд - 3 год
04.1 Сторібордінгу + User intent → тригери та сценарії
- Початок побудови сценарію
- Побудова сцени атомів
- Швидкість анімацій сцени
- Будуємо сценарій молекули
- Screen wipe
- Слайдер тексту з появою по колу (Дизайн Інтерʼєру столів)
- Поява кнопки (малюнок пензликом)
- Рух ефекту по колу для пагінації слайдера (Дизайн Інтерʼєру столів)
- Ховер появи елементів в каталозі
- Slider Animation смужки (Дизайн Інтерʼєру столів)
- Помилки із слайдером. Уникаємо!
- Паралакс поява та ефект реального руху (Сайт байків)
- Ефект реального руху та появи інфо (Сайт байків)
- Розкриття акардіону із поворотом UI закриття та відкриття (Сайт байків)
- Помилки з паралаксом. Уникаємо!
Загальний перегляд відео 1 год 15 хв
- Паралакс поява та ефект реального руху (Сайт байків)
- Ефект реального руху та появи інфо (Сайт байків)
- Розкриття акардіону із поворотом UI закриття та відкриття (Сайт байків)
- Помилки з паралаксом. Уникаємо!
Загальний час перегляду 30хв
Цей модуль здається коротким, але в нього ціла побудова не тільки 3D а і створення дизайну
- 3D для сайту у Figma
- Помилка з пляшкою 3d. Уникаємо!
07 Модуль - AI & Figma Make — суперсила дизайнера
- На яких сервісах потрібно зареєструватися?
- Midjourney. Робота з штучним інтелектом для фото
- AI — Анімація руху картинки
- AI Робота з відео (моушн ефект)
- 3D панорама 360 градусів AI
- Переніс Сайту у Figma Make і налаштування його (New Update)
- AI відео для анімації (New Update)
- Дизайн продукту з відео анімацією (New Update)
Принцип оформлення інструкції
Guideline доопрацювання (NEW Update)
09 Модуль - Lottie — продакшн-анімація без болю (NEW Update)
50. Передача анімації в Lottie
10 Модуль - Секрети розробки
Перегляд відео 3 год 15 хв
- Співпраця з девелопером
- Де брати реальні ідеї?
- Адаптив анімації
Загальний час перегляду 1 год 10хв
- Як зберігати анімацію для портфоліо
- Портфоліо на Behance / Dribbble
- БОНУС Практика Behance
- Створення Motion Video свого портфоліо (NEW Update)
4 WOW Анімацій для Інтернет магазину рівня Apple
Загальний перегляд - 50хв
- Зміна карток від картинки до тексту (Сайт техніки)
- Робота із sticky (Сайт техніки)
- Появи відео під час скролу. Ефект рідини (Сайт техніки)
- Динаміка скролу елементів та слайдерів (Сайт техніки)
- Помилки створення анімації. Уникаємо!
- Кругова заміна фону та перелистування слайдеру товарів (Музичний концепт)
- Прокручування товару в коробку (Музичний концепт)
- Програвач плеєру (Музичний концепт)
- Назва уроку (тимчасова)
Modern slider animation
slider
Трендовий слайдер головного банеру
4 Анімації Українського сайту товарів
Hover burger menu
Анімація банеру
Blur&Button
Робота із Stiky
- Рухаючий курсор у Figma
- Smart Animation першого екрану
- Анімація у Landing page NFT
- Hover кнопки
- Animation gradients
- Animation items
- Animation card
- Animation elements
Знижка -20% на консультацію
Сертифікат (умови)
Ціна: 12 000 ГРН ~232,90 EUR
Уроків: 89
Мова курсу: Українська
https://www.rosina.design/animation/animation-on https://www.rosina.design/animation/animation-on https://www.instagram.com/rosi.uiux/