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

Effective animations with web standards

Val Head
May 21, 2012

Effective animations with web standards

A short presentation on what makes UI animations effective and creating design details with motion.

Val Head

May 21, 2012
Tweet

More Decks by Val Head

Other Decks in Design

Transcript

  1. Designing
    Motion
    Make Animation On The Web Extra Awesome!
    Monday, May 21, 12

    View full-size slide

  2. Monday, May 21, 12

    View full-size slide

  3. I CSS
    Monday, May 21, 12

    View full-size slide

  4. Monday, May 21, 12

    View full-size slide

  5. Content Layer
    Monday, May 21, 12

    View full-size slide

  6. Content Layer
    Style Layer
    Monday, May 21, 12

    View full-size slide

  7. Content Layer
    Style Layer
    Behaviour Layer
    Monday, May 21, 12

    View full-size slide

  8. Content Layer
    Style Layer
    Behaviour Layer
    (HTML)
    Monday, May 21, 12

    View full-size slide

  9. Content Layer
    Style Layer
    Behaviour Layer
    (CSS)
    (HTML)
    Monday, May 21, 12

    View full-size slide

  10. Content Layer
    Style Layer
    Behaviour Layer (JS)
    (CSS)
    (HTML)
    Monday, May 21, 12

    View full-size slide

  11. These changing times
    Monday, May 21, 12

    View full-size slide

  12. Monday, May 21, 12

    View full-size slide

  13. Monday, May 21, 12

    View full-size slide

  14. Experience is now the
    material, not ceramic or
    plastic.


    Liz Danzico, SVA
    Monday, May 21, 12

    View full-size slide

  15. Monday, May 21, 12

    View full-size slide

  16. What do we use
    motion for?
    Monday, May 21, 12

    View full-size slide

  17. Attract attention
    Hide/reveal content
    Illustrate/demonstrate
    Cues & clues
    Monday, May 21, 12

    View full-size slide

  18. Surprise and Delight
    Communication
    Personality
    Connections
    Monday, May 21, 12

    View full-size slide

  19. Transitions are the subtle in-
    between details that we as
    human beings actually connect
    with and the reasons we fall in
    love with something rather than
    simply like something.


    Brendan Dawes
    Monday, May 21, 12

    View full-size slide

  20. Animation for UI
    Monday, May 21, 12

    View full-size slide

  21. Monday, May 21, 12

    View full-size slide

  22. Monday, May 21, 12

    View full-size slide

  23. Animation for
    storytelling
    Monday, May 21, 12

    View full-size slide

  24. Monday, May 21, 12

    View full-size slide

  25. Monday, May 21, 12

    View full-size slide

  26. Metaphor
    What are you imitating?
    Monday, May 21, 12

    View full-size slide

  27. Monday, May 21, 12

    View full-size slide

  28. Monday, May 21, 12

    View full-size slide

  29. Monday, May 21, 12

    View full-size slide

  30. Monday, May 21, 12

    View full-size slide

  31. Monday, May 21, 12

    View full-size slide

  32. Monday, May 21, 12

    View full-size slide

  33. Weight & Physics
    Light as a feather. Stiff as a board.
    Monday, May 21, 12

    View full-size slide

  34. Monday, May 21, 12

    View full-size slide

  35. Monday, May 21, 12

    View full-size slide

  36. Transference
    Monday, May 21, 12

    View full-size slide

  37. Monday, May 21, 12

    View full-size slide

  38. Monday, May 21, 12

    View full-size slide

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

    View full-size slide

  40. Monday, May 21, 12

    View full-size slide

  41. Monday, May 21, 12

    View full-size slide

  42. “... 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]
    Monday, May 21, 12

    View full-size slide

  43. Internet != Cartoon
    Monday, May 21, 12

    View full-size slide

  44. Are we there yet?
    “Point B” isn’t static.
    Monday, May 21, 12

    View full-size slide

  45. Yeah...
    I changed my mind
    Monday, May 21, 12

    View full-size slide

  46. Monday, May 21, 12

    View full-size slide

  47. Monday, May 21, 12

    View full-size slide

  48. Monday, May 21, 12

    View full-size slide

  49. Monday, May 21, 12

    View full-size slide

  50. Semantics Matter
    We care about that codestuffs
    Monday, May 21, 12

    View full-size slide

  51. Hi, I’m a link!
    Hi, I’m a link!
    Hi, I’m a link!
    Monday, May 21, 12

    View full-size slide

  52. @danielmall
    Monday, May 21, 12

    View full-size slide

  53. Resources
    check the links file too!
    Monday, May 21, 12

    View full-size slide

  54. Monday, May 21, 12

    View full-size slide

  55. Monday, May 21, 12

    View full-size slide

  56. Monday, May 21, 12

    View full-size slide

  57. Monday, May 21, 12

    View full-size slide

  58. Go Play!
    Experiment. Make things. Have fun.
    Monday, May 21, 12

    View full-size slide

  59. Files & Slides:
    valhead.com
    Let’s Chat:
    [email protected] • @vlh
    Monday, May 21, 12

    View full-size slide