Designing Animation Awesomeness - Artifact East

76ded8131db760e741f0ecb01cb4c562?s=47 Val Head
September 29, 2014

Designing Animation Awesomeness - Artifact East

Let's talk about designing interface animations for the web. We want animations that are useful and look awesome. Here's how we do it!

As seen at Artifact Conf East 2014.

76ded8131db760e741f0ecb01cb4c562?s=128

Val Head

September 29, 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. The web has been stuck with hard cuts for too

    long!
  4. None
  5. None
  6. None
  7. None
  8. Animation + UX FTW

  9. ANIMATION: Establishes location

  10. None
  11. None
  12. ANIMATION: Guides tasks

  13. None
  14. None
  15. ANIMATION: Demonstrates

  16. None
  17. None
  18. ANIMATION: Tells your story

  19. None
  20. ANIMATION: Is totally a diva

  21. None
  22. None
  23. UI animation principles

  24. Stay flexible

  25. None
  26. None
  27. Don’t create obstacles

  28. None
  29. None
  30. None
  31. Look at speed and readability

  32. .2s to .6s 
 a happy place for “small” interactions

  33. Ease-outs 
 feel more “responsive”

  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. Getting out of your head

  42. None
  43. None
  44. prototype, prototype, prototype!

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

  46. None
  47. None
  48. None
  49. goo.gl/RXImkC

  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!