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

Designing Animation Awesomeness - Artifact Austin

Val Head
May 06, 2014

Designing Animation Awesomeness - Artifact Austin

Designing UI animations for the web and how to fit animation into our design process. Plus silly jokes.

Val Head

May 06, 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. Val Head • @vlh
    Designing
    Animation
    Awesomeness!
    ANIMATION AS DESIGN & IN OUR DESIGN PROCESS

    View full-size slide

  3. RWD + Animation?

    View full-size slide

  4. Animation =
    Communication

    View full-size slide

  5. Animation must match
    your message.

    View full-size slide

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

    View full-size slide

  7. vimeo.com/93206523

    View full-size slide

  8. More than fluff

    View full-size slide

  9. Animation + UX FTW

    View full-size slide

  10. ANIMATION CAN:
    Establish location

    View full-size slide

  11. ANIMATION CAN:
    Guides tasks

    View full-size slide

  12. ANIMATION CAN:
    Demonstrate

    View full-size slide

  13. ANIMATION CAN:
    Turn your hierarchy
    up to 11

    View full-size slide

  14. UI animation principles

    View full-size slide

  15. 1
    Always be flexible

    View full-size slide

  16. 2
    Avoid creating obstacles

    View full-size slide

  17. 3
    Speed is an art

    View full-size slide

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

    View full-size slide

  19. Context matters more than magic
    numbers for animation speed.

    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. framerjs.com/

    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

    View full-size slide

  29. valhead.com/book

    View full-size slide

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

    View full-size slide