Designing Animation Awesomeness - FOWD 2014

Designing Animation Awesomeness as shared with the super lovely crowd at FOWD NYC 2014.

Transcript

1. Val Head • @vlh Designing Animation Awesomeness! ANIMATION AS DESIGN & IN OUR DESIGN PROCESS
5. Animation + UX FTW
6. ANIMATION:
   Establishes location
9. ANIMATION:
   Guides tasks
13. ANIMATION:
    Demonstrates
17. ANIMATION:
    Is totally a diva
20. http://goo.gl/XKODuq
21. Doing it with style
22. Keep UI Animations Flexible
25. Don’t create obstacles
28. prototype 
 prototype 
 prototype!
29. Look at speed and readability
30. .2s to .6s 
 a happy place for “small” interactions
31. Ease-outs 
 feel more “responsive”
33. “Sometimes when we release an update, I tighten up an old transition by ~50ms. ! Result: “Wow, this new version feels faster.” ” - Cennydd Bowles
35. More complex easing needs more time 
 to be readable.
37. Match motion to your message
41. Your choice of easing makes all the difference.
    
42. cubic-beziers
43. Getting out of your head
46. Get your idea moving on screen as early as possible.
    
49. http://goo.gl/7IzUDh
51. goo.gl/RXImkC
52. Look beyond 
 the web
53. artofthetitle.com
54. capptivate.co
56. Make 
 the awesomest 
 of things!
57. alltherightmoves.valhead.com valhead.com/book codepen.io/valhead ! @vlh val@valhead.com Thanks!
58. alltherightmoves.valhead.com
59. valhead.com/book