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

Emotion through CSS

Tammie Lister
September 23, 2015
Design
4
1.2k

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
1k
CSS in the editor
tammielis
0
260
Global styles the story so far
tammielis
1
690
Dropped stitches and tangled yarn - a call to simplify WordPress
tammielis
1
1.2k
Being Brave
tammielis
2
1.6k
Lessons from growing design in the open
tammielis
0
1k
Thinking in patterns
tammielis
0
43
Design matters in open source
tammielis
1
670
Opportunity of Open Source
tammielis
0
580

Other Decks in Design

See All in Design
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
570
クライアントワークにおける UXリサーチの実践
kozotaira
0
320
Дизайн услуги через её визуализацию с Картой процесса-опыта
ashapiro
0
240
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP！】
vivion
0
250
マルチプロダクトにおけるデザイナーの挑戦-デザイン初め新年会2025
u_ri_ta
1
150
富山デザイン勉強会_デザイントレンド2025.pdf
keita_yoshikawa
0
160
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
270
横断組織デザイナーの働き方
mixi_design
PRO
0
330
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
900
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
390
Dive Deep into Communication
yomtsu
0
210
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ！
cremacrema
3
3.4k

Featured

See All Featured
4 Signs Your Business is Dying
shpigford
182
22k
KATA
mclloyd
29
14k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Fireside Chat
paigeccino
34
3.2k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Git: the NoSQL Database
bkeepers
PRO
427
64k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
It's Worth the Effort
3n
184
28k
Docker and Python
trallard
44
3.3k
Being A Developer After 40
akosma
89
590k

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