The static deliverables our processes rely on are failing us when it comes to designing UI animation well. By making chances to the way we communicate around animation we can design better animation. And also document those decisions to same time in the future.

1. Animation in
Design Systems
& Process
Val Head @vlh

2. The deliverables we use
are failing us.

3. If animation is always left to the end,
it can never be more than decoration.

5. Good UI animation takes
the whole team.

6. Better animation communication:
Easier buy-in
Better animation solutions
Repeatable, reusable patterns

7. Deliverables
…
THE THINGS THAT START CONVERSATIONS

8. Storyboards & Sketches
EXPLORATION

10. Storyboards & Sketches
Where is there potential for animation in this flow?
How could animation make this screen easier to understand?
I have this idea…
QUICKLY COME UP WITH MANY ANSWERS

11. Storyboards & Sketches
•Anyone can make one!
•Quick iterations with little commitment

12. Storyboards & Sketches
TRIGGER
WHAT TO DRAW
ACTION QUALITY
What starts the action?
Draw or describe in words
What takes place?
Draw in as many frames as needed
How does it happen?
Describe in words
1 2 3
Credit: Eva-Lotta Lamm

14. Storyboards & Sketches
MORE FROM EVA-LOTTA LAMM:
goo.gl/fnPxZA

15. Motion Comps
ANIMATION DETAIL

16. •Videos that play back the details of how animation
looks and behaves
•High fidelity of animation representation (usually)
DEFINED
Motion Comps

19. A motion comp by Dan Mall

20. A motion comp by Mixpanel

21. QUESTIONS THEY HELP ANSWER
Motion Comps
Exactly how should this animation look?
Which items should move where and when?
Do the animation qualities reflect our brand?

22. TOOLS
Motion Comps
After Effects, Adobe Animate CC, Tumult Hype
Wide open canvas, invent what you need.

23. •Duration and delay values
•Details of the easing used
•Repeat values, iteration counts
THE HAND OFF
Motion Comps

24. Interactive Prototypes
INTERACTION DETAIL

26. What will the interaction be like to use?
Does the animation feel right in context?
How will animations interact with input or real data?
Interactive Prototypes
QUESTIONS THEY HELP ANSWER

27. Interactive Prototypes
TOOLS
Smart defaults to customize
Wide open canvas,
invent what you need

28. Framer

29. Atomic

30. HTML,CSS & JS

33. GreenSock Animation Platform (GSAP)

35. Storyboards, Motion Comps, Prototypes!
•Share internally or externally depending on goals
•Make a few or as many as you need
•Get feedback & input along the way

36. Define & Document
…
SAVING FUTURE YOU TIME AND EFFORT

37. Defining Your Brand in Motion
DEFINE

38. •Use design principles to inform motion decisions
•Use Brand Pillars, Voice & Tone, Experience Pillars…
•Build animation guidelines from there
Defining Your Brand in Motion

39. Big picture: what do we use animation for?

41. Details: how does our brand move?

45. Human, Reassuring, Friendly
Crisp, Minimal, Concise
Lively, Charming, Cheerful
Animation from voice & tone

46. Friendly, Charming

47. Concise, Reassuring

48. Minimal

49. Document your animation
decisions in your style guide.

50. Documenting Animation Decisions
DOCUMENT

51. Durations (Timing)
•Shorter durations for simple animations like fades or
colour changes
•Longer durations for large movements like page
transitions, drag-and-drop, drawers, content entrances
from offscreen areas
•Optimal timing can change based on viewport size
ANIMATION BUILDING BLOCKS

52. Durations (Timing)
ANIMATION BUILDING BLOCKS
100ms 200ms 300ms 400ms
Hover effects, fading, scaling
Large moves, complex easing

56. Easing Values
•Select custom easing values for the basics
•Different content/objects need different curves
(interactive vs. not)
•Establish an easing pallet for hierarchy and expressiveness
ANIMATION BUILDING BLOCKS

60. Create your own custom ease-in, ease-
out and ease-in-out as a starting place.

62. Properties that are animated
•Which properties do you animate - why and when?
•Scale, position, rotation, opacity are most performant
and common
ANIMATION BUILDING BLOCKS

64. Named Animations
•Names can be anything that is meaningful to you
•Show examples & descriptions to define them in your docs
•Call out and define classic principles that you use
YOUR ANIMATION VOCABULARY

67. Create the animations you need,
not every possible animation.

68. Subtle motion
in empty states
A Spectrum of Animation
ANIMATION BUILDING BLOCKS
“It’s just the static
web”
A “Weee! Look
at me!!” app
Error messages,
Repetitive tasks
Achievements,
Milestones

69. Where animation is used
ANIMATION BUILDING BLOCKS
Error message
Setting up your account
Getting your first sale
Entering article content
Editing transaction entries
Getting a new subscriber
REPETATIVENESSOFTHETASK
POSITIVENESS OF THE EVENT/TASK
RepeatedoftenAuniqueevent
Negative/Serious Very positive

70. Where animation is used
ANIMATION BUILDING BLOCKS
Error message
Setting up your account
Getting your first sale
Entering article content
Editing transaction entries
Getting a new subscriber
REPETATIVENESSOFTHETASK
POSITIVENESS OF THE EVENT/TASK
RepeatedoftenAuniqueevent
Negative/Serious Very positive
Purpose-based
animation
Subtle effects
and personality
Animation focused
on directing attention
to the fix
Room for motion
with bigger personality

71. Where animation is used
ANIMATION BUILDING BLOCKS
Error message
Setting up your account
Getting your first sale
Entering article content
Editing transaction entries
Getting a new subscriber
REPETATIVENESSOFTHETASK
POSITIVENESS OF THE EVENT/TASK
RepeatedoftenAuniqueevent
Negative/Serious Very positive
Purpose-based
animation
Subtle effects
and personality
Animation focused
on directing attention
to the fix
Room for motion
with bigger personality
Purpose-based
animation
Animation focused
on directing attention
to the fix
Room for motion
with bigger personality
Subtle effects
and personality

72. Focus on simple building blocks first.

73. Keeping It Real
…
HOW TO REALLY GET ANY OF THIS DONE

74. Be an Undercover Animation Hero!
•Encourage your team or stakeholders to see the value in
animation as a design tool
•Share examples, model discussion
•Small changes over time
KEEPING IT REAL

75. Don’t wait for permission.

76. Designing Interface Animation
designinginterfaceanimation.com

77. Web Animation Workshops Paris: Sept 4-5, 2017
webanimationworkshops.com.com

78. Thank You!
Join the crew: uianimationewsletter.com
Let’s chat on twitter: @vlh