Elevate Your Design 
With Animation: Creating meaningful animation in interfaces

A presentation at Design Matters in September 2018 in Copenhagen, Denmark by Val Head

Slide 1

Slide 1

Elevate Your Design With Animation Creating meaningful animation in interfaces Val Head • @vlh Author of Designing Interface Animation Design Advocate, Adobe

Slide 2

Slide 2

What makes good UI animation?

Slide 3

Slide 3

Great UI animation has purpose and style

Slide 4

Slide 4

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

Slide 5

Slide 5

Slide 6

Slide 6

Slide 7

Slide 7

Slide 8

Slide 8

Visual Continuity Maintaining the “thingness” of an object during points of transition

Slide 9

Slide 9

Slide 10

Slide 10

Slide 11

Slide 11

Slide 12

Slide 12

Choreography Many moving pieces, and “real” expectations

Slide 13

Slide 13

Overlap groups of actions Tip: overlapping action (offsets) can also be great for performance!

Slide 14

Slide 14

Similar objects should animate similarly

Slide 15

Slide 15

Entrances should informs exits

Slide 16

Slide 16

Match velocities, not duration

Slide 17

Slide 17

Feedback Letting users know that something has happened

Slide 18

Slide 18

Slide 19

Slide 19

Slide 20

Slide 20

Slide 21

Slide 21

Slide 22

Slide 22

Slide 23

Slide 23

Slide 24

Slide 24

Direct Attention Leading the eye and calling attention to changes and important items

Slide 25

Slide 25

Slide 26

Slide 26

Slide 27

Slide 27

Hinting & Affordances Helping users see the effects, or potential effects, of their actions

Slide 28

Slide 28

Slide 29

Slide 29

Slide 30

Slide 30

Designing Interface Animation designinginterfaceanimation.com