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
270
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
Les petites aventures de CSS, saison 2025
goetter
3
4k
利用者が離れないUX/UIデザイン 長く使われる業務アプリデザインのポイント
ncdc
5
450
HCDフォーラム2024 「HCDとHAI ~人間とAIが共存する世界の実現~」
kamechi7222222
0
290
太田博三(@usagisan2020)
otanet
0
230
20250129_DAST28_実空間にデジタル資源の接点をデザインする
majimasachi
0
230
富山デザイン勉強会_デザイントレンド2025.pdf
keita_yoshikawa
0
160
私たちは、世界とデザインの〝次の一歩〟を、どこへ向けるか。
tkhr_kws
2
290
Dive Deep into Communication
yomtsu
0
210
Hybrid NW Infra Design Review: Classic Pattern including Outposts & Route 53 Profile
ichichi
2
240
Дизайн услуги через её визуализацию с Картой процесса-опыта
ashapiro
0
240
政策広報実践講座_講演資料ダイジェスト2
capitolthink
0
130
なぜ今必要?Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
hilokifigma
0
620
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
67
4.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Automating Front-end Workflow
addyosmani
1368
200k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Building Your Own Lightsaber
phodgson
104
6.2k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
How GitHub (no longer) Works
holman
314
140k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
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