A presentation at Design Matters in
September 2018 in
Copenhagen, Denmark by
Elevate Your Design With Animation Creating meaningful animation in interfaces
Val Head • @vlh Author of Designing Interface Animation Design Advocate, Adobe
What makes good UI animation?
UI animation has purpose and style
Reinforce mental models of the interface and show how content is related
Maintaining the “thingness” of an object during points of transition
Choreography Many moving pieces, and “real” expectations
Overlap groups of actions
Tip: overlapping action (offsets) can also be great for performance!
Similar objects should animate similarly
Entrances should informs exits
Match velocities, not duration
Feedback Letting users know that something has happened
Direct Attention Leading the eye and calling attention to changes and important items
Hinting & Affordances Helping users see the effects, or potential effects, of their actions
Designing Interface Animation designinginterfaceanimation.com
Thank you! Newsletter: uianimationewsletter.com Let’s chat on twitter: @vlh
View Elevate Your Design
With Animation: Creating meaningful animation in interfaces on Notist.