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

Designing Animation Awesomeness - Artifact Austin

76ded8131db760e741f0ecb01cb4c562?s=47 Val Head
May 06, 2014
Design
4
360

Designing Animation Awesomeness - Artifact Austin

Designing UI animations for the web and how to fit animation into our design process. Plus silly jokes.

76ded8131db760e741f0ecb01cb4c562?s=128

Val Head

May 06, 2014
Tweet

More Decks by Val Head

See All by Val Head
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
0
100
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
2
510
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
2
390
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
2
180
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
11
680

Other Decks in Design

See All in Design
859e8975e599ea0d6d9e84eb9e35bdb6?s=48 3mp
0
530
Fac9912bffbd86093cb4c431977e2240?s=48 rickycharms
0
170
5696bd82fd62181c65c8bb3c168d49c1?s=48 solmetts
0
180
76168a2da5c22ec0db3990392c8c9b91?s=48 isawiitch
1
200
Eb3f099a0ad1b2f8ff9180432ab10d72?s=48 mollysart
1
120
C9b1043c15896a8a15b68564b9789130?s=48 maruejouls
0
330
5481f706b4bfeb0569b1f759b528f6e2?s=48 sahinairvin
PRO
1
550
97cd6dacd55edd934728a50a583e0507?s=48 depot_branding
0
110
Acb24b2e81f0f7c3d6e7eda5e0a70be8?s=48 alvieave
1
130
Eb3f099a0ad1b2f8ff9180432ab10d72?s=48 mollysart
0
180
169193701aa6e6249f882068f13afa88?s=48 gazinc
0
2k
92151711459a4e3a191f791238f6259d?s=48 chiemitaki
0
1.2k

Featured

See All Featured
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
235
18k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
225
48k
A0517b08532aec8ab2aae3f65d40ad86?s=48 hannesfritz
32
1.1k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
443
29k
78b475797a14c84799063c7cd073962f?s=48 holman
294
130k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
324
54k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
91
8.9k
Bfd6b681ec6e8c9bef82ff0521c364f7?s=48 kastner
56
2k
24fc194843a71f10949be18d5a692682?s=48 gr2m
86
11k
78b475797a14c84799063c7cd073962f?s=48 holman
464
280k
282d599b414022eba5096510f675b6e2?s=48 chrislema
174
14k
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
43
2k

Transcript

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

    & IN OUR DESIGN PROCESS

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

    & IN OUR DESIGN PROCESS

  3. RWD + Animation?

  4. None

  5. Animation = Communication

  6. None
  7. None

  8. Animation must match your message.

  9. None

  10. cubic-bezier(0.47, 0, 0.745, 0.715)

  11. vimeo.com/93206523

  12. More than fluff

  13. None
  14. None

  15. Animation + UX FTW

  16. ANIMATION CAN: Establish location

  17. None
  18. None

  19. ANIMATION CAN: Guides tasks

  20. None
  21. None
  22. None

  23. ANIMATION CAN: Demonstrate

  24. None
  25. None
  26. None

  27. ANIMATION CAN: Turn your hierarchy up to 11

  28. None
  29. None

  30. UI animation principles

  31. 1 Always be flexible

  32. None
  33. None

  34. 2 Avoid creating obstacles

  35. None
  36. None

  37. 3 Speed is an art

  38. UI animations should be as fast as they can still

    be readable. readable.

  39. Context matters more than magic numbers for animation speed.

  40. Getting out of your head

  41. None
  42. None

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

  44. None
  45. None
  46. None

  47. framerjs.com/

  48. goo.gl/RXImkC

  49. None

  50. Look beyond the web

  51. artofthetitle.com

  52. capptivate.co

  53. None

  54. Make the awesomest of things!

  55. alltherightmoves.valhead.com

  56. valhead.com/book

  57. codepen.io/valhead alltherightmoves.valhead.com valhead.com @vlh val@valhead.com Thanks!