Making animations make sense

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, so here's the original Keynote file zipped up: https://db.tt/FXOaa0Xs

Transcript

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. t http://j.mp/designing-ui-animation @dotmariusz — up.front UG, 11/11/2014 <plug type=“shameless”> </plug>
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 @dotmariusz — up.front UG, 11/11/2014 http://the12principles.tumblr.com/
75. Other designers @dotmariusz — up.front UG, 11/11/2014 https://dribbble.com/search?q=ui+gif
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 http://j.mp/designing-ui-animation Thanks! @dotmariusz