Typical Web Design Process
based on: http://blog.invisionapp.com/small-design-budget/
STRATEGY DESIGN
DEVELOPMENT
&
TESTING
Animation!
Animation! Animation!
UGH!
Grumble!
Grrrr!
Slide 7
Slide 7 text
Communication &
Documenting
Animation
Slide 8
Slide 8 text
Improving Animation Communication
Shared Vocabulary provides a common language to discuss and evaluate
Established Animation Values give you a common foundation
Documenting saves time and empowers others
Slide 9
Slide 9 text
Talk about animation early, often, and
get as specific as you can
Slide 10
Slide 10 text
Deliverables
…
THE THINGS WE USE TO SHOW WHAT WE MEAN
Slide 11
Slide 11 text
Storyboards & Sketches
EXPLORATION
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
Storyboards & Sketches
Slide 16
Slide 16 text
Storyboards & Sketches
Where is there potential for animation in this flow?
How will these elements load into view?
How could we animate between views logically?
I have this crazy idea…
QUICKLY COME UP WITH MANY ANSWERS
Slide 17
Slide 17 text
TOOLS
Storyboards & Sketches
Anything you can draw with goes!
Slide 18
Slide 18 text
Storyboards & Sketches
TRIGGER
WHAT TO DRAW
ACTION QUALITY
Credit: Eva-Lotta Lamb
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
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
Motion Comps
ANIMATION DETAIL
Slide 21
Slide 21 text
•Videos that play back the details of how animation looks
and behaves
•High fidelity of animation representation (usually)
•No interactivity
•Present and discuss
DEFINED
Motion Comps
Slide 22
Slide 22 text
TOOLS
Motion Comps
Wide open canvas,
invent what you need
Useful presets to
expand upon
Slide 23
Slide 23 text
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?
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
A motion comp from Dan Mall
Slide 26
Slide 26 text
•Duration and delay values
•Details of the easing used
•Repeat values, iteration counts
•Notes on how animations interact or are triggered
THE HAND OFF
Motion Comps
Slide 27
Slide 27 text
Interactive Prototypes
INTERACTION DETAIL
Slide 28
Slide 28 text
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
Slide 29
Slide 29 text
Interactive Prototypes
•High fidelity and interactive
•Can look and feel like “the real thing”
•Evaluate behaviour
•Testable
Slide 30
Slide 30 text
Interactive Prototypes
TOOLS
Smart defaults to customize
Wide open canvas,
invent what you need
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
Deliverables
•Share internally or externally depending on goals
•Make a few or as many as you need
•Get feedback & input along the way
Slide 35
Slide 35 text
Define & Document
…
SAVING FUTURE YOU TIME AND EFFORT
Slide 36
Slide 36 text
Defining Your Brand in Motion
DEFINE
Slide 37
Slide 37 text
•Use brand definitions to inform motion decisions
•Build off of Brand Pillars, Voice & Tone, Experience Pillars
•Extract animation design guidelines from there
Defining Your Brand in Motion
Slide 38
Slide 38 text
Defining Your Brand in Motion
1
Brand personality
&
point of view
Prototype,
explore,
iterate
2
Extract animation
design decisions
3
Slide 39
Slide 39 text
Your animation design values provide the basis
for your design system’s point of view.
Slide 40
Slide 40 text
UI animation should be used to inform and support the design.
UI animations should be living, lively, and considered.
UI animations should be cohesive, not homogeneous, as a group.
Establish Animation Design Values
”
“
Slide 41
Slide 41 text
Documenting Animation Decisions
DOCUMENT
Slide 42
Slide 42 text
Animation Building Blocks
•Durations - ranges, rhythm
•Properties that are animated
•Easing values used
•Physical space - weight and mass, depth and layers
Slide 43
Slide 43 text
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
•Formalize a rhythm for your durations
ANIMATION BUILDING BLOCKS
Slide 44
Slide 44 text
Durations (Timing)
ANIMATION BUILDING BLOCKS
100ms 200ms 300ms 400ms
Hover effects, fading, scaling
Large moves, complex easing
Easing Values
•Select custom easing values for the basics
like ease-in, ease-out, ease-in-out
• Different content/objects need different curves (interactive vs. not)
•Establish an easing pallet for hierarchy and expressiveness
ANIMATION BUILDING BLOCKS
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
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
Slide 51
Slide 51 text
Define Physical Space
•Consistent “forces” of gravity
•How many layers to your interface?
•The distance between layers informs how transitions should occur
between them.
ANIMATION BUILDING BLOCKS
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
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
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
Keeping It Real
…
HOW TO REALLY GET ANY OF THIS DONE
Slide 57
Slide 57 text
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
•Make the thing. You don’t have to wait for permission
KEEPING IT REAL