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

Want more?

76ded8131db760e741f0ecb01cb4c562?s=48 valhead
0
96
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
2
510
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
0
590
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
4
240
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
1
110
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
97
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
5
200
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
5
180
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
2
240
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
3
470
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
120
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
4
210

Transcript

  1. 1.

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

    & IN OUR DESIGN PROCESS
  2. 2.

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

    & IN OUR DESIGN PROCESS
  3. 3.

    RWD + Animation?

  4. 4.
    None
  5. 5.

    Animation = Communication

  6. 6.
    None
  7. 7.
    None
  8. 8.

    Animation must match your message.

  9. 9.
    None
  10. 10.

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

  11. 11.

    vimeo.com/93206523

  12. 12.

    More than fluff

  13. 13.
    None
  14. 14.
    None
  15. 15.

    Animation + UX FTW

  16. 16.

    ANIMATION CAN: Establish location

  17. 17.
    None
  18. 18.
    None
  19. 19.

    ANIMATION CAN: Guides tasks

  20. 20.
    None
  21. 21.
    None
  22. 22.
    None
  23. 23.

    ANIMATION CAN: Demonstrate

  24. 24.
    None
  25. 25.
    None
  26. 26.
    None
  27. 27.

    ANIMATION CAN: Turn your hierarchy up to 11

  28. 28.
    None
  29. 29.
    None
  30. 30.

    UI animation principles

  31. 31.

    1 Always be flexible

  32. 32.
    None
  33. 33.
    None
  34. 34.

    2 Avoid creating obstacles

  35. 35.
    None
  36. 36.
    None
  37. 37.

    3 Speed is an art

  38. 38.

    UI animations should be as fast as they can still

    be readable. readable.
  39. 39.

    Context matters more than magic numbers for animation speed.

  40. 40.

    Getting out of your head

  41. 41.
    None
  42. 42.
    None
  43. 43.

    Get your idea moving on screen as early as possible.

  44. 44.
    None
  45. 45.
    None
  46. 46.
    None
  47. 47.

    framerjs.com/

  48. 48.

    goo.gl/RXImkC

  49. 49.
    None
  50. 50.

    Look beyond the web

  51. 51.

    artofthetitle.com

  52. 52.

    capptivate.co

  53. 53.
    None
  54. 54.

    Make the awesomest of things!

  55. 55.

    alltherightmoves.valhead.com

  56. 56.

    valhead.com/book

  57. 57.

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