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

Designing Motion

Val Head
October 02, 2011

Designing Motion

"With great power comes great responsibility" is something you hear often about making things move on the modern web. Well, if that's the case, then we had better really mean it!

We'll look at how to get the most out of your CSS transitions and transforms by going beyond just start and end points and applying our design eye to those ever important in-between parts. That's where the real power of animation lies. We want elegant and meaningful animation, not obtrusive or meaningless fluff! What can we borrow from traditional animation? And what do we need to make our own rules for? We'll find some answers and (I hope) you'll never think of a simple transition the same again.

Val Head

October 02, 2011
Tweet

More Decks by Val Head

Other Decks in Design

Transcript

  1. Designing Motion

    View full-size slide

  2. EVENTS!
    MAKING THINGS!
    DESIGN!

    View full-size slide

  3. Designing Motion

    View full-size slide

  4. Details
    Details
    Details

    View full-size slide

  5. with great
    POWER
    comes
    GREAT
    responsibility

    View full-size slide

  6. Animation for UI

    View full-size slide

  7. OPEN, CLOSE!
    BUTTONS, LINKS!
    BASED ON USER INPUT
    FADES

    View full-size slide

  8. Animation for Experience

    View full-size slide

  9. So So Many Options!
    How do we decide?

    View full-size slide

  10. What are you imitating?
    Metaphor

    View full-size slide

  11. Light as a feather
    Stiff as a board
    Weight & Physics

    View full-size slide

  12. The idea that various aspects of the
    character’s attributes come together to
    just feel “right”.
    Appeal

    View full-size slide

  13. “... it’s easy to forget that when you’re
    building a game you’re not just building a
    set of rules or a pile of content. You’re
    crafting and experience...
    Animation happens to be my weapon of
    choice to achieve this”
    [Mika Mobile blog post]

    View full-size slide

  14. The internet is not a
    cartoon.
    (usually)

    View full-size slide

  15. Yeah,
    I changed my mind…

    View full-size slide

  16. We kinda care about our code…

    View full-size slide

  17. Hi, I’m a link!
    Hi, I’m a link!
    Hi, I’m a link!

    View full-size slide

  18. YAY! New Things!
    BOO! New Things!

    View full-size slide

  19. Transference

    View full-size slide

  20. Time Signatures

    View full-size slide

  21. and with that…

    View full-size slide

  22. THANKS!
    Files & Slides:
    valhead.com/WDD2011
    Let’s Chat:
    [email protected] • @vlh

    View full-size slide