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
250
Global styles the story so far
tammielis
1
660
Dropped stitches and tangled yarn - a call to simplify WordPress
tammielis
1
1.2k
Being Brave
tammielis
2
1.5k
Lessons from growing design in the open
tammielis
0
1k
Thinking in patterns
tammielis
0
43
Design matters in open source
tammielis
1
630
Opportunity of Open Source
tammielis
0
560
Other Decks in Design
See All in Design
Yahoo Newsletter Clicker Template
xuechunwu
0
300
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
290
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
480
デザインからアプリ実装まで一貫したデザインシステムを構築するベストプラクティス
shuzo
14
6.9k
PMとデザイナーはニコイチ! メリットと具体的なアクション10選
mosmos_noki
2
1.2k
Rayout Pattern 01
one0
0
380
ふわっとはじめるSSOT – SSOT for Communication Design
sekiguchiy
0
1.2k
How to go from research data to insights?
mastervicedesign
0
180
知を活かせるチームづくりとは?-MIMIGURIで実践している「全員探究」の仕組みと文化づくり-
chiemitaki
1
770
Tableau曲線表現講座(2024.11.21)
cielo1985
0
190
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
6
57k
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
600
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Code Review Best Practice
trishagee
65
17k
Designing on Purpose - Digital PM Summit 2013
jponch
116
7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
95
17k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
1
110
Writing Fast Ruby
sferik
628
61k
Facilitating Awesome Meetings
lara
50
6.1k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.6k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
A better future with KSS
kneath
238
17k
The Invisible Side of Design
smashingmag
298
50k
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