Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Design / Motion Design

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.

Val Head

July 30, 2014
Tweet

More Decks by Val Head

Other Decks in Design

Transcript

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

    View full-size slide

  2. Design
    +=
    Animation

    View full-size slide

  3. JavaScript
    Canvas
    WebGL
    CSS
    SVG

    View full-size slide

  4. Animation for
    the sake of it
    is a waste
    !

    View full-size slide

  5. we need to
    create useful
    animation

    View full-size slide

  6. we need to
    animate with
    style

    View full-size slide

  7. Become a UI
    animation expert
    in the next 30
    mins*
    !
    !
    !
    *resultsmayvarysafetynotguaranteedetc.

    View full-size slide

  8. Three
    animation
    principles

    View full-size slide

  9. 1:Timing
    !
    !
    !
    !
    !
    !
    !
    (timing is everything, they say)

    View full-size slide

  10. Timing:
    appearing to obey the
    laws of physics

    View full-size slide

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

    View full-size slide

  12. Timing:
    establishes mood,
    emotion, and reaction

    View full-size slide

  13. animation: shakeIt 1s ease;
    !
    animation: shakeIt 1s;

    View full-size slide

  14. ease
    linear
    ease-in
    ease-out
    ease-in-out

    View full-size slide

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

    View full-size slide

  16. TIME
    PROGRESSION

    View full-size slide

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

    View full-size slide

  18. everything
    is better with
    cubic beziers!

    View full-size slide

  19. 2: Secondary
    action

    View full-size slide

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

    View full-size slide

  21. 2: Squash and
    stretch

    View full-size slide

  22. Squash and stretch:
    gives a sense of weight
    and flexibility to an
    object

    View full-size slide

  23. Squash and stretch:
    reads as fun or comical
    and conveys a sense of
    energy

    View full-size slide

  24. http://goo.gl/WkjL6W

    View full-size slide

  25. Four
    principles of UI
    animation

    View full-size slide

  26. 1: stay flexible

    View full-size slide

  27. A B
    Things can happen here. Yikes!

    View full-size slide

  28. 2: don’t create
    obstacles

    View full-size slide

  29. 3: remember
    readability

    View full-size slide

  30. UI animations should be as fast
    as they can still be readable.
    readable.

    View full-size slide

  31. 4: match
    motion and
    message

    View full-size slide

  32. prototype,
    prototype,
    prototype!

    View full-size slide

  33. artofthetitle.com

    View full-size slide

  34. capptivate.co

    View full-size slide

  35. There are crazy
    fun times
    ahead!

    View full-size slide

  36. Make 

    the awesomest 

    of things!

    View full-size slide

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

    View full-size slide