Designing Animation Awesomeness - Artifact Austin

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

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
98
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
2
510
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
0
610
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
1
830
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
1
190
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
1
120
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
2
390
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
2
180
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
11
670

Other Decks in Design

See All in Design
633aea3a27016b588cfa67cce4df7f15?s=48 kimurakei
0
150
Aab4a3f4a7479c56027a9c9ca7bcbbaf?s=48 securecat
0
350
B896d135180958999cd053869215f3f0?s=48 ohtristanart
0
180
82414e7232f1483734d998f5c2e4f346?s=48 misaaa09
0
1k
9a87127aafe6c1317c738efe6675f58a?s=48 learninginaction
0
310
Ec9d61b341b4b947214742055cc5d171?s=48 jeffffan
0
130
981ed7f53e9d180eebe70263745410d5?s=48 sekisatoko
1
2.6k
07e2c6335be6197e2b2c9c8607ecb0ba?s=48 cassidypierce
0
400
3dfed36dc1543f0007b5fd46fcb41a47?s=48 yunoda
0
980
03b94ab7c6fc1a56632bd27feceb1817?s=48 cduc
0
110
2b43718b2765276034a6fc98eedb7cd9?s=48 toi_toi_y
1
580
0eb7b7e396243e93a186ba20649d9aa6?s=48 akiramotomura
3
160

Featured

See All Featured
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
125
21k
79acae287842acf29084005533a7fb3b?s=48 hursman
104
9.1k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
90
13k
C157b16234f1e75e8eac3698c1d4414a?s=48 ddemaree
273
31k
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
91
2.8k
56c4053438af8e8b90d6f53cbb7573be?s=48 jakevdp
769
190k
5f50f94346fbcb23706f0707169317a4?s=48 aarron
254
36k
91cefdf141106fa10674aae74ce05890?s=48 yeseniaperezcruz
297
30k
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
256
11k
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
12
1.3k
11c84dff30266b907714802088852677?s=48 jasonvnalue
80
7.9k
A9704266587836f7e784235e5073b93e?s=48 jmmastey
5
360

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!