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?

Great UI animation has purpose and style

Continuity Reinforce mental models of the interface and show how content is related

Visual Continuity 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