Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing Animation Awesomeness - FOWD 2014

76ded8131db760e741f0ecb01cb4c562?s=47 Val Head
November 04, 2014
Design
2
510

Designing Animation Awesomeness - FOWD 2014

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

76ded8131db760e741f0ecb01cb4c562?s=128

Val Head

November 04, 2014
Tweet

More Decks by Val Head

See All by Val Head
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
0
100
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
0
630
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
1
860
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
1
190
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
1
130
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
4
360
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
2
390
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
2
180
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
11
680

Other Decks in Design

See All in Design
6d1638800e2a9d65745b91bfeb929966?s=48 earthkarnravee
2
170
E1e5be595b41fe3cf014cab6b2ef2a85?s=48 geoffreydorne
1
140
381ea09c5a26fb7d63ddfc3ccb1d746b?s=48 kgsi
0
310
9d1961575e45a8286cdde5f86dbba312?s=48 akatsuki174
1
960
C017f3b100cbaa3127ac95d9544c70d9?s=48 maxsbow
0
210
E4d3bf2e52b00413efb34cc6e7433f3a?s=48 demarco
1
170
A54edea61b670665ef50c725bdef7ed2?s=48 shannonsketches
1
260
342011d3ddbec60bc73c8a4d6a562911?s=48 videlvequio
0
140
6fffdd34b95991b0b2847a8a3b663e3f?s=48 adrianfindsnemo
0
100
73f82a90bab5250087193c95ea45585d?s=48 designsystemsfrance
0
100
92151711459a4e3a191f791238f6259d?s=48 chiemitaki
0
1.2k
1439b2421bf9af4d7353a76c5355b6d6?s=48 diegoa4863
1
470

Featured

See All Featured
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
28
2.8k
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
128
22k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
34
2.4k
78b475797a14c84799063c7cd073962f?s=48 holman
464
280k
A415db3ac9e9668acbc1fb36eead84ac?s=48 mthomps
44
2.5k
864a009ac73600c7c02e1f26629dd989?s=48 paigeccino
0
110
8ec1383b240b5ba15ffb9743fceb3c0e?s=48 philnash
20
1k
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
67
4.4k
11c84dff30266b907714802088852677?s=48 jasonvnalue
87
8.3k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
177
8.1k
4394ceb8b277f35ee3da7030384efb5d?s=48 davidbonilla
75
3.8k

Transcript

  1. Val Head • @vlh Designing Animation Awesomeness! ANIMATION AS DESIGN

    & IN OUR DESIGN PROCESS
  2. None
  3. None
  4. None

  5. Animation + UX FTW

  6. ANIMATION: Establishes location

  7. None
  8. None

  9. ANIMATION: Guides tasks

  10. None
  11. None
  12. None

  13. ANIMATION: Demonstrates

  14. None
  15. None
  16. None

  17. ANIMATION: Is totally a diva

  18. None
  19. None

  20. http://goo.gl/XKODuq

  21. Doing it with style

  22. Keep UI Animations Flexible

  23. None
  24. None

  25. Don’t create obstacles

  26. None
  27. None

  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”

  32. None

  33. “Sometimes when we release an update, I tighten up an

    old transition by ~50ms. ! Result: “Wow, this new version feels faster.” ” - Cennydd Bowles
  34. None

  35. More complex easing needs more time 
 to be readable.

  36. None

  37. Match motion to your message

  38. None
  39. None
  40. None

  41. Your choice of easing makes all the difference. 

  42. cubic-beziers

  43. Getting out of your head

  44. None
  45. None

  46. Get your idea moving on screen as early as possible.

  47. None
  48. None

  49. http://goo.gl/7IzUDh

  50. None

  51. goo.gl/RXImkC

  52. Look beyond 
 the web

  53. artofthetitle.com

  54. capptivate.co

  55. None

  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