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
1k
CSS in the editor
tammielis
0
250
Global styles the story so far
tammielis
1
660
Dropped stitches and tangled yarn - a call to simplify WordPress
tammielis
1
1.2k
Being Brave
tammielis
2
1.5k
Lessons from growing design in the open
tammielis
0
1k
Thinking in patterns
tammielis
0
43
Design matters in open source
tammielis
1
630
Opportunity of Open Source
tammielis
0
560

Other Decks in Design

See All in Design
Yahoo Newsletter Clicker Template
xuechunwu
0
300
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
290
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
480
デザインからアプリ実装まで一貫したデザインシステムを構築するベストプラクティス
shuzo
14
6.9k
PMとデザイナーはニコイチ! メリットと具体的なアクション10選
mosmos_noki
2
1.2k
Rayout Pattern 01
one0
0
380
ふわっとはじめるSSOT – SSOT for Communication Design
sekiguchiy
0
1.2k
How to go from research data to insights?
mastervicedesign
0
180
知を活かせるチームづくりとは？-MIMIGURIで実践している「全員探究」の仕組みと文化づくり-
chiemitaki
1
770
Tableau曲線表現講座(2024.11.21)
cielo1985
0
190
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
6
57k
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
600

Featured

See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Code Review Best Practice
trishagee
65
17k
Designing on Purpose - Digital PM Summit 2013
jponch
116
7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
95
17k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
1
110
Writing Fast Ruby
sferik
628
61k
Facilitating Awesome Meetings
lara
50
6.1k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.6k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
A better future with KSS
kneath
238
17k
The Invisible Side of Design
smashingmag
298
50k

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