Web Design / Motion Design

76ded8131db760e741f0ecb01cb4c562?s=47 Val Head
July 30, 2014

Web Design / Motion Design

A talk all about how we can incorporate animation principles, both traditional and UI specific ones, to better design our web-based animations. As seen at BDConf Nashville 2014.

76ded8131db760e741f0ecb01cb4c562?s=128

Val Head

July 30, 2014
Tweet

Transcript

  1. @vlh #BDConf! Nashville 2014 Motion Designer Web Designer

  2. Design  += Animation

  3. None
  4. None
  5. JavaScript Canvas WebGL CSS SVG

  6. Animation 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 30 mins*

    ! ! ! *resultsmayvarysafetynotguaranteedetc.
  10. Three animation principles

  11. None
  12. 1:Timing ! ! ! ! ! ! ! (timing is

    everything, they say)
  13. Timing: appearing to obey the laws of physics

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

  15. Timing: establishes mood, emotion, and reaction

  16. None
  17. None
  18. animation: shakeIt 1s ease; ! animation: shakeIt 1s;

  19. ease linear ease-in ease-out ease-in-out

  20. cubic-bezier(0.47, 0, 0.745, 0.715)

  21. TIME PROGRESSION

  22. cubic-bezier(0.42, 0, 0.58, 1);

  23. None
  24. None
  25. everything is better with  cubic beziers!

  26. ease-in-out

  27. None
  28. ease-in-out

  29. None
  30. None
  31. None
  32. None
  33. 2: Secondary action

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

  35. None
  36. None
  37. None
  38. 2: Squash and stretch

  39. Squash and stretch: gives a sense of weight and flexibility

    to an object
  40. None
  41. Squash and stretch: reads as fun or comical and conveys

    a sense of energy
  42. None
  43. None
  44. None
  45. None
  46. http://goo.gl/WkjL6W

  47. Four principles of UI animation

  48. 1: stay flexible

  49. None
  50. None
  51. A B Things can happen here. Yikes!

  52. 2: don’t create obstacles

  53. None
  54. None
  55. 3: remember readability

  56. UI animations should be as fast as they can still

    be readable. readable.
  57. 4: match motion and message

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

  61. artofthetitle.com

  62. capptivate.co

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

  65. Make 
 the awesomest 
 of things!

  66. Thank you Nashville! ! ! @vlh valhead.com