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
540

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
21
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
1
81
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
1
27
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
1
79
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
0
88
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
0
43
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
1
57
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
0
39
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
0
82

Other Decks in Design

See All in Design
2d25e12912ed16b70c1754dd10177d82?s=48 danpark001
1
3k
2481158a72219f42b701cf0fcef12971?s=48 rvillarreal
0
130
5d639362659f497bd827ffcce6b6b529?s=48 shosira
1
270
6dc9d93f9686439079e45277848c1d67?s=48 chadwickw
0
200
60aa9265b26433bdedcbc90eff799e5e?s=48 jjchieferson
0
110
250494d00b2f0fdc10fb4a02f01fc7e5?s=48 tamadama
0
240
47cfcc31bd5f707c2ca52c2de26d3e4a?s=48 rkleban
0
110
2481158a72219f42b701cf0fcef12971?s=48 rvillarreal
0
240
0a3f975afb192c0aa86e2f2cef37e677?s=48 mariko_s14ninja
0
190
F0584c26e28e55aa1918bfa7b24eab77?s=48 kargs
0
130
128d92bf74fbf395ac55960f19f92176?s=48 anamisanga
0
150
Fbae8784cf5c2e32be00010be429fdbc?s=48 twashington16
0
590

Featured

See All Featured
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
204
35k
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
220
120k
4394ceb8b277f35ee3da7030384efb5d?s=48 davidbonilla
69
3.5k
Fe6b81005d1553accd6b2a28f6a2bef1?s=48 phodgson
87
3.9k
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
113
25k
7c8469ee8c9e594c65c59b919626c08d?s=48 scottboms
251
11k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
84
7.8k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
27
1.9k
1b8ad785acdd1ce1c99914b1c2a4e10e?s=48 sugarenia
233
830k
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
347
20k
39488f9d172ab92fd352f2cd7b73258d?s=48 mza
80
4.1k
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
207
10k

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