Animation in UX

3. UI Animation
Motion UI
Transitional UX

4. Today’s Topic:
Animation
Principles
When to
use it?

5. What is
Animation?

8. 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/

9. Disney's 12 Principles
SQUASH & STRETCH

10. PEEK CALENDAR

12. Disney's 12 Principles
STAGING

15. Disney's 12 Principles
EXAGGERATION

16. ELEVATE

17. Disney's 12 principles
APPEAL

18. PAPER

19. Why using
Animation in
UX?

20. Increase Engagement

22. Ease Orientation

23. CHROME

24. Giving Feedback

26. Focus

28. FUN & Standing out

29. CLEAR
http://capptivate.co/?s=clear

30. When NOT to
Use animation?

31. Might be Confusing

32. CURRNEX

33. Irritating or Oppressive

35. STEALS FOCUS
from what really matters

38. MATERIAL
DESIGN

39. 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 ”
“

40. MATERIAL
DESIGN http://www.google.com/design/spec/animation/

41. http://www.theverge.com/2014/6/27/5849272/material-world-how-google-discovered-what-software-is-made-of

42. In Conclusion

43. 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

44. THANK YOU