Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Getting Animation Done

Val Head
September 22, 2016

Getting Animation Done

To make good animation decisions you need to use different deliverables than you do for static designs. The way you present and evaluate your animation ideas with your team can make all the difference in getting high quality animation into the end product. This talk is all about when and how to discuss animation in a team setting for the best results.

Val Head

September 22, 2016

More Decks by Val Head

Other Decks in Design


  1. Getting Animation Done! Val Head @vlh

  2. No time!

  3. No budget!

  4. My ideas never get made!

  5. It’s always left to the end!

  6. Typical Web Design Process based on: http://blog.invisionapp.com/small-design-budget/ STRATEGY DESIGN DEVELOPMENT

    & TESTING Animation! Animation! Animation! UGH! Grumble! Grrrr!
  7. Communication & Documenting Animation

  8. 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
  9. Talk about animation early, often, and get as specific as

    you can
  10. Deliverables … THE THINGS WE USE TO SHOW WHAT WE

  11. Storyboards & Sketches EXPLORATION

  12. None
  13. None
  14. None
  15. Storyboards & Sketches

  16. 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
  17. TOOLS Storyboards & Sketches Anything you can draw with goes!

  18. 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
  19. None
  20. Motion Comps ANIMATION DETAIL

  21. •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
  22. TOOLS Motion Comps Wide open canvas, invent what you need

    Useful presets to expand upon
  23. 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?
  24. None
  25. A motion comp from Dan Mall

  26. •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
  27. Interactive Prototypes INTERACTION DETAIL

  28. 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
  29. Interactive Prototypes •High fidelity and interactive •Can look and feel

    like “the real thing” •Evaluate behaviour
  30. Interactive Prototypes TOOLS Smart defaults to customize Wide open canvas,

    invent what you need
  31. None
  32. None
  33. None
  34. Deliverables •Share internally or externally depending on goals •Make a

    few or as many as you need •Get feedback & input along the way 


  36. Defining Your Brand in Motion DEFINE

  37. •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
  38. Defining Your Brand in Motion 1 Brand personality 

 point of view Prototype, explore, iterate 2 Extract animation 
 design decisions 3
  39. Your animation design values provide the basis for your design

    system’s point of view.
  40. 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 ” “
  41. Documenting Animation Decisions DOCUMENT

  42. Animation Building Blocks •Durations - ranges, rhythm •Properties that are

    animated •Easing values used •Physical space - weight and mass, depth and layers
  43. 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
  44. Durations (Timing) ANIMATION BUILDING BLOCKS 100ms 200ms 300ms 400ms Hover

    effects, fading, scaling Large moves, complex easing
  45. Durations (Timing) ANIMATION BUILDING BLOCKS animation: fade 
 cubic-bezier(.19,.59,.62,1) 200ms

    both; Fade In/Out
  46. Show the code. Make it practical.

  47. 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
  48. None
  49. None
  50. 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
  51. 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
  52. None
  53. 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
  54. None
  55. None
  56. Keeping It Real … HOW TO REALLY GET ANY OF

  57. 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
  58. You don’t have to ask for permission.

  59. Designing Interface Animation designinginterfaceanimation.com

  60. webanimationworkshops.com

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