Example Curriculum
Introduction
Available in
days
days
after you enroll
Motion in UX Design
Available in
days
days
after you enroll
- Misconceptions of Motion Design (3:36)
- Motion Supports Usability (3:20)
- Narrative and Mental Models (5:15)
- What is a Microinteraction? (1:33)
- The Structure of a Microinteraction (1:57)
- Not Every Element is a Microinteraction! (2:03)
- How Microinteractions Impact User Experiences (4:32)
- Recap: What Did We Learn? (2:29)
- Where To Next? Your Choice... (1:00)
The Basics of Figma
Available in
days
days
after you enroll
- Resources For This Section
- Intro to Figma: Education Plans and Signup (4:15)
- Intro to Figma: Introduction (0:56)
- Intro to Figma: Where to use Figma (0:32)
- Figma UI: File Browser (2:20)
- Figma UI: Files (3:02)
- Figma UI: Toolbar (5:31)
- Figma UI: Left Sidebar (4:06)
- Figma UI: Right Sidebar (4:24)
- Shapes and Tools: Working with Containers (4:38)
- Shapes and Tools: Basic Shapes and Boolean Operations (5:41)
- Designing in Figma: Images (2:49)
- Designing in Figma: Getting Started with Text (4:04)
- Designing in Figma: Constraints (2:50)
- Designing in Figma: Using Auto Layout (5:59)
- Resources and Collaboration: Community Files (1:40)
- Resources and Collaboration: Community Plugins (2:42)
- Resources and Collaboration: Sharing and Comments (3:24)
- What We Are Going to Learn (5:10)
- Exercise: Create a Quick Logo Using Shapes (2:15)
- Exercise: Autolayout Buttons (5:37)
- Exercise: Responsive Navigation (3:07)
- Exercise: Responsive Text (4:15)
- Exercise: Imagery and Gradients (3:12)
- Exercise: Layout and Responsiveness (3:15)
- Assignment: Create Complex Interactive Components (1:02)
- Let's Have Some Fun (+ Free Resources)
Introduction to Smart Animate
Available in
days
days
after you enroll
Project: Photo Inspiration Application
Available in
days
days
after you enroll
- Resources For This Section
- What We Are Going to Learn (2:22)
- Prototype: Category Transitions (13:04)
- Interactive Components: Icons (9:20)
- Prototype: Simple Microinteractions (3:06)
- Prototype: Screen Transitions (6:43)
- Prototype: Simple Horizontal Scroll (2:01)
- Prototype: Hijacked Horizontal Scroll (5:12)
- Assignment: Photo Inspiration Mobile App (1:46)
- Course Check-In
Motion Design Principles
Available in
days
days
after you enroll
Motion Designs Patterns in Figma
Available in
days
days
after you enroll
- Resources For This Section
- What We Are Going to Learn (2:06)
- Navigation: Building the Navigation (2:26)
- Navigation: Prototyping with Simple Variants (7:38)
- Navigation: Home Interactive Components (6:44)
- Navigation: Heart Interactive Components (4:08)
- Navigation: Cart Interactive Components (5:20)
- Navigation: Settings Interactive Components (2:33)
- Navigation: Animations with Your Navigation Component (7:19)
- Scrolling: Landing Page Design (2:24)
- Scrolling: Anchor Links (4:31)
- Scrolling: Short Parallax (4:01)
- Scrolling: Extended Parallax (2:22)
- Pagination: Carousel Dots (6:54)
- Pagination: Pagination Control (11:20)
- Dragging: Listing Card (4:21)
- Dragging: App Scrolling (12:02)
- Dragging: Drag and Drop (3:26)
- Microinteractions: Simple File Uploader (6:04)
- Microinteractions: Uploader Success (1:34)
- Microinteractions: Cancel Upload (3:37)
- Microinteractions: Normal Like Button (5:29)
- Microinteractions: Like Button Bounce (6:29)
- Delight: Confetti (8:21)
- Delight: Checklist (6:53)
- Delight: Add to Cart (5:41)
The Motion Design Process
Available in
days
days
after you enroll
Project: National Geographic Carousel
Available in
days
days
after you enroll
Project: Smart Home App
Available in
days
days
after you enroll
- Resources For This Section
- What We Are Going to Learn (2:19)
- Interactive Component: Toggle Card (5:49)
- Interactive Component: Temperature Slider (4:46)
- Prototype: Toggle Cards (2:12)
- Prototype: Simple Temperature Control (4:10)
- Prototype: Colour Temperature Control (4:09)
- Prototype: Navigation Transition (3:11)
- Assignment: Create Complex Interactive Components (1:15)
Feedback
Available in
days
days
after you enroll
Project: Home Renovation Landing Page
Available in
days
days
after you enroll
- Resources For This Section
- What We Are going to Learn (3:22)
- Interactive Component: Website Buttons (6:42)
- Interactive Component: General Room Card (3:33)
- Interactive Component: Navigation and Links (5:59)
- Prototype: Landing Page Parallax Intro (2:42)
- Prototype: Full Image Parallax (2:05)
- Prototype: Testimonial Carousel (3:15)
- Prototype: Staggered Cards (4:51)
- Prototype: Gallery Image Automated Scroll (3:39)
- Assignment: Prototype Parallax Effects (0:58)
Project: Home Renovation Estimation Form
Available in
days
days
after you enroll
- Resources For This Section
- What We Are Going to Learn (2:30)
- Interactive Component: Form Buttons (3:55)
- Interactive Component: Progress Bar (3:37)
- Interactive Component: Arrow Icon Buttons (5:47)
- Interactive Component: General Input (5:51)
- Interactive Component: Select Input and Dropdown (7:28)
- Interactive Component: Icon Toggle Card (4:08)
- Interactive Component: Checkbox Item (6:30)
- Interactive Component: Kitchen Card and Carousel Dots (2:49)
- Interactive Component: Kitchen Carousel (8:29)
- Prototype: Form Layout (3:02)
- Prototype: Form Introduction (1:50)
- Prototype: General Input and Dropdown Overlay (5:36)
- Prototype: Toggle Cards and Checkbox (4:09)
- Prototype: Carousel (4:42)
- Assignment: Create Interactive Form Components (1:01)
Project: Food Delivery App
Available in
days
days
after you enroll
- Resources For This Section
- What We Are Going to Learn (2:15)
- Interactive Components: Buttons (3:33)
- Interactive Components: Icon Buttons (3:34)
- Interactive Components: Category Card (4:33)
- Interactive Components: Tab Navigation (4:56)
- Interactive Components: Item Card (6:00)
- Interactive Components: Promo Card (6:54)
- Interactive Components: Cart Floating Action Button (5:29)
- Interactive Components: Item Overlay (5:03)
- Interactive Components: Order Progression Status Icons (8:05)
- Interactive Components: Order Progression Overlay (4:21)
- Prototype: Automatic Parallax Carousel (2:51)
- Prototype: Tab List Transition (3:33)
- Prototype: Masking and Overlay (3:26)
- Prototype: Cart Overlay (4:00)
- Prototype: Order Progress (5:05)
- Assignment: Create and Design a Full Food Delivery App (1:12)
Showcasing Your Work
Available in
days
days
after you enroll
Where To Go From Here?
Available in
days
days
after you enroll