$30 off During Our Annual Pro Sale. View Details »

Emotion through CSS

Tammie Lister
September 23, 2015

Emotion through CSS

CSS Conf EU

Tammie Lister

September 23, 2015
Tweet

More Decks by Tammie Lister

Other Decks in Design

Transcript

  1. EMOTION
    THROUGH CSS

    View Slide

  2. View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. www.aldebaran.com/en/a-robots/who-is-pepper

    View Slide

  8. www.parorobots.com

    View Slide

  9. Carlos López Molina

    View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. Flickr: danielito311

    View Slide

  15. Sympho on Wikipedia

    View Slide

  16. h p://the12principles.tumblr.com/

    View Slide

  17. ANTICIPATION

    View Slide

  18. TIMING

    View Slide

  19. EXAGGERATION

    View Slide

  20. APPEAL

    View Slide

  21. Kristina Alexanderson

    View Slide

  22. Catena
    Alma Reklam Bilisim 

    Sanayi Ve Ticaret A.S.

    View Slide

  23. Monument Valley
    ustwo

    View Slide

  24. UP Coffee
    Aliphcom, Inc.

    View Slide

  25. Flappy Bird

    View Slide

  26. Peter Klein
    codepen.io/pmk/pen/ByXOOq/

    View Slide

  27. species-in-pieces.com/

    View Slide

  28. www.toyota-insidedreams.com/dreamcar-collection/

    View Slide

  29. BEYOND THE SHOWCASE

    View Slide

  30. Slack

    View Slide

  31. Codepen

    View Slide

  32. Codepen

    View Slide

  33. Natalya
    codepen.io/tallys/pen/MwxXbW

    View Slide

  34. EMOTIONAL BUTTONS
    codepen.io/collection/DNqkZE

    View Slide

  35. TEST CONDITIONS

    View Slide

  36. HAPPY

    View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. codepen.io/karmatosed/pen/avvbpj

    View Slide

  41. ANGRY

    View Slide

  42. View Slide

  43. View Slide

  44. codepen.io/karmatosed/pen/vNNZYb

    View Slide

  45. SAD

    View Slide

  46. View Slide

  47. View Slide

  48. codepen.io/karmatosed/pen/EVVXdO

    View Slide

  49. THE TESTS

    View Slide

  50. HAPPY BUTTON : 5
    rushed, excited or anxious too

    View Slide

  51. ANGRY BUTTON : 5
    annoyed

    View Slide

  52. SAD BUTTON : 5
    stoned and sleepy, reluctant, bored

    View Slide

  53. Happy and angry… “Reminds me of my kid”

    View Slide

  54. THAT’S CUTE BUT…

    View Slide

  55. INVISIBLE ANIMATION

    View Slide

  56. SOME MORE EXPERIMENTS

    View Slide

  57. COUGHING BUTTONS

    View Slide

  58. codepen.io/karmatosed/pen/meeNoM

    View Slide

  59. ZEN INPUTS

    View Slide

  60. codepen.io/karmatosed/pen/QjyLLJ

    View Slide

  61. FEEDBACK

    View Slide

  62. View Slide

  63. Tammie Lister @karmatosed
    THANKS
    Slides: speakerdeck.com/tammielis/emotion-through-css

    View Slide