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
570

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
38
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
1
150
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
1
61
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
1
120
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
0
93
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
0
43
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
1
70
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
0
44
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
0
110

Other Decks in Design

See All in Design
25448e5eb61d4fd7b35ed73d722f9ad9?s=48 sawa_zen
1
520
E1e5be595b41fe3cf014cab6b2ef2a85?s=48 geoffreydorne
1
140
C017f3b100cbaa3127ac95d9544c70d9?s=48 maxsbow
0
190
Bd2cd58cea35f0c4d8965329b8a9d252?s=48 mtym27
5
4.3k
886e0044851b342f0ac84e88d1925f35?s=48 yukiosako
2
110
A59f1440588fd8d0447a8e96b8c9b8c5?s=48 hara_mei
0
490
76168a2da5c22ec0db3990392c8c9b91?s=48 isawiitch
1
200
6d1638800e2a9d65745b91bfeb929966?s=48 earthkarnravee
2
160
73f82a90bab5250087193c95ea45585d?s=48 designsystemsfrance
0
100
5390b35b57f0295fdf420ce58528d7a1?s=48 jonoda
1
490
070d33664df274636dad3da21c9b21fc?s=48 rockname
1
470
1db31cd7a801c73129dbce8163a49b08?s=48 sevendex
0
150

Featured

See All Featured
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
1352
200k
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
14
660
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
10
740
Bfd6b681ec6e8c9bef82ff0521c364f7?s=48 kastner
56
2k
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
364
63k
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
13
980
B6a8f005f39d23ffc930508ac9da68b9?s=48 vanstee
122
5.1k
9128d500301ae51524e887bb680f471d?s=48 caitiem20
314
18k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
208
20k
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
41
1.5k
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
128
22k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
72
3.9k

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