Web Designer/ Motion Designer - Blend Conf 2014

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

Web Designer/ Motion Designer - Blend Conf 2014

A crash course in motion design for web designers. Applying traditional motion principles to CSS to make sophisticated animated interfaces on the web.

76ded8131db760e741f0ecb01cb4c562?s=128

Val Head

September 13, 2014
Tweet

Transcript

  1. @vlh Blend Conf 2014! Motion Designer Web Designer

  2. @vlh Blend Conf 2014! Motion Designer Web Designer

  3. Design  & Animation

  4. None
  5. None
  6. Animation just for the sake of it 
 is a

    waste !
  7. We need to create useful animation

  8. We need to animate 
 with style

  9. Become a UI animation expert in the next 37 mins

    !
  10. None
  11. None
  12. Three animation principles

  13. 1:
 Timing !

  14. Timing: appearing to obey the laws of “physics”

  15. Timing: establishes mood, emotion, and reaction

  16. ease linear ease-in ease-out ease-in-out

  17. cubic-bezier(0.42, 0, 0.58, 1)

  18. TIME PROGRESSION

  19. None
  20. None
  21. Everything is better with  cubic beziers!

  22. None
  23. None
  24. ease-in-out

  25. None
  26. None
  27. None
  28. None
  29. 2: 
 Secondary action

  30. Secondary action: 
 supplemental action that reinforces and adds dimension

  31. None
  32. None
  33. None
  34. None
  35. 2: 
 Squash and stretch

  36. Squash and stretch: 
 gives a sense of weight and

    flexibility to an object
  37. None
  38. Squash and stretch: reads as fun or comical & conveys

    a sense of energy
  39. None
  40. None
  41. None
  42. None
  43. Four principles of UI animation

  44. 1: 
 Stay flexible

  45. None
  46. None
  47. 2: 
 Don’t create obstacles

  48. None
  49. None
  50. None
  51. 3: 
 Remember readability

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

  53. Ease-outs feel more “responsive”

  54. None
  55. More complex easing needs more time to be readable

  56. None
  57. 4: 
 Match motion to your message

  58. None
  59. None
  60. None
  61. prototype, prototype, prototype!

  62. artofthetitle.com

  63. capptivate.co

  64. None
  65. There are crazy fun times ahead!

  66. Make 
 the awesomest 
 of things!

  67. Thanks!  ! @vlh valhead.com alltherightmoves.valhead.com