Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Emotion through CSS

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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.2k
CSS in the editor
Avatar for Tammie Lister tammielis
0
390
Global styles the story so far
Avatar for Tammie Lister tammielis
1
970
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.9k
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
910
Opportunity of Open Source
Avatar for Tammie Lister tammielis
0
760

Other Decks in Design

See All in Design
染み出し好きの、 染み出しコントロール論
Avatar for Takeru Mukai mukai_takeru
0
530
20260802東京都市大学オープンキャンパス授業
Avatar for Kimura Atsunobu a2k
0
120
もっともらしさ生成器と暮らす – AI懐疑派の試行錯誤
Avatar for sekig(ojiee) sekiguchiy
0
220
The ISO 25964 standard on Information and documentation — Thesauri and interoperability with other vocabularies
Avatar for AccessInnovations accessinnovations
0
480
MUUUUU.ORG 協賛バナーのご案内
Avatar for クオートワークス quoitworks999
0
720
組織で働く大人が「知らないままにやってみる」を取り戻す方法とその意味〜企業で働く実務家による実践知の言語化を事例とした考察〜
Avatar for ChiemiTaki chiemitaki
1
520
エンジニアでも捗る デザイナー的思考入門(bitA Edit 新ver)
Avatar for Tsubasa SEKIGUCHI tinykitten
1
670
【CEDEC2026】『Shadowverse: Worlds Beyond』続編開発におけるUIデザイン・アニメーション演出の「超進化」 ～継承と挑戦を両立するデザイン手法～
Avatar for Cygames, Inc. cygames
PRO
4
5.6k
Edmonton River Slidedeck
Avatar for Edmonton River edmontonriver
0
480
凡庸を落とすハーネス
Avatar for Hiromi Maeo hiromimaeo
2
1k
言語化しきれなくてもいい〜勉強会を「完璧な成果を出す場」から「不確実な刺激と体験を持ち帰る場へ〜
Avatar for hott3 hott3
0
220
AIが作るデザインの レビューコストと向き合って分かったこと. -正社員デザイナー1人の組織でデザインハーネスを立ち上げた話-
Avatar for 家高秀樹 hidekiietaka
1
390

Featured

See All Featured
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
1
560
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.4k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.4k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
12k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1033
470k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
464
34k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
699
190k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
7.1k
It's Worth the Effort
Avatar for 3n 3n
188
29k
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.9k
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
4
4.1k

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