Emotion through CSS

D36d2c1821af9249b69ff7f5ed60529b?s=47 Tammie Lister
September 23, 2015
Design
4
530

Emotion through CSS

CSS Conf EU

D36d2c1821af9249b69ff7f5ed60529b?s=128

Tammie Lister

September 23, 2015
Tweet

More Decks by Tammie Lister

See All by Tammie Lister
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
0
9
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
1
77
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
1
25
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
1
71
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
0
83
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
0
43
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
1
53
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
0
35
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
0
81

Other Decks in Design

See All in Design
119ea69dbbe9e31199c9bc686f43632b?s=48 icgedigk
1
210
Aab4a3f4a7479c56027a9c9ca7bcbbaf?s=48 securecat
0
350
199edc6b1c79d9ff9a20f87dd1019545?s=48 erilin86
4
330
37228dc025342eeadeb18bf1c2976a7a?s=48 fixel_admin
1
120
9cb8f605e3ccad1e867dad2b0b32314f?s=48 brett58
2
360
3e64ab0aa15150f3e512a06e973cb41d?s=48 mura24
2
890
1b957a6255dca8e9cc77db19f2cf1358?s=48 kackington
0
330
8b8d433ca23ddb6d5c1949e121b57383?s=48 karte
1
370
6f9c90981748adfbe77022cfb228d386?s=48 michalis_art
1
240
6715312320f3bd88463ad96db1f13866?s=48 ryusukekogetsu
2
4.4k
60424662787735ef0fa08846201b77b0?s=48 matsueri
0
760
6715312320f3bd88463ad96db1f13866?s=48 ryusukekogetsu
1
1.2k

Featured

See All Featured
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
5
200
Ecdea9b9714877b86cee08458f085481?s=48 trallard
10
440
9375a9529679f1b42b567a640d775e7d?s=48 schacon
144
6.5k
245cee81a9c424266e5e401d844ea881?s=48 lara
169
9.3k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
775
240k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
366
42k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
11
700
282d599b414022eba5096510f675b6e2?s=48 chrislema
171
14k
Af6a12710770ad9a7cfd08c97efd40d3?s=48 pedronauck
649
110k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
142
19k
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
11
1.6k
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
11
510

Transcript

  1. EMOTION THROUGH CSS

  2. None
  3. None
  4. None
  5. None
  6. None

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

  8. www.parorobots.com

  9. Carlos López Molina

  10. None
  11. None
  12. None
  13. None

  14. Flickr: danielito311

  15. Sympho on Wikipedia

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

  17. ANTICIPATION

  18. TIMING

  19. EXAGGERATION

  20. APPEAL

  21. Kristina Alexanderson

  22. Catena Alma Reklam Bilisim 
 Sanayi Ve Ticaret A.S.

  23. Monument Valley ustwo

  24. UP Coffee Aliphcom, Inc.

  25. Flappy Bird

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

  27. species-in-pieces.com/

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

  29. BEYOND THE SHOWCASE

  30. Slack

  31. Codepen

  32. Codepen

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

  34. EMOTIONAL BUTTONS codepen.io/collection/DNqkZE

  35. TEST CONDITIONS

  36. HAPPY

  37. None
  38. None
  39. None

  40. codepen.io/karmatosed/pen/avvbpj

  41. ANGRY

  42. None
  43. None

  44. codepen.io/karmatosed/pen/vNNZYb

  45. SAD

  46. None
  47. None

  48. codepen.io/karmatosed/pen/EVVXdO

  49. THE TESTS

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

  51. ANGRY BUTTON : 5 annoyed

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

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

  54. THAT’S CUTE BUT…

  55. INVISIBLE ANIMATION

  56. SOME MORE EXPERIMENTS

  57. COUGHING BUTTONS

  58. codepen.io/karmatosed/pen/meeNoM

  59. ZEN INPUTS

  60. codepen.io/karmatosed/pen/QjyLLJ

  61. FEEDBACK

  62. None

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