Designing with animation
summary
Argues that adding motion as the fourth design dimension makes interfaces easier to follow, reducing abrupt context switches and cognitive load; shows a two-frame-to-high-frame demo (thaumatrope) to explain blending and easing, and demos CSS3 animation plus tools like Quartz Composer, After Effects, canvas and Adobe Edge. Describes an article on Medium and a workshop, prototypes: a real-time image toy called debris (avatars enter/expire with image processing), a Mac Wormhole concept left unbuilt, and a two-week animated CRRA commercial. Advocates transitional interfaces, overlapping action and thoughtful easing.
AI-written summary · about
chapters (11)
- 0:00Start
- 1:57BAD EXECUTION
- 9:20GOOD ANIMATION IS INVISIBLE
- 9:46ANIMATION IS A CLUE
- 11:48SUDDEN UNEXPECTED
- 13:40Demo
- 16:40INTERFACES LACKING MOTION
- 18:05A TRANSITIONAL INTERFACE
- 34:43DESIGNING WITH ANIMATION
- 39:14INBETWEENS
- 49:40GREAT ANIMATION FEELS INVISIBLE
related talks
35mMotion In Design Systems
44mFunctional Animation
43mPurpose and Style: Using Motion with Meaning in Interfaces
43mDesigning Meaningful Animation
23mEmbrace your project: Animation with concept
37mAnimating the User Experience
37mAnimation in UX: The Subconscious Influence of Motion
44mBadass Motion Design for Front end Developers