Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Emotion through CSS
Search
Tammie Lister
September 23, 2015
Design
4
1.2k
Emotion through CSS
CSS Conf EU
Tammie Lister
September 23, 2015
Tweet
Share
More Decks by Tammie Lister
See All by Tammie Lister
Growing the WordPress design system
tammielis
1
1k
CSS in the editor
tammielis
0
260
Global styles the story so far
tammielis
1
690
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
1k
Thinking in patterns
tammielis
0
43
Design matters in open source
tammielis
1
670
Opportunity of Open Source
tammielis
0
580
Other Decks in Design
See All in Design
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
570
クライアントワークにおける UXリサーチの実践
kozotaira
0
320
Дизайн услуги через её визуализацию с Картой процесса-опыта
ashapiro
0
240
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
250
マルチプロダクトにおけるデザイナーの挑戦-デザイン初め新年会2025
u_ri_ta
1
150
富山デザイン勉強会_デザイントレンド2025.pdf
keita_yoshikawa
0
160
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
270
横断組織デザイナーの働き方
mixi_design
PRO
0
330
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
900
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
390
Dive Deep into Communication
yomtsu
0
210
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
3
3.4k
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
182
22k
KATA
mclloyd
29
14k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Fireside Chat
paigeccino
34
3.2k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Git: the NoSQL Database
bkeepers
PRO
427
64k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
It's Worth the Effort
3n
184
28k
Docker and Python
trallard
44
3.3k
Being A Developer After 40
akosma
89
590k
Transcript
EMOTION THROUGH CSS
None
None
None
None
None
www.aldebaran.com/en/a-robots/who-is-pepper
www.parorobots.com
Carlos López Molina
None
None
None
None
Flickr: danielito311
Sympho on Wikipedia
h p://the12principles.tumblr.com/
ANTICIPATION
TIMING
EXAGGERATION
APPEAL
Kristina Alexanderson
Catena Alma Reklam Bilisim Sanayi Ve Ticaret A.S.
Monument Valley ustwo
UP Coffee Aliphcom, Inc.
Flappy Bird
Peter Klein codepen.io/pmk/pen/ByXOOq/
species-in-pieces.com/
www.toyota-insidedreams.com/dreamcar-collection/
BEYOND THE SHOWCASE
Slack
Codepen
Codepen
Natalya codepen.io/tallys/pen/MwxXbW
EMOTIONAL BUTTONS codepen.io/collection/DNqkZE
TEST CONDITIONS
HAPPY
None
None
None
codepen.io/karmatosed/pen/avvbpj
ANGRY
None
None
codepen.io/karmatosed/pen/vNNZYb
SAD
None
None
codepen.io/karmatosed/pen/EVVXdO
THE TESTS
HAPPY BUTTON : 5 rushed, excited or anxious too
ANGRY BUTTON : 5 annoyed
SAD BUTTON : 5 stoned and sleepy, reluctant, bored
Happy and angry… “Reminds me of my kid”
THAT’S CUTE BUT…
INVISIBLE ANIMATION
SOME MORE EXPERIMENTS
COUGHING BUTTONS
codepen.io/karmatosed/pen/meeNoM
ZEN INPUTS
codepen.io/karmatosed/pen/QjyLLJ
FEEDBACK
None
Tammie Lister @karmatosed THANKS Slides: speakerdeck.com/tammielis/emotion-through-css