”Putting Your Brand in Motion”
summary
Practical guide to making UI motion match brand: choose three baseline easings (ease-in, ease-out, ease-in-out) from Penner easing equations or easings.net and combine them with short durations (think ~50–500ms tiers) rather than ad‑hoc curves; animate chiefly position scale opacity rotation; use simple motion studies with circles to test calm → confident → energetic → playful spectra, employ springs for elastic/overshoot and keyframes for complex bounces, avoid overshooting opacity, and map expressiveness by a motion tolerance matrix of frequency vs positivity.
AI-written summary · about
chapters (6)
related talks
43mPurpose and Style: Using Motion with Meaning in Interfaces
37mMeaningful Motion in Design
43mDesigning Meaningful Animation
35mMotion In Design Systems
37mAnimation in UX: The Subconscious Influence of Motion
49mMotion & Playfulness
27m"Building Motion for the Web: Practical Strategies for Designers and Developers"
37mAnimating the User Experience