Making animations make sense

651dcfe41723207fbb0aa044a4f7c07f?s=47 Mariusz Cieśla
November 11, 2014

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

651dcfe41723207fbb0aa044a4f7c07f?s=128

Mariusz Cieśla

November 11, 2014
Tweet

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