Animation ON для UX/UI & WEB Designers

Росина
Введення в анімацію та взаємодію у Figma
Інтерактивні прототипи в Figma
Види анімації і їх застосування в дизайні
Техніки і принципи анімації для поліпшення UX
Практичні кейси: застосування анімації у реальних проєктах
Презентація анімації клієнтам і команді
00 Знайомство
01 Про курс | Телеграм канали
00 Update program Figma
01 Interaction види / налаштування / використання
02 Анімація у дизайні
03 Smart Animation
04 Bezier vs Spring Animation
05 Швидкість анімації
06 Принципів Веб Анімації. 12 типів
01 Практика. Привʼязки
02 Практика. Autolayout - Важлива складова для дизайну
03 Практика. Component / Variants
04 Практика. Variants налаштування Interaction UI elements
05 Атоми та молекули анімації
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)
Початок побудови сценарію
Побудова сцени атомів
Швидкість анімацій сцени
Будуємо сценарій молекули
Screen wipe
Слайдер тексту з появою по колу (Дизайн Інтерʼєру столів)
Поява кнопки (малюнок пензликом)
Рух ефекту по колу для пагінації слайдера (Дизайн Інтерʼєру столів)
Ховер появи елементів в каталозі
Slider Animation смужки (Дизайн Інтерʼєру столів)
Помилки із слайдером. Уникаємо!
Паралакс поява та ефект реального руху (Сайт байків)
Ефект реального руху та появи інфо (Сайт байків)
Розкриття акардіону із поворотом UI закриття та відкриття (Сайт байків)
Помилки з паралаксом. Уникаємо!
3D для сайту у Figma
Помилка з пляшкою 3d. Уникаємо!
На яких сервісах потрібно зареєструватися?
Midjorney. Робота з штучним інтелектом для фото
AI - Анімація руху картинки
AI Робота з відео (моушн ефект)
3D панорама 360 градусів AI
Переніс Сайту у Figma Make і налаштування його (New Update)
AI відео для анімації (New Update)
Дизайн продукту з відео анімацією (New Update)
Принцип оформлення інструкції
Guideline доопрацювання (NEW Update)
Передача анімації в Lottie
Співпраця з девелопером
Де брати реальні ідеї?
Адаптив анімації
Як зберігати анімацію для портфоліо
Портфоліо на Behance/dribble
БОНУС Практика Behance
Створення Motion Video свого портфоліо (NEW SOON)
Зміна карток від картинки до тексту (Сайт техніки)
Робота із sticky (Сайт техніки)
Появи відео під час скролу. Ефект рідини (Сайт техніки)
Динаміка скролу елементів та слайдерів (Сайт техніки)
Помилки створення анімації. Уникаємо!
Кругова заміна фону та перелистування слайдеру товарів (Музичний концепт)
Прокручування товару в коробку (Музичний концепт)
Програвач плеєру (Музичний концепт)
Назва уроку
Modern slider animation
slider
Трендовий слайдер головного банеру
Hover burger menu
Анімація банеру
Blur&Button
Робота із Stiky
Рухаючий курсор у Figma
Smart Animation першого екрану
Анімація у Landing page NFT
Hover кнопки
Animation gradients
Animation items
Animation card
animation elements
Знижка -20% на консультацію
Сертифікат (умови)

08 Модуль - Принципи руху, системи та guidelines

Принцип оформлення інструкції
Guideline доопрацювання (NEW Update)

Access limited

or Get access to the course