itsual Motion Design
Overview
Motion should explain, guide, and confirm — not merely decorate. Good motion reduces cognitive load; bad motion distracts or excludes.
When to Use
- Defining transitions between states or screens
- Designing micro-interactions and feedback
- Creating loading or progress animations
- Establishing motion principles for a design system
Core Practices
- Tie motion to meaning (cause → effect)
- Keep durations appropriate (snappy for feedback, slightly longer for orientation)
- Respect
prefers-reduced-motion - Maintain spatial consistency (elements move logically)
- Document easing, duration, and triggers for engineering
Principles
- Purpose before polish
- Fast enough to feel responsive; slow enough to be understood
- Never block task completion with non-essential animation
- Accessibility is non-negotiable
Verification
- Motion helps users understand what changed
- Reduced-motion alternatives exist
- Specs are implementable by engineering