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 UX

3,026 views

Published on

Animation in UX

Published in: Design
  • Be the first to comment

Animation in UX

  1. 1. UI Animation Motion UI Transitional UX
  2. 2. Today’s Topic: Animation Principles When to use it?
  3. 3. What is Animation?
  4. 4. Disney's 12 Principles SQUASH & STRETCH STAGE ANTICIPATION STRAIGHT AHEAD & POSE TO POSE FOLLOW THROUGH & OVERLAPPING SLOW IN & SLOW OUT ARCS SECONDARY ACTION TIMING EXAGGERATION SOLID DRAWINGS APPEAL http://the12principles.tumblr.com/
  5. 5. Disney's 12 Principles SQUASH & STRETCH
  6. 6. PEEK CALENDAR
  7. 7. Disney's 12 Principles STAGING
  8. 8. Disney's 12 Principles EXAGGERATION
  9. 9. ELEVATE
  10. 10. Disney's 12 principles APPEAL
  11. 11. PAPER
  12. 12. Why using Animation in UX?
  13. 13. Increase Engagement
  14. 14. Ease Orientation
  15. 15. CHROME
  16. 16. Giving Feedback
  17. 17. Focus
  18. 18. FUN & Standing out
  19. 19. CLEAR http://capptivate.co/?s=clear
  20. 20. When NOT to Use animation?
  21. 21. Might be Confusing
  22. 22. CURRNEX
  23. 23. Irritating or Oppressive
  24. 24. STEALS FOCUS from what really matters
  25. 25. MATERIAL DESIGN
  26. 26. Motion in the world of material design is not only beautiful, it builds meaning about the spatial relationships, functionality, and intention of the system. Google’s Material Design Guidelines ” “
  27. 27. MATERIAL DESIGN http://www.google.com/design/spec/animation/
  28. 28. http://www.theverge.com/2014/6/27/5849272/material-world-how-google-discovered-what-software-is-made-of
  29. 29. In Conclusion
  30. 30. In Conclusion: “How will it move?” (from the beginning) Use it wisely (Balanced and when it helps) Motion is not only beautiful (It builds meaning) 1 2 3 4 Keep Researching and get inspired
  31. 31. THANK YOU

×