Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Animation in design systems and process - Val Head

3,141 views

Published on

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.

Published in: Design
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice !! Download 100 % Free Ebooks, PPts, Study Notes, Novels, etc @ https://www.ThesisScientist.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Animation in design systems and process - Val Head

  1. 1. Animation in 
 Design Systems 
 & Process Val Head @vlh
  2. 2. The deliverables we use 
 are failing us.
  3. 3. If animation is always left to the end, 
 it can never be more than decoration.
  4. 4. Good UI animation takes 
 the whole team.
  5. 5. Better animation communication: Easier buy-in Better animation solutions Repeatable, reusable patterns
  6. 6. Deliverables … THE THINGS THAT START CONVERSATIONS
  7. 7. Storyboards & Sketches EXPLORATION
  8. 8. 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
  9. 9. Storyboards & Sketches •Anyone can make one! •Quick iterations with little commitment
  10. 10. 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
  11. 11. Storyboards & Sketches MORE FROM EVA-LOTTA LAMM: goo.gl/fnPxZA
  12. 12. Motion Comps ANIMATION DETAIL
  13. 13. •Videos that play back the details of how animation looks and behaves •High fidelity of animation representation (usually) DEFINED Motion Comps
  14. 14. A motion comp by Dan Mall
  15. 15. A motion comp by Mixpanel
  16. 16. 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?
  17. 17. TOOLS Motion Comps After Effects, Adobe Animate CC, Tumult Hype Wide open canvas, invent what you need.
  18. 18. •Duration and delay values •Details of the easing used •Repeat values, iteration counts THE HAND OFF Motion Comps
  19. 19. Interactive Prototypes INTERACTION DETAIL
  20. 20. 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
  21. 21. Interactive Prototypes TOOLS Smart defaults to customize Wide open canvas, invent what you need
  22. 22. Framer
  23. 23. Atomic
  24. 24. HTML,CSS & JS
  25. 25. GreenSock Animation Platform (GSAP)
  26. 26. 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 

  27. 27. Define & Document … SAVING FUTURE YOU TIME AND EFFORT
  28. 28. Defining Your Brand in Motion DEFINE
  29. 29. •Use design principles to inform motion decisions •Use Brand Pillars, Voice & Tone, Experience Pillars… •Build animation guidelines from there Defining Your Brand in Motion
  30. 30. Big picture: what do we use animation for?
  31. 31. Details: how does our brand move?
  32. 32. Human, Reassuring, Friendly Crisp, Minimal, Concise Lively, Charming, Cheerful Animation from voice & tone
  33. 33. Friendly, Charming
  34. 34. Concise, Reassuring
  35. 35. Minimal
  36. 36. Document your animation 
 decisions in your style guide.
  37. 37. Documenting Animation Decisions DOCUMENT
  38. 38. 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
  39. 39. Durations (Timing) ANIMATION BUILDING BLOCKS 100ms 200ms 300ms 400ms Hover effects, fading, scaling Large moves, complex easing
  40. 40. 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
  41. 41. Create your own custom ease-in, ease- out and ease-in-out as a starting place.
  42. 42. Properties that are animated •Which properties do you animate - why and when? •Scale, position, rotation, opacity are most performant and common ANIMATION BUILDING BLOCKS
  43. 43. 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
  44. 44. Create the animations you need, not every possible animation.
  45. 45. 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
  46. 46. 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
  47. 47. 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
  48. 48. 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
  49. 49. Focus on simple building blocks first.
  50. 50. Keeping It Real … HOW TO REALLY GET ANY OF THIS DONE
  51. 51. 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
  52. 52. Don’t wait for permission.
  53. 53. Designing Interface Animation designinginterfaceanimation.com
  54. 54. Web Animation Workshops Paris: Sept 4-5, 2017 webanimationworkshops.com.com
  55. 55. Thank You! Join the crew: uianimationewsletter.com Let’s chat on twitter: @vlh

×