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

Emotion through CSS

Tammie Lister
September 23, 2015
Design
4
1k

Emotion through CSS

CSS Conf EU

Tammie Lister

September 23, 2015
Tweet

More Decks by Tammie Lister

See All by Tammie Lister
Growing the WordPress design system
tammielis
1
680
CSS in the editor
tammielis
0
160
Global styles the story so far
tammielis
1
490
Dropped stitches and tangled yarn - a call to simplify WordPress
tammielis
1
790
Being Brave
tammielis
2
1.3k
Lessons from growing design in the open
tammielis
0
700
Thinking in patterns
tammielis
0
43
Design matters in open source
tammielis
1
450
Opportunity of Open Source
tammielis
0
440

Other Decks in Design

See All in Design
メドレーという会社と デザインチームのひみつ/About Medley design team
medley
0
360
20240120_画像生成AI_NovelAI入門・情報収集
doradora09
0
110
SUKEDACHI DESIGN NIGHT発表スライド
sugiyama_sukedachi
0
220
Installing and Running decksh/pdfdeck
ajstarks
1
480
デザイン組織の一人目マネージャーが啜る泥水と美味しいビールに向けてTRYすること
ryoya_frst
0
180
新しい資産運用サービスALTERNA（オルタナ）の伝え方の工夫
layerx
PRO
0
910
Data+Diversity: Celebrating W.E.B Du Bois through Data Visualization
ajstarks
0
300
20231122_Design Leader Impact Award_Presentation_FAKE Okazaki
okazakityo
1
240
Backlogのイロハ・ やさしい使い方（基本編）
wattlaa
0
320
Crafting Blog covers: 
AI tools vs Human Illustrators. Who is the winner?
strongeron
0
130
顧客体験を作るデザイナーが 意思決定速度を上げるために使うAI
cremacrema
2
350
231129_FOSS4G-ASIA-2023_kato
hjmkth
0
300

Featured

See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
29
6k
GitHub's CSS Performance
jonrohan
1023
450k
Git: the NoSQL Database
bkeepers
PRO
421
63k
[RailsConf 2023] Rails as a piece of cake
palkan
22
3.9k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
Fashionably flexible responsive web design (full day workshop)
malarkey
397
65k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
How To Stay Up To Date on Web Technology
chriscoyier
781
250k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
153
14k
It's Worth the Effort
3n
180
27k
Mobile First: as difficult as doing things right
swwweet
216
8.6k

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