Slide 1

Slide 1 text

Getting Animation Done! Val Head @vlh

Slide 2

Slide 2 text

No time!

Slide 3

Slide 3 text

No budget!

Slide 4

Slide 4 text

My ideas never get made!

Slide 5

Slide 5 text

It’s always left to the end!

Slide 6

Slide 6 text

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

Slide 45

Slide 45 text

Durations (Timing) ANIMATION BUILDING BLOCKS animation: fade 
 cubic-bezier(.19,.59,.62,1) 200ms both; Fade In/Out

Slide 46

Slide 46 text

Show the code. Make it practical.

Slide 47

Slide 47 text

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

Slide 58

Slide 58 text

You don’t have to ask for permission.

Slide 59

Slide 59 text

Designing Interface Animation designinginterfaceanimation.com

Slide 60

Slide 60 text

webanimationworkshops.com

Slide 61

Slide 61 text

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