making animations make sense

Download Making animations make sense

Post on 27-Jun-2015

192 views

Category:

Design

2 download

Embed Size (px)

DESCRIPTION

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

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. http://j.mp/designing-ui-animation@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 greatresponsibility 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 withanimation equivalent of Sketch willearn 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 animationhttp://the12principles.tumblr.com/@dotmariusz up.front UG, 11/11/2014 75. Other designershttps://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. tThanks!http://j.mp/designing-ui-animation@dotmariusz