Motion Design Principles

Use animation purposefully to guide attention, communicate state, and add delight.

Category: Design | Type: Skills

Skills: Motion Design, Animation, UX Enhancement

Techniques: Constraint-Based, Meta-Cognitive

Prompt

Motion is a design tool, not decoration. Purposes: 1. Orientation — where did I come from? Where am I going? Page transitions should reflect spatial relationships. 2. Focus — draw attention to what matters. A subtle pulse on a notification badge. 3. Feedback — confirm actions. The satisfying animation when a task is completed. 4. State Change — smooth transitions between states reduce cognitive load. Principles: 5. Easing — never use linear easing for UI. Use ease-out for entrances (fast start, soft landing) and ease-in for exits (soft start, fast departure). 6. Duration — 200-300ms for micro-interactions, 300-500ms for page transitions. Under 100ms feels instant, over 500ms feels sluggish. 7. Choreography — stagger related elements (50ms delay between items). 8. Restraint — if you can remove an animation and nothing is lost, remove it. The best motion is the motion you barely notice.

Browse all prompts at Ask Wisely