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

Emotion through CSS

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

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
39
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
1
180
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
1
87
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
1
150
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
0
95
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
0
43
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
1
71
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
0
45
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
0
140

Other Decks in Design

See All in Design
8d2b874afba472afdf9d74be9bec4a8c?s=48 agaitond
0
340
F8abf90d497834425c7278bb8000d9a3?s=48 retty
0
140
1da528720b1e19e37477b90a0c192320?s=48 takasu3m
0
7.8k
Ad94879495e21b7362d0d2c845f44bc0?s=48 soham
2
110
933291444e456bfb511a66a2fa9c6929?s=48 j5ik2o
1
450
5bce9e09e585aed42d646c47c7da38e0?s=48 ivettetwin
1
270
6d91cf9d7d3eb0954425a0a8aef69bef?s=48 andreh
0
210
Bcbe06266087609b9bcc73163d96fe08?s=48 tobik_jp
3
4.2k
Bff39f7d4e25a30fb4d28a9005de7363?s=48 uxaustralia
PRO
0
110
5282a03ca032a1f9e0df70c8ef2ea39c?s=48 ujki
0
120
8b61e6e9405c05e23396315eda70169f?s=48 yta026
1
4k
E9842b8acc7107a783648a6274dd9a10?s=48 laineyru
0
340

Featured

See All Featured
78b475797a14c84799063c7cd073962f?s=48 holman
464
280k
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
44
3.7k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
372
43k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
170b760e0147792d0140e59ec78e9893?s=48 eitanlees
121
11k
2bb923c57a1fdc3a2eb484bb8d565fd2?s=48 ufuk
62
7.4k
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
130
20k
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
14
1.2k
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
15
800
5f83ef806155b403c3393160ce51f955?s=48 jlugia
218
16k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
19
2.6k
B6a8f005f39d23ffc930508ac9da68b9?s=48 vanstee
125
5.2k

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