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

Emotion through CSS

Avatar for Tammie Lister Tammie Lister
September 23, 2015
Design
4
1.3k

Emotion through CSS

CSS Conf EU

Avatar for Tammie Lister

Tammie Lister

September 23, 2015
Tweet

More Decks by Tammie Lister

See All by Tammie Lister
Growing the WordPress design system
Avatar for Tammie Lister tammielis
1
1.1k
CSS in the editor
Avatar for Tammie Lister tammielis
0
320
Global styles the story so far
Avatar for Tammie Lister tammielis
1
800
Dropped stitches and tangled yarn - a call to simplify WordPress
Avatar for Tammie Lister tammielis
1
1.3k
Being Brave
Avatar for Tammie Lister tammielis
2
1.7k
Lessons from growing design in the open
Avatar for Tammie Lister tammielis
0
1.1k
Thinking in patterns
Avatar for Tammie Lister tammielis
0
43
Design matters in open source
Avatar for Tammie Lister tammielis
1
780
Opportunity of Open Source
Avatar for Tammie Lister tammielis
0
640

Other Decks in Design

See All in Design
逆向きUIの世界 〜iOSアプリのRTL言語対応〜
Avatar for akatsuki174 akatsuki174
1
290
Memory Man v3 (WIP)
Avatar for Chad Welson storybychad
PRO
0
2.8k
DESIGNEAST 2025 A-3
Avatar for Shigeru Kobayashi _kotobuki_
0
100
見過ごさない誠実さ_アクティブバイスタンダーとIntegrityが支えるアジャイル文化 / integrity-and-active-bystander
Avatar for Aki spring_aki
1
160
1年目デザイナーが実践する、チーム貢献のための2つのアプローチ
Avatar for kinomi kinomidesign
0
120
portfolio.pdf
Avatar for Fumitaka Ono onof003
0
210
ChatGPT、Gemini、Claude は、なぜ似たようなUIを採用しているのか？
Avatar for ふわり fuwarisprit
3
1.6k
mount_company_profile
Avatar for mount inc. mount_inc
0
2.4k
7 Core Values of Round-L
Avatar for Round-L wired888
0
2.4k
Goodpatch Tour💙 / We are hiring!
Avatar for Goodpatch Inc. goodpatch
31
900k
kintone Style Book
Avatar for kintone kintone
4
4.5k
地理院地図をもっと楽しく！れきちず新機能のご紹介
Avatar for Hajime Kato hjmkth
1
190

Featured

See All Featured
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
62k
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
2
200
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
10
630
Code Reviewing Like a Champion
Avatar for maltzj maltzj
526
40k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
11k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
7
680
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
10k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
272
21k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
76
5.1k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k

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