Designing Animation Awesomeness - Artifact Austin

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

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

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!