Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
UI Animation 
Motion UI 
Transitional UX
Today’s Topic: 
Animation 
Principles 
When to 
use it?
What is 
Animation?
Disney's 12 Principles 
SQUASH & STRETCH STAGE ANTICIPATION STRAIGHT AHEAD & 
POSE TO POSE 
FOLLOW THROUGH & 
OVERLAPPING ...
Disney's 12 Principles 
SQUASH & STRETCH
PEEK CALENDAR
Disney's 12 Principles 
STAGING
Disney's 12 Principles 
EXAGGERATION
ELEVATE
Disney's 12 principles 
APPEAL
PAPER
Why using 
Animation in 
UX?
Increase Engagement
Ease Orientation
CHROME
Giving Feedback
Focus
FUN & Standing out
CLEAR 
http://capptivate.co/?s=clear
When NOT to 
Use animation?
Might be Confusing
CURRNEX
Irritating or Oppressive
STEALS FOCUS 
from what really matters
MATERIAL 
DESIGN
Motion in the world of material 
design is not only beautiful, it builds 
meaning about the spatial 
relationships, functi...
MATERIAL 
DESIGN http://www.google.com/design/spec/animation/
http://www.theverge.com/2014/6/27/5849272/material-world-how-google-discovered-what-software-is-made-of
In Conclusion
In Conclusion: 
“How will it move?” (from the beginning) 
Use it wisely (Balanced and when it helps) 
Motion is not only b...
THANK YOU
Animation in UX
Animation in UX
Animation in UX
Animation in UX
Animation in UX
Animation in UX
Animation in UX
Animation in UX
Animation in UX
Animation in UX
Animation in UX
Animation in UX
Animation in UX
Prochain SlideShare
Chargement dans…5
×

Animation in UX

2 873 vues

Publié le

Animation in UX

Publié dans : Design
  • Soyez le premier à commenter

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

×