animation in ux

44

Upload: idan-ben-ari

Post on 15-Nov-2014

734 views

Category:

Design


2 download

DESCRIPTION

Animation in UX

TRANSCRIPT

  • 1. UI AnimationMotion UITransitional UX

2. Todays Topic:AnimationPrinciplesWhen touse it? 3. What isAnimation? 4. Disney's 12 PrinciplesSQUASH & STRETCH STAGE ANTICIPATION STRAIGHT AHEAD &POSE TO POSEFOLLOW THROUGH &OVERLAPPINGSLOW IN & SLOW OUT ARCS SECONDARY ACTIONTIMING EXAGGERATION SOLID DRAWINGS APPEALhttp://the12principles.tumblr.com/ 5. Disney's 12 PrinciplesSQUASH & STRETCH 6. PEEK CALENDAR 7. Disney's 12 PrinciplesSTAGING 8. Disney's 12 PrinciplesEXAGGERATION 9. ELEVATE 10. Disney's 12 principlesAPPEAL 11. PAPER 12. Why usingAnimation inUX? 13. Increase Engagement 14. Ease Orientation 15. CHROME 16. Giving Feedback 17. Focus 18. FUN & Standing out 19. CLEARhttp://capptivate.co/?s=clear 20. When NOT toUse animation? 21. Might be Confusing 22. CURRNEX 23. Irritating or Oppressive 24. STEALS FOCUSfrom what really matters 25. MATERIALDESIGN 26. Motion in the world of materialdesign is not only beautiful, it buildsmeaning about the spatialrelationships, functionality,and intention of the system.Googles Material Design Guidelines 27. MATERIALDESIGN http://www.google.com/design/spec/animation/ 28. http://www.theverge.com/2014/6/27/5849272/material-world-how-google-discovered-what-software-is-made-of 29. In Conclusion 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)1234 Keep Researching and get inspired 31. THANK YOU