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
280
Global styles the story so far
tammielis
1
710
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
1.1k
Thinking in patterns
tammielis
0
43
Design matters in open source
tammielis
1
700
Opportunity of Open Source
tammielis
0
590
Other Decks in Design
See All in Design
LayerX DesignersDeck
layerx
PRO
1
7.2k
Crisp Code inc. ブランドガイドライン
so_kotani
1
150
“使いやすい”が生産性を変える!業務を効率化するためのUX/UI設計ポイント
ncdc
2
250
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 移動・不動産領域の取り組み
tmtgtkhs
0
240
pixel-art-skill-and-knowhow/ドット絵の経歴と知見
aokashi
0
240
Дизайн современной услуги с Картой процесса-опыта
ashapiro
0
160
Fem tips om ux-text • WSA-dagen 29 jan 2025
jonas_blind_hen
PRO
0
150
Dinosaur Mayhem
storyartist
PRO
0
170
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
360
線で考える画面構成
natsuume
1
830
Rayout Pattern 01
one0
0
1.9k
Building foundations 堅牢なデザイントークンの設計
hilokifigma
1
2.9k
Featured
See All Featured
Building Applications with DynamoDB
mza
94
6.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Agile that works and the tools we love
rasmusluckow
328
21k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
9
740
How to Think Like a Performance Engineer
csswizardry
23
1.5k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.8k
Documentation Writing (for coders)
carmenintech
69
4.7k
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