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

Designing Animation Awesomeness - FOWD 2014

Val Head
November 04, 2014

Designing Animation Awesomeness - FOWD 2014

Designing Animation Awesomeness as shared with the super lovely crowd at FOWD NYC 2014.

Val Head

November 04, 2014
Tweet

More Decks by Val Head

Other Decks in Design

Transcript

  1. Val Head • @vlh
    Designing
    Animation
    Awesomeness!
    ANIMATION AS DESIGN & IN OUR DESIGN PROCESS

    View full-size slide

  2. Animation + UX
    FTW

    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:
    Is totally a diva

    View full-size slide

  7. http://goo.gl/XKODuq

    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 Bowles

    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. cubic-beziers

    View full-size slide

  20. Getting out of
    your head

    View full-size slide

  21. Get your idea moving on screen
    as early as possible.

    View full-size slide

  22. http://goo.gl/7IzUDh

    View full-size slide

  23. goo.gl/RXImkC

    View full-size slide

  24. Look beyond 

    the web

    View full-size slide

  25. artofthetitle.com

    View full-size slide

  26. capptivate.co

    View full-size slide

  27. Make 

    the awesomest 

    of things!

    View full-size slide

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

    View full-size slide

  29. alltherightmoves.valhead.com

    View full-size slide

  30. valhead.com/book

    View full-size slide