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

Emotion through CSS

D36d2c1821af9249b69ff7f5ed60529b?s=47 Tammie Lister
September 23, 2015
Design
4
670

Emotion through CSS

CSS Conf EU

D36d2c1821af9249b69ff7f5ed60529b?s=128

Tammie Lister

September 23, 2015
Tweet

More Decks by Tammie Lister

See All by Tammie Lister
Growing the WordPress design system
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
1
100
CSS in the editor
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
0
47
Global styles the story so far
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
1
250
Dropped stitches and tangled yarn - a call to simplify WordPress
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
1
190
Being Brave
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
1
310
Lessons from growing design in the open
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
0
170
Thinking in patterns
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
0
43
Design matters in open source
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
1
140
Opportunity of Open Source
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
0
140

Other Decks in Design

See All in Design
decksh object reference
7eca3e06edc3c69004aaf57de51900c2?s=48 ajstarks
0
280
The Frog Bandit
B789f3884732c5e0bd031a91f1930f3e?s=48 senamiyazaki
0
180
ユーザーに向き合うために 普段から意識していること
2852b6f0c4ec2c7a3a4a3603d4d5a662?s=48 koichikato
0
200
tsunasapo_branch-concept202007
05b48de035af15c85515c4900571c3a0?s=48 tsunasapo
0
190
yamanohanabuta logoguideline
4a9fb6423c8832a316433031d06523f1?s=48 misamochimasu
0
200
Big Surからの四角いアイコン / Rounded Rectangle Icons since Big Sur
2174bd20a68bf55c494a424ad3790f4a?s=48 1024jp
3
580
Nobel Finds a Staryu
A2b28582eb2007b9efe661942bb29a94?s=48 innsamity
0
420
DMM.comデザイン部_プロダクトデザイナービジョン
635b0000e69f3203c8b41df47293d451?s=48 takumasaito
0
270
認知科学のススメ
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
4
3.1k
「書けるようになる」ということ
B6a2f6699d8ebaad85000f9a8e3d8ccc?s=48 aguringo
6
14k
Rakuma Developers
8b62efd8d4dd7c134243b785993c5f63?s=48 nojirakuten
0
2.4k
Cosas que nadie te cuenta sobre métricas
B823e4f2145951e8623d9fb736222dc8?s=48 solmesz1
0
110

Featured

See All Featured
XXLCSS - How to scale CSS and keep your sanity
1b8ad785acdd1ce1c99914b1c2a4e10e?s=48 sugarenia
236
1.1M
How to Ace a Technical Interview
2f5463832ccb768ccb4a1ca3607c27ef?s=48 jacobian
266
21k
Web development in the modern age
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
197
9.3k
Six Lessons from altMBA
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
14
1.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Fd55de4174accaf3b4f030e43a8a70c6?s=48 marcduiker
6
570
Writing Fast Ruby
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
612
57k
ReactJS: Keep Simple. Everything can be a component!
Af6a12710770ad9a7cfd08c97efd40d3?s=48 pedronauck
655
120k
Statistics for Hackers
56c4053438af8e8b90d6f53cbb7573be?s=48 jakevdp
782
210k
BBQ
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
74
7.9k
Designing with Data
F57e2136eb9895eb95ff5dc8a1c02677?s=48 zakiwarfel
91
4k
Designing Experiences People Love
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
130
22k
Music & Morning Musume
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
35
4.3k

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