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

Other Decks in Design

See All in Design
エムスリー株式会社　デザイングループ紹介資料 / m3design-team-profile
m3designer
0
4.7k
デザインの専門性を活かしたナレッジマネジメント活動の実践と研究
chiemitaki
0
490
SaaSのマーケティングを進めるサービスサイトを育てる取り組み / Designship 2024 Main Stage
sms_tech
1
1.2k
シームレスな連携を実現するデザイントークンの設計と構築
amishiratori
0
360
Design System for training program
mct
0
280
Personal Story Sequence(WIP) - Younghoon Park
elrns88
0
260
Памятка-раздатка по Карте процесса-опыта, А4
ashapiro
1
410
DMMデザイン組織の生成AI導入プロセス - Adobe Fireflyと振り返る約1年とこれから -
takumasaito
1
370
Yahoo Newsletter Clicker Template
xuechunwu
0
290
Cardápio - Caraguá A Gosto 2024 - De 01/08 a 08/09/2024
caraguatatuba
0
5.9k
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
3.8k
Осязаемый потребительский опыт. Ловим его за хвост с Картой процесса-опыта
ashapiro
2
220

Featured

See All Featured
YesSQL, Process and Tooling at Scale
rocio
169
14k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
410
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
860
Making Projects Easy
brettharned
115
5.9k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Being A Developer After 40
akosma
86
590k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
840
Faster Mobile Websites
deanohume
305
30k
Into the Great Unknown - MozCon
thekraken
32
1.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