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.2k

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
310
Global styles the story so far
Avatar for Tammie Lister tammielis
1
780
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
770
Opportunity of Open Source
Avatar for Tammie Lister tammielis
0
630

Other Decks in Design

See All in Design
【MIXI MEETUP！ー TECH & DESIGN DAYー】【工数98%削減】Xでモンストを話題にせよ！生成AIの活用で日本トレンド6位を獲得した企画の設計&デザイン術
Avatar for MIXI DESIGN mixi_design
PRO
0
120
Goodpatch Tour💙 / We are hiring!
Avatar for Goodpatch Inc. goodpatch
31
890k
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
Avatar for Tomoya AZUMA t_east
1
1.3k
デザインの意思決定を加速するワークショップ設計 / Workshop design to accelerate design decision-making
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
490
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
1
650
Memory Man v3 (WIP)
Avatar for Chad Welson storybychad
PRO
0
2.6k
ChatGPT、Gemini、Claude は、なぜ似たようなUIを採用しているのか？
Avatar for ふわり fuwarisprit
3
1.4k
What makes a great Director?
Avatar for _Limex_ _limex_
0
270
Hatena Engineer Seminar #33 チームと開発するためのモック
Avatar for takuwolog takuwolog
1
440
そのUIコンポーネント、これから先も使えますか？―Headless UI,Open UI,グローバルデザインシステム
Avatar for sakito sakito
2
1.9k
“ブロック”で作る、WordPress制作フロー変革のすすめ
Avatar for Koots koots2021
4
2k
デザイナーのAI活用とチームへの浸透戦略
Avatar for Kaori Ueda ukaoli
0
130

Featured

See All Featured
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
54
3k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
51k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
9
850
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.8k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
274
40k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
71
11k

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