Successfully reported this slideshow.
Your SlideShare is downloading. ×

Five Must-Have UI Animation Patterns

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Vue in Motion
Vue in Motion
Loading in …3
×

Check these out next

1 of 35 Ad

Five Must-Have UI Animation Patterns

Download to read offline

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

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

Advertisement
Advertisement

More Related Content

Advertisement

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

×