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
1.1k
CSS in the editor
tammielis
0
300
Global styles the story so far
tammielis
1
760
Dropped stitches and tangled yarn - a call to simplify WordPress
tammielis
1
1.3k
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
750
Opportunity of Open Source
tammielis
0
610
Other Decks in Design
See All in Design
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
360
AI時代に淘汰されないデザインのしごと
akinen
1
150
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
1.4k
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
6
1.7k
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
160
株式会社Muture_ソーシャル推進事業
muture
PRO
0
110
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
nikkei_engineer_recruiting
5
710
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
190
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
0
640
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
8.4k
アクセシビリティに取り組むメリット
magi1125
1
220
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
560
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
BBQ
matthewcrist
89
9.7k
KATA
mclloyd
30
14k
The Pragmatic Product Professional
lauravandoore
35
6.8k
RailsConf 2023
tenderlove
30
1.2k
Designing for Performance
lara
610
69k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Faster Mobile Websites
deanohume
308
31k
How GitHub (no longer) Works
holman
314
140k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
710
Gamification - CAS2011
davidbonilla
81
5.4k
Rails Girls Zürich Keynote
gr2m
95
14k
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