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.

Communicating animation slides

26,532 views

Published on

Animation is key component of beautiful and useful product design. Salesforce, Google, and IBM all feature motion design in their design systems, and there’s every reason you should, too. When designers and developers agree upon constraints, they can create UI components faster and present a unified, polished look and feel users appreciate.

Communicating animation is all about identifying patterns and setting boundaries and behavior expectations. This means:

- creating custom easings that reinforce branding and physics
- choreographing scalable timing values
- creating a vocabulary of reusable components
- combining those components into unique yet universal animation patterns.

Whether your project is big or small, if it has a style guide, you will want to include motion design. In this talk, you will learn how to bring animation to heel.

Published in: Design
  • Animation is key component of beautiful and useful product design. Salesforce, Google, and IBM all feature motion design in their design systems, and there’s every reason you should, too. When designers and developers agree upon constraints, they can create UI components faster and present a unified, polished look and feel users appreciate. Communicating animation is all about identifying patterns and setting boundaries and behavior expectations. This means: creating custom easings that reinforce branding and physics choreographing scalable timing values creating a vocabulary of reusable components combining those components into unique yet universal animation patterns. Whether your project is big or small, if it has a style guide, you will want to include motion design. In this talk, you will learn how to bring animation to heel. http://www.sollylabs.com/ (animation studio)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Communicating animation slides

  1. 1. with @RachelNaborswith @RachelNabors Communicating Animation
  2. 2. devToolsChallenger.com
  3. 3. lightningdesignsystem.com/design/ motion
  4. 4. Sleek & Professional
  5. 5. Carefree and Casual
  6. 6. Challenges that prevent consistent anima2ons • Communica2on issues make it hard for teams to understand and tackle anima3ons • Inadequate deliverables prevent developers from moving forward quickly • Lack of respect and deference to one another leads to lopsided implementa3ons that favor or disregard different voices
  7. 7. Developers need… Granular Components Instruc3onal Maintainability Thema3c Theory Educa3onal Guidance Designers want…
  8. 8. Developers need… Granular Components Instruc3onal Maintainability Thema3c Theory Educa3onal Guidance Designers want…How they compliment each other… Documenta2on What's there and why Defaults Building blocks and rules for spinning up new things Unity An overlying choreography with language Guidance Empower future contributors to make decisions
  9. 9. Deliverables
  10. 10. Easing
  11. 11. Accelerationaka ease-inDecelerationaka ease-outBounce
  12. 12. glossier.com
  13. 13. rachelnabors.com
  14. 14. easings.net
  15. 15. FireFoxDeveloperEdi.onorChrome
  16. 16. You will need curves for… • Accelera2on ease-out • Decelera2on ease-in • Something subtle for fades and color changes • A bounce (op3onal)
  17. 17. Where to use those easings… • Decelerate (ease-out) human interac3ons • Accelerate (ease-in) system-ini3ated anima3ons • Fades and color changes look best with more linear, subtle curves • Bounces increase animacy and add an air of “fun.”
  18. 18. Timing
  19. 19. lightningdesignsystem.com/ resources/tokens/#category-time
  20. 20. modularscale.com
  21. 21. Timing Limita2ons • Stay inside 70 to 700 milliseconds • 200-300ms is a sweet spot • Shorter dura2ons for fades and color changes • Longer dura2ons for large movements • Use milliseconds instead of seconds to prevent decimal hell fun 3mes
  22. 22. Properties
  23. 23. What to animate… • opacity • transform
  24. 24. “The art challenges the technology, and the technology inspires the art.” –John Lasseter, Pixar
  25. 25. Creating an Animation Language
  26. 26. lightningdesignsystem.com/design/ motion
  27. 27. Keynote’s animation vocabulary
  28. 28. Notification/Dismissalslidefadepop
  29. 29. Communicating Visually
  30. 30. Storyboards
  31. 31. StoryboardforFerdinandtheBulltakenatthe DisneyFamilyHomeMuseum
  32. 32. Internal use storyboard for DevToolsChallenger.com
  33. 33. Mystoryboardtemplate
 goo.gl/PyBXI7
  34. 34. Storyboard Tools • Go old school with post-its, index cards, huge sheets of paper • My precious storyboard template goo.gl/PyBXI7 • boords.com
  35. 35. Animatics
  36. 36. “An animation is worth a thousand meetings.” –@RachelNabors
  37. 37. SpaceUnicornanima.cusedwithpermission ofBrianneDrouhardaka@potatofarmgirl
  38. 38. loadingspinnerideafromlunch
  39. 39. Animatics are NOT deliverables.
  40. 40. Anima2c Tools • Keynote • Adobe ARerEffects • Principle app • Stop Mo3on app
  41. 41. Prototypes
  42. 42. “What developer doesn’t want a good copy- paste?” –Stephanie Rewis, Salesforce
  43. 43. invisionapp.com
  44. 44. principleformac.com
  45. 45. framerjs.com
  46. 46. webflow.com
  47. 47. Prototyping Tools • Na2ve-oriented Principle, Pixate • Web-oriented Invision, UX Pin • Code required Founda3on, Framer.js
  48. 48. Prioritizing Animation
  49. 49. the beau/fully shaded penny phenomenon
  50. 50. Collabora2ons • On new projects anima3on issues and ideas must be addressed during feature development. • On exis2ng projects the feature’s team should be entreated to join the conversa3on. • Don’t tack anima3on on alone and/or aRer the fact. You will have a bad 3me.
  51. 51. Generating Buy In
  52. 52. Group documentation
  53. 53. Cultivate and champion
  54. 54. Team up.
  55. 55. There is no right way.
  56. 56. There is no right way.There is only your way. WebAnimationWeekly.com slack.AnimationAtWork.com @RachelNabors .com

×