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

Designing Motion (The JavaScript Version)

Val Head
November 29, 2011

Designing Motion (The JavaScript Version)

Designing Motion presentation as seen at Pgh.Js() on Nov 29th 2011

Val Head

November 29, 2011
Tweet

More Decks by Val Head

Other Decks in Design

Transcript

  1. Designing
    Motion
    Make Animation On The Web Extra Awesome!

    View full-size slide

  2. EVENTS!
    MAKING THINGS!
    DESIGN!

    View full-size slide

  3. Designing
    Motion
    Make Animation On The Web Extra Awesome!

    View full-size slide

  4. Details
    Insert cliche here

    View full-size slide

  5. with great
    comes
    Responsibility
    Power
    Great

    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. BREAK IT DOWN

    View full-size slide

  10. SO Many Options!

    View full-size slide

  11. Metaphor
    What are you imitating?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. “... 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

  15. Internet != Cartoon

    View full-size slide

  16. Rules Just For Us :)

    View full-size slide

  17. Are we there yet?
    “Point B” isn’t static.

    View full-size slide

  18. Yeah
    I changed my mind

    View full-size slide

  19. Semantics Matter
    We care about that codestuffs

    View full-size slide

  20. That’s Mr. DOM
    respect!

    View full-size slide

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

    View full-size slide

  22. New Things!!
    yay?

    View full-size slide

  23. Fallbacks+
    browsers, devices, the future, oh my!

    View full-size slide

  24. Limitations
    work with them, not against them. frenemies?

    View full-size slide

  25. Dealing With
    Multiples

    View full-size slide

  26. Transference

    View full-size slide

  27. Time Signatures

    View full-size slide

  28. Go Play!
    Experiment. Make things. Have fun. Edit later.

    View full-size slide

  29. Slides & Things:
    valhead.com
    Let’s Chat:
    [email protected] • @vlh
    Thanks!

    View full-size slide