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

Putting Your UIs in Motion (AEA Orlando)

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!

Val Head

October 28, 2014
Tweet

More Decks by Val Head

Other Decks in Design

Transcript

  1. Val Head • @vlh
    Putting Your UIs
    In Motion
    ALL THE RIGHT MOVES:

    View full-size slide

  2. Animation softens the
    edges of interaction

    View full-size slide

  3. ANIMATION:
    Establishes location

    View full-size slide

  4. ANIMATION:
    Guides tasks

    View full-size slide

  5. ANIMATION:
    Demonstrates

    View full-size slide

  6. ANIMATION:
    Tells your story

    View full-size slide

  7. ANIMATION:
    Gets (all the) attention

    View full-size slide

  8. Doing it with style

    View full-size slide

  9. Keep UI
    Animations
    Flexible

    View full-size slide

  10. Don’t create
    obstacles

    View full-size slide

  11. prototype 

    prototype 

    prototype!

    View full-size slide

  12. Look at speed and
    readability

    View full-size slide

  13. .2s to .6s 

    a happy place for “small”
    interactions

    View full-size slide

  14. Ease-outs 

    feel more “responsive”

    View full-size slide

  15. “Sometimes when we release an
    update, I tighten up an old
    transition by ~50ms.
    !
    Result: “Wow, this new version
    feels faster.” ”
    - Cennydd Bowels

    View full-size slide

  16. More complex easing
    needs more time 

    to be readable.

    View full-size slide

  17. Match motion to
    your message

    View full-size slide

  18. Your choice of easing makes all
    the difference.

    View full-size slide

  19. alltherightmoves.valhead.com

    View full-size slide

  20. This is only the beginning

    View full-size slide

  21. Make 

    the awesomest 

    of things!

    View full-size slide

  22. codepen.io/valhead
    alltherightmoves.valhead.com
    valhead.com
    !
    @vlh
    [email protected]
    Thanks!

    View full-size slide

  23. fivesimplesteps.com/products/css-animations

    View full-size slide