Designing Animation Awesomeness - FOWD 2014

76ded8131db760e741f0ecb01cb4c562?s=47 Val Head
November 04, 2014

Designing Animation Awesomeness - FOWD 2014

Designing Animation Awesomeness as shared with the super lovely crowd at FOWD NYC 2014.

76ded8131db760e741f0ecb01cb4c562?s=128

Val Head

November 04, 2014
Tweet

Transcript

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

    & IN OUR DESIGN PROCESS
  2. None
  3. None
  4. None
  5. Animation + UX FTW

  6. ANIMATION: Establishes location

  7. None
  8. None
  9. ANIMATION: Guides tasks

  10. None
  11. None
  12. None
  13. ANIMATION: Demonstrates

  14. None
  15. None
  16. None
  17. ANIMATION: Is totally a diva

  18. None
  19. None
  20. http://goo.gl/XKODuq

  21. Doing it with style

  22. Keep UI Animations Flexible

  23. None
  24. None
  25. Don’t create obstacles

  26. None
  27. None
  28. prototype 
 prototype 
 prototype!

  29. Look at speed and readability

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

  31. Ease-outs 
 feel more “responsive”

  32. None
  33. “Sometimes when we release an update, I tighten up an

    old transition by ~50ms. ! Result: “Wow, this new version feels faster.” ” - Cennydd Bowles
  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. Your choice of easing makes all the difference. 

  42. cubic-beziers

  43. Getting out of your head

  44. None
  45. None
  46. Get your idea moving on screen as early as possible.

  47. None
  48. None
  49. http://goo.gl/7IzUDh

  50. None
  51. goo.gl/RXImkC

  52. Look beyond 
 the web

  53. artofthetitle.com

  54. capptivate.co

  55. None
  56. Make 
 the awesomest 
 of things!

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

  58. alltherightmoves.valhead.com

  59. valhead.com/book