Emotion through CSS

CSS Conf EU

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