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
340
Global styles the story so far
Avatar for Tammie Lister tammielis
1
860
Dropped stitches and tangled yarn - a call to simplify WordPress
Avatar for Tammie Lister tammielis
1
1.4k
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
830
Opportunity of Open Source
Avatar for Tammie Lister tammielis
0
680

Other Decks in Design

See All in Design
decksh object reference
Avatar for Anthony Starks ajstarks
2
1.5k
モビリティプラットフォームの未来を築くクラウド基盤
Avatar for Hajime KOSHIRO kossykinto
0
210
kintone_aroma
Avatar for kintone kintone
0
1.4k
30分でわかるインサイトマネジメント（2025年12月バージョン）
Avatar for Centou centou
1
390
AIでデザインをつくる：基礎編
Avatar for 太田賢一 kenichiota0711
3
2.5k
プロダクトデザイナーに学ぶ、『見る気が起きる』ダッシュボードの作り方 / Creating Engaging Dashboards: Lessons from Product Designers
Avatar for yamamoto-yuta yamamotoyuta
2
520
コムデマネージャーがプロダクトデザインに挑戦した。むずかしくて楽しかった。
Avatar for payatsun payatsusan213
0
200
Storyboard Assignment: Storyboard from Comic Strip
Avatar for Mandalyn Teo lynteo
3
190
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
Avatar for Hiromi Morikawa hiromitsuuuuu
1
1.3k
【pmconf2025】PdMの頭の中を見える化する体験構造図
Avatar for Shigeyuki Kameda kamechi7222222
1
1.9k
Figmaレクチャー会Part1 基本のき編＠千株式会社 社内勉強会
Avatar for ぽん designer_no_pon
2
250
AIエージェントが対話的なUIを返す！MCP−UIで変わるユーザ体験
Avatar for daitasu daitasu
1
150

Featured

See All Featured
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
300
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.1k
KATA
Avatar for Megan Lloyd mclloyd
PRO
34
15k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.7k
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
120
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
0
56
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
180
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
9.6k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
97
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon szymonslowik
1
920

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