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
1.1k
CSS in the editor
tammielis
0
280
Global styles the story so far
tammielis
1
710
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
1.1k
Thinking in patterns
tammielis
0
43
Design matters in open source
tammielis
1
710
Opportunity of Open Source
tammielis
0
600

Other Decks in Design

See All in Design
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
shingo2000
1
1.3k
「Figmaプラグイン開発してみた」＠スタメンデザイナーオープン勉強会
kiyoshifuwa
0
160
界隈からの逃走–デザイン初め新年会2025
sekiguchiy
3
1.1k
Cards | Storyboards
giofortuna_story
0
170
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
1
9.1k
OLTA株式会社/デザイン紹介資料
taxy
0
250
無自覚なランクとその影響を紐解くワークショップ / Unpacking Unconscious Privilege Workshop
spring_aki
4
200
Illustrator2025がやってきた！私が好きな新機能
hamko1114
0
140
藤本佳子・ポートフォリオ・2025/01
yoshi_designer
1
4.9k
今日から意識できるアクセシビリティ
fumiko
0
210
線で考える画面構成
natsuume
1
840
Дизайн услуги через её визуализацию с Картой процесса-опыта
ashapiro
0
310

Featured

See All Featured
Making Projects Easy
brettharned
116
6.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.3k
BBQ
matthewcrist
88
9.6k
The World Runs on Bad Software
bkeepers
PRO
68
11k
Building an army of robots
kneath
305
45k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.2k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.2k
Documentation Writing (for coders)
carmenintech
69
4.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
How STYLIGHT went responsive
nonsquared
100
5.5k

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