Web Designer/ Motion Designer - Blend Conf 2014

A crash course in motion design for web designers. Applying traditional motion principles to CSS to make sophisticated animated interfaces on the web.

Transcript

1. @vlh Blend Conf 2014! Motion Designer Web Designer
2. @vlh Blend Conf 2014! Motion Designer Web Designer
3. Design
   &
   Animation
6. Animation just 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 37 mins
   !
12. Three animation principles
    
13. 1:
 Timing !
14. Timing:
    appearing to obey the laws of “physics”
15. Timing:
    establishes mood, emotion, and reaction
16. ease linear ease-in ease-out ease-in-out
17. cubic-bezier(0.42, 0, 0.58, 1)
18. TIME PROGRESSION
21. Everything
    is better with
    cubic beziers!
24. ease-in-out
29. 2: 
 Secondary action
30. Secondary action: 
 supplemental action that reinforces and adds dimension
35. 2: 
 Squash and stretch
36. Squash and stretch: 
 gives a sense of weight and flexibility to an object
38. Squash and stretch: reads as fun or comical & conveys a sense of energy
43. Four principles of UI animation
44. 1: 
 Stay flexible
47. 2: 
 Don’t create obstacles
51. 3: 
 Remember readability
52. .2s to .6s is a happy place for “small” interactions
53. Ease-outs feel more “responsive”
55. More complex easing needs more time to be readable
57. 4: 
 Match motion to your message
61. prototype, prototype, prototype!
62. artofthetitle.com
63. capptivate.co
65. There are crazy fun times ahead!
66. Make 
 the awesomest 
 of things!
67. Thanks!
    ! @vlh
    valhead.com alltherightmoves.valhead.com