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.

Transcript

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 MEAN
11. Storyboards & Sketches EXPLORATION
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
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?
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
 •Testable
30. Interactive Prototypes TOOLS Smart defaults to customize Wide open canvas, invent what you need
34. Deliverables •Share internally or externally depending on goals •Make a few or as many as you need •Get feedback & input along the way 

35. Define & Document … SAVING FUTURE YOU TIME AND EFFORT
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
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
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
56. Keeping It Real … HOW TO REALLY GET ANY OF THIS DONE
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: @vlh