UI animation is the new black. How to make it actually add to user experience, rather than being just a fancy addition? Talk given at up.front Berlin on 11. November 2014 Unfortunately the GIFs from the original presentation don't work. Original Keynote file is available here: https://db.tt/FXOaa0Xs

1. a Making animations make sense
@dotmariusz — up.front UG, 11/11/2014

2. Hi there!
@dotmariusz — up.front UG, 11/11/2014

3. @dotmariusz
@dotmariusz — up.front UG, 11/11/2014

4. Designer & developer
(mostly designer)
@dotmariusz — up.front UG, 11/11/2014

5. www.lifetramp.com
@dotmariusz — up.front UG, 11/11/2014

6. <plug type=“t shameless”>
http://j.mp/designing-ui-animation
</plug>
@dotmariusz — up.front UG, 11/11/2014

7. Animations are important.
@dotmariusz — up.front UG, 11/11/2014

8. Animations are awesome.
@dotmariusz — up.front UG, 11/11/2014

9. Animations are fun.
@dotmariusz — up.front UG, 11/11/2014

10. Animations are delightful.
@dotmariusz — up.front UG, 11/11/2014

11. Animations are hard.
@dotmariusz — up.front UG, 11/11/2014

12. Why should you care?
@dotmariusz — up.front UG, 11/11/2014

13. Animations are transitions.
@dotmariusz — up.front UG, 11/11/2014

14. Animations are explainers.
@dotmariusz — up.front UG, 11/11/2014

15. Animations are storytelling.
@dotmariusz — up.front UG, 11/11/2014

16. Animations are branding.
@dotmariusz — up.front UG, 11/11/2014

17. “With great power comes great
responsibility”
— Uncle Ben
@dotmariusz — up.front UG, 11/11/2014

18. Good interaction design.
@dotmariusz — up.front UG, 11/11/2014

19. Engage the user.
@dotmariusz — up.front UG, 11/11/2014

20. Illustrate state.
@dotmariusz — up.front UG, 11/11/2014

21. Provide visual feedback.
@dotmariusz — up.front UG, 11/11/2014

22. Visualize relationships.
@dotmariusz — up.front UG, 11/11/2014

23. Guide.
@dotmariusz — up.front UG, 11/11/2014

24. Reassure.
@dotmariusz — up.front UG, 11/11/2014

25. Affordances.
@dotmariusz — up.front UG, 11/11/2014

26. Good animation.
(12 principles of animation, from “The Old Men” at Disney)
@dotmariusz — up.front UG, 11/11/2014

27. Anticipation.
@dotmariusz — up.front UG, 11/11/2014

28. @dotmariusz — up.front UG, 11/11/2014

29. @dotmariusz — up.front UG, 11/11/2014

30. @dotmariusz — up.front UG, 11/11/2014

31. Squash & stretch.
@dotmariusz — up.front UG, 11/11/2014

32. @dotmariusz — up.front UG, 11/11/2014

33. @dotmariusz — up.front UG, 11/11/2014

34. @dotmariusz — up.front UG, 11/11/2014

35. @dotmariusz — up.front UG, 11/11/2014

36. Follow through.
@dotmariusz — up.front UG, 11/11/2014

37. @dotmariusz — up.front UG, 11/11/2014

38. @dotmariusz — up.front UG, 11/11/2014

39. @dotmariusz — up.front UG, 11/11/2014

40. @dotmariusz — up.front UG, 11/11/2014

41. Staging.
@dotmariusz — up.front UG, 11/11/2014

42. @dotmariusz — up.front UG, 11/11/2014

43. @dotmariusz — up.front UG, 11/11/2014

44. @dotmariusz — up.front UG, 11/11/2014

45. @dotmariusz — up.front UG, 11/11/2014

46. Pose to pose animation.
@dotmariusz — up.front UG, 11/11/2014

47. @dotmariusz — up.front UG, 11/11/2014

48. @dotmariusz — up.front UG, 11/11/2014

49. @dotmariusz — up.front UG, 11/11/2014

50. @dotmariusz — up.front UG, 11/11/2014

51. Exaggeration.
@dotmariusz — up.front UG, 11/11/2014

52. @dotmariusz — up.front UG, 11/11/2014

53. @dotmariusz — up.front UG, 11/11/2014

54. @dotmariusz — up.front UG, 11/11/2014

55. @dotmariusz — up.front UG, 11/11/2014

56. Personality.
@dotmariusz — up.front UG, 11/11/2014

57. @dotmariusz — up.front UG, 11/11/2014

58. @dotmariusz — up.front UG, 11/11/2014

59. @dotmariusz — up.front UG, 11/11/2014

60. @dotmariusz — up.front UG, 11/11/2014

61. The “nopes” of animation.
@dotmariusz — up.front UG, 11/11/2014

62. Do not annoy.
@dotmariusz — up.front UG, 11/11/2014

63. Do not distract.
@dotmariusz — up.front UG, 11/11/2014

64. Do not block.
@dotmariusz — up.front UG, 11/11/2014

65. The state of tools
@dotmariusz — up.front UG, 11/11/2014

66. Keynote
@dotmariusz — up.front UG, 11/11/2014

67. After Effects
@dotmariusz — up.front UG, 11/11/2014

68. Edge Animate
@dotmariusz — up.front UG, 11/11/2014

69. Framer Studio
@dotmariusz — up.front UG, 11/11/2014

70. Quartz Composer & Origami
@dotmariusz — up.front UG, 11/11/2014

71. HTML
@dotmariusz — up.front UG, 11/11/2014

72. “First company to come up with
animation equivalent of Sketch will
earn a lot of money.”
@dotmariusz — up.front UG, 11/11/2014

73. Where to learn from?
@dotmariusz — up.front UG, 11/11/2014

74. Classic animation
http://the12principles.tumblr.com/
@dotmariusz — up.front UG, 11/11/2014

75. Other designers
https://dribbble.com/search?q=ui+gif
@dotmariusz — up.front UG, 11/11/2014

76. Video games
@dotmariusz — up.front UG, 11/11/2014

77. Material Design by Google
@dotmariusz — up.front UG, 11/11/2014

78. Have fun.
@dotmariusz — up.front UG, 11/11/2014

79. t
Thanks!
http://j.mp/designing-ui-animation
@dotmariusz