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

Web Designer/ Motion Designer - Blend Conf 2014

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.

Val Head

September 13, 2014
Tweet

More Decks by Val Head

Other Decks in Design

Transcript

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

    View full-size slide

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

    View full-size slide

  3. Design
    &
    Animation

    View full-size slide

  4. Animation just 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 37 mins
    !

    View full-size slide

  8. Three
    animation
    principles

    View full-size slide

  9. 1:

    Timing
    !

    View full-size slide

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

    View full-size slide

  11. Timing:
    establishes mood, emotion,
    and reaction

    View full-size slide

  12. ease
    linear
    ease-in
    ease-out
    ease-in-out

    View full-size slide

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

    View full-size slide

  14. TIME
    PROGRESSION

    View full-size slide

  15. Everything
    is better with
    cubic beziers!

    View full-size slide

  16. 2: 

    Secondary
    action

    View full-size slide

  17. Secondary action: 

    supplemental action that
    reinforces and adds dimension

    View full-size slide

  18. 2: 

    Squash and stretch

    View full-size slide

  19. Squash and stretch: 

    gives a sense of weight and
    flexibility to an object

    View full-size slide

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

    View full-size slide

  21. Four
    principles of UI
    animation

    View full-size slide

  22. 1: 

    Stay flexible

    View full-size slide

  23. 2: 

    Don’t create
    obstacles

    View full-size slide

  24. 3: 

    Remember
    readability

    View full-size slide

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

    View full-size slide

  26. Ease-outs feel more “responsive”

    View full-size slide

  27. More complex easing needs more
    time to be readable

    View full-size slide

  28. 4: 

    Match motion to your
    message

    View full-size slide

  29. prototype,
    prototype,
    prototype!

    View full-size slide

  30. artofthetitle.com

    View full-size slide

  31. capptivate.co

    View full-size slide

  32. There are crazy fun
    times ahead!

    View full-size slide

  33. Make 

    the awesomest 

    of things!

    View full-size slide

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

    View full-size slide