Putting Your UIs in Motion (AEA Orlando)

76ded8131db760e741f0ecb01cb4c562?s=47 Val Head
October 28, 2014

Putting Your UIs in Motion (AEA Orlando)

Good Interface animation needs to be both helpful and done with style. This talk is all about how we can pull that off in our own work as designers. As seen at AEA Orlando 2014!

76ded8131db760e741f0ecb01cb4c562?s=128

Val Head

October 28, 2014
Tweet

Transcript

  1. Val Head • @vlh Putting Your UIs In Motion ALL

    THE RIGHT MOVES:
  2. None
  3. None
  4. None
  5. Animation softens the edges of interaction

  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: Tells your story

  18. None
  19. None
  20. ANIMATION: Gets (all the) attention

  21. None
  22. None
  23. Doing it with style

  24. Keep UI Animations Flexible

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

  28. None
  29. None
  30. prototype 
 prototype 
 prototype!

  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. “Sometimes when we release an update, I tighten up an

    old transition by ~50ms. ! Result: “Wow, this new version feels faster.” ” - Cennydd Bowels
  36. More complex easing needs more time 
 to be readable.

  37. Match motion to your message

  38. None
  39. None
  40. None
  41. Your choice of easing makes all the difference. 

  42. None
  43. None
  44. None
  45. None
  46. None
  47. None
  48. None
  49. None
  50. None
  51. None
  52. None
  53. None
  54. None
  55. alltherightmoves.valhead.com

  56. This is only the beginning

  57. Make 
 the awesomest 
 of things!

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

  59. fivesimplesteps.com/products/css-animations