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.

Five Must-Have UI Animation Patterns

49 views

Published on

This lightning talk covers the five categories of UI animation commonly seen in web and native apps and interface design. An interactive excerpt from my book, Animation at Work: https://abookapart.com/products/animation-at-work

Published in: Design
  • Be the first to comment

  • Be the first to like this

Five Must-Have UI Animation Patterns

  1. 1. @RachelNabors .com
  2. 2. UI Animation Patterns Top 5 Must-Have in space
  3. 3. Animation is a necessary part of your complete and balanced user experience.
  4. 4. UIcredit:codrops.com
  5. 5. UIcredit:codrops.com
  6. 6. UIcredit:codrops.com
  7. 7. You use animation to indicate an element’s… Direction Solidity Momentum
  8. 8. Five UI Animation Patterns • Transi3ons • Supplements • Feedback • Demonstra3ons • Decora3ons
  9. 9. Stateful Transitions
  10. 10. cdpn.io/pen/XEJMdq
  11. 11. nike.com
  12. 12. Stateful Transitions are good for… • Taking users from place to place in the informa3ons space • Moving users from one task to another • Replacing large por3ons of informa3on
  13. 13. Supplements
  14. 14. cdpn.io/pen/XEJMdq
  15. 15. glossier.com
  16. 16. Supplements are good for… • Bringing secondary informa3on on and off of the page • Upda3ng addi3onal content • ShiEing controls on a task
  17. 17. Feedback
  18. 18. animalmade.com
  19. 19. Feedback is good for… • Showing the rela3onship between two more more events • Indica3ng causa3on • Connec3ng user’s ac3on to interface’s reac3on
  20. 20. Demonstrations
  21. 21. territorystudio.com/projects/ cascade-immersive-data-experience
  22. 22. turbotax.com
  23. 23. Demonstrations are good for… • When showing is more effec3ve than telling • Explaining how something works • Exposing its details
  24. 24. Decorations
  25. 25. Decorations are good for… • Adding visual interest • Reinforcing brand • Making something innocuous stand out
  26. 26. cdpn.io/dmWJyg
  27. 27. revisionisthistory.com
  28. 28. bkaprt.com/aaw

×