Web Design / Motion Design

A talk all about how we can incorporate animation principles, both traditional and UI specific ones, to better design our web-based animations. As seen at BDConf Nashville 2014.

Transcript

1. @vlh #BDConf! Nashville 2014 Motion Designer Web Designer
2. Design
   +=
   Animation
5. JavaScript Canvas WebGL CSS SVG
6. Animation for the sake of it
   is a waste
   !
7. we need to create useful animation
8. we need to animate with style
9. Become a UI animation expert in the next 30 mins*
   ! ! ! *resultsmayvarysafetynotguaranteedetc.
10. Three animation principles
    
12. 1:Timing ! ! ! ! ! ! ! (timing is everything, they say)
13. Timing:
    appearing to obey the laws of physics
14. Timing:
    appearing to obey the laws of “physics”
15. Timing:
    establishes mood, emotion, and reaction
18. animation: shakeIt 1s ease;
    ! animation: shakeIt 1s;
19. ease linear ease-in ease-out ease-in-out
20. cubic-bezier(0.47, 0, 0.745, 0.715)
21. TIME PROGRESSION
22. cubic-bezier(0.42, 0, 0.58, 1);
25. everything
    is better with
    cubic beziers!
26. ease-in-out
28. ease-in-out
33. 2: Secondary action
34. Secondary action: supplemental action that reinforces and adds dimension
38. 2: Squash and stretch
39. Squash and stretch: gives a sense of weight and flexibility to an object
41. Squash and stretch: reads as fun or comical and conveys a sense of energy
46. http://goo.gl/WkjL6W
47. Four principles of UI animation
48. 1: stay flexible
51. A B Things can happen here. Yikes!
52. 2: don’t create obstacles
55. 3: remember readability
56. UI animations should be as fast as they can still be readable. readable.
57. 4: match motion and message
60. prototype, prototype, prototype!
61. artofthetitle.com
62. capptivate.co
64. There are crazy fun times ahead!
65. Make 
 the awesomest 
 of things!
66. Thank you Nashville!
    ! ! @vlh
    valhead.com