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

Emotion through CSS

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Tammie Lister Tammie Lister
September 23, 2015
Design
1.3k
4

Emotion through CSS

CSS Conf EU

Avatar for Tammie Lister

Tammie Lister

September 23, 2015

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
360
Global styles the story so far
Avatar for Tammie Lister tammielis
1
880
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.8k
Lessons from growing design in the open
Avatar for Tammie Lister tammielis
0
1.2k
Thinking in patterns
Avatar for Tammie Lister tammielis
0
43
Design matters in open source
Avatar for Tammie Lister tammielis
1
850
Opportunity of Open Source
Avatar for Tammie Lister tammielis
0
700

Other Decks in Design

See All in Design
「デザイン」の自分ごと化から始める、デザインピープルのふるまい
Avatar for mewmo mewmo
0
210
社員の意識を高めたブランド浸透施策の裏側！
Avatar for MIXI DESIGN mixi_design
PRO
0
110
第18回サイゼミ
Avatar for LW lw
1
3.6k
新卒2年目デザイナーが、UX検定基礎にチャレンジした話
Avatar for ぽん designer_no_pon
1
1.4k
【優秀賞＋特別賞】くまモン食いしん坊弁当「くまモンの魔法の柑橘弁当」最終審査資料
Avatar for Shoko shoko_seven11
0
130
新規AIプロダクトで、事前に知るべきだった3つの壁 〜医療AIを1年間作って、従来の開発が通用しなかった話〜 / Three Walls in Building AI Products
Avatar for Takuya Shikichi shikichee
2
3.9k
デザインするために「多様性」について考える
Avatar for なつ iflection
0
250
爆速開発でAIプロダクトが40万インプレッションになった話
Avatar for つぶら tsubura
0
220
Diverse Design Team Deck
Avatar for Diverse diverse
0
1.2k
Goodpatch Tour💙 / We are hiring!
Avatar for Goodpatch Inc. goodpatch
31
1.1M
AI時代、デザイナーの価値はどこに？
Avatar for Ryotaro Takahashi tararira
1
970
保育現場にAIを 〜人と技術に橋を架けるデザインで考えてきたこと〜 uiuxcamp2026-hoiku-ai-design
Avatar for Takahiro Yamaguchi hiro93n
1
150

Featured

See All Featured
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.5k
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
230
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
190
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.8k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.6k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
67k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.8k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.1k
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
270
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
24k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k

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