Animation in design systems and process - Val Head
•22 likes•4,685 views
Report
Share
Download to read offline
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.
Recommended
More Related Content
What's hot
What's hot(20)
Similar to Animation in design systems and process - Val Head
Similar to Animation in design systems and process - Val Head(20)
More from Val Head
More from Val Head(10)
Recently uploaded
Recently uploaded(20)
Animation in design systems and process - Val Head
- 1. Animation in Design Systems & Process Val Head @vlh
- 2. The deliverables we use are failing us.
- 3. If animation is always left to the end, it can never be more than decoration.
- 5. Good UI animation takes the whole team.
- 6. Better animation communication: Easier buy-in Better animation solutions Repeatable, reusable patterns
- 7. Deliverables … THE THINGS THAT START CONVERSATIONS
- 10. 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
- 11. Storyboards & Sketches •Anyone can make one! •Quick iterations with little commitment
- 12. 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
- 14. Storyboards & Sketches MORE FROM EVA-LOTTA LAMM: goo.gl/fnPxZA
- 16. •Videos that play back the details of how animation looks and behaves •High fidelity of animation representation (usually) DEFINED Motion Comps
- 19. A motion comp by Dan Mall
- 20. A motion comp by Mixpanel
- 21. 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?
- 22. TOOLS Motion Comps After Effects, Adobe Animate CC, Tumult Hype Wide open canvas, invent what you need.
- 23. •Duration and delay values •Details of the easing used •Repeat values, iteration counts THE HAND OFF Motion Comps
- 26. 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
- 27. Interactive Prototypes TOOLS Smart defaults to customize Wide open canvas, invent what you need
- 28. Framer
- 29. Atomic
- 30. HTML,CSS & JS
- 33. GreenSock Animation Platform (GSAP)
- 35. 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
- 36. Define & Document … SAVING FUTURE YOU TIME AND EFFORT
- 37. Defining Your Brand in Motion DEFINE
- 38. •Use design principles to inform motion decisions •Use Brand Pillars, Voice & Tone, Experience Pillars… •Build animation guidelines from there Defining Your Brand in Motion
- 39. Big picture: what do we use animation for?
- 41. Details: how does our brand move?
- 45. Human, Reassuring, Friendly Crisp, Minimal, Concise Lively, Charming, Cheerful Animation from voice & tone
- 48. Minimal
- 49. Document your animation decisions in your style guide.
- 51. 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
- 52. Durations (Timing) ANIMATION BUILDING BLOCKS 100ms 200ms 300ms 400ms Hover effects, fading, scaling Large moves, complex easing
- 56. 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
- 60. Create your own custom ease-in, ease- out and ease-in-out as a starting place.
- 62. Properties that are animated •Which properties do you animate - why and when? •Scale, position, rotation, opacity are most performant and common ANIMATION BUILDING BLOCKS
- 64. 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
- 67. Create the animations you need, not every possible animation.
- 68. 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
- 69. 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
- 70. 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
- 71. 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
- 72. Focus on simple building blocks first.
- 73. Keeping It Real … HOW TO REALLY GET ANY OF THIS DONE
- 74. 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
- 75. Don’t wait for permission.
- 77. Web Animation Workshops Paris: Sept 4-5, 2017 webanimationworkshops.com.com
- 78. Thank You! Join the crew: uianimationewsletter.com Let’s chat on twitter: @vlh