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
920
CSS in the editor
tammielis
0
230
Global styles the story so far
tammielis
1
620
Dropped stitches and tangled yarn - a call to simplify WordPress
tammielis
1
1.1k
Being Brave
tammielis
2
1.4k
Lessons from growing design in the open
tammielis
0
930
Thinking in patterns
tammielis
0
43
Design matters in open source
tammielis
1
590
Opportunity of Open Source
tammielis
0
530

Other Decks in Design

See All in Design
管理画面の全体UXは利用時品質モデルで考える
readymadegogo
1
1.7k
Kim Possible - Crush
olgastoryboard
0
120
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
1
430
超・ファシリテーション 無理ゲー課題を軽やかに超える MIMIGURI流チームデザイン｜TOKYO CREATIVE COLLECTION
madue
1
1.1k
デザインプリンシプルのつくりかた（freee技術の日）
magi1125
5
4.1k
Night Shift concept 9/15/2024
cpineda57
0
730
SpectrumTokyoMeetup12_自動貯金アプリ『finbee』での取り組みについて
shihorishimazu
2
370
最速で価値を届けるUXリサーチ
degudegu2510
5
1.2k
みんなでブラッシュアップするDesign Sprint_BASE BANKチームの場合
base
PRO
3
580
アジャイル開発におけるFigmaAI新機能の活用
abokadotyann
1
150
Памятка-раздатка по Карте процесса-опыта, А4
ashapiro
1
230
エムスリー株式会社　デザイングループ紹介資料 / m3design-team-profile
m3designer
0
3.1k

Featured

See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Done Done
chrislema
181
16k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9k
Building Better People: How to give real-time feedback that sticks.
wjessup
362
19k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.5k
How GitHub (no longer) Works
holman
311
140k
Music & Morning Musume
bryan
46
6.1k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
Ruby is Unlike a Banana
tanoku
96
11k
Teambox: Starting and Learning
jrom
132
8.7k

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