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
97
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
0
590
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
1
810
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
1
180
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
1
120
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
4
340
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
2
380
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
2
170
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
11
670

Other Decks in Design

See All in Design
4e31073915ee7c3694f52e543d744634?s=48 snd07
0
120
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
3
400
Cf9808b306096a913709da756edeb665?s=48 uxevents
1
180
C7d1b13dd280db9271d07dc4bde9a2c1?s=48 chocolatina
3
240
53686ab0d1d54666a9ca00dd0086a68f?s=48 kobiebrett
1
390
99de77666ff40dbf0988652899cc92ef?s=48 kamihira
2
2.2k
2b43718b2765276034a6fc98eedb7cd9?s=48 toi_toi_y
0
300
91e7aee9769836f448a9f1ce91255749?s=48 mathatelle
0
1.1k
0d8a5f112b203f084178d4432b10e354?s=48 chyanime
0
120
0a3f975afb192c0aa86e2f2cef37e677?s=48 mariko_s14ninja
1
500
Db4b4f2b80639dfa21296832bae16935?s=48 cotolier_risa
1
130
0d8a5f112b203f084178d4432b10e354?s=48 chyanime
0
130

Featured

See All Featured
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
281
46k
9375a9529679f1b42b567a640d775e7d?s=48 schacon
144
6.4k
D47656e20ff5e42f125fc5ea0fd636c6?s=48 tmm1
61
7.4k
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
252
19k
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
257
16k
B83d5b590577969ee79a5ad845411a7d?s=48 ammeep
652
54k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
391
60k
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
91
2.8k
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
121
20k
4394ceb8b277f35ee3da7030384efb5d?s=48 davidbonilla
68
3.4k
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
183
14k
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
51
5.9k

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