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.1k
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
820
CSS in the editor
tammielis
0
200
Global styles the story so far
tammielis
1
570
Dropped stitches and tangled yarn - a call to simplify WordPress
tammielis
1
950
Being Brave
tammielis
2
1.4k
Lessons from growing design in the open
tammielis
0
830
Thinking in patterns
tammielis
0
43
Design matters in open source
tammielis
1
530
Opportunity of Open Source
tammielis
0
490
Other Decks in Design
See All in Design
Cхематизация процессов и пользовательского опыта с Картой процесса-опыта
ashapiro
0
160
JBUG京都#1登壇資料_「考える」をマネジメントする_ビーワークス高濱
webnaut
0
380
User Experience Design für Entwickler
joergneumann
4
910
SUKEDACHI DESIGN NIGHT発表スライド
sugiyama_sukedachi
0
340
Baby Bear Genius
yvonnehsuanho
PRO
0
600
ダークテーマとアクセシビリティ の融合したカラートークンの設計
degudegu2510
0
370
私の困りごとと解決案 / My issues and proposed solutions
kubosho
1
190
コラボレーションを小さくはじめ、大きく広める - 相互理解のためのデザイン&開発交流会, Friends of Figma Tokyo by Yasuhiro Yokota
yasuhiroyokota
2
1.5k
メドレーという会社と デザインチームのひみつ/About Medley design team
medley
0
740
🇫🇷 Design Leadership en eaux troubles
morganepeng
2
340
UIをもたらすコンテクストの考察
securecat
9
2.8k
生成AIを活用したサービス設計のススメ〜仮説構築編〜
tomo1215
2
1.1k
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
357
18k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
Raft: Consensus for Rubyists
vanstee
134
6.5k
Building an army of robots
kneath
301
42k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
19k
5 minutes of I Can Smell Your CMS
philhawksworth
200
19k
How to Ace a Technical Interview
jacobian
274
23k
For a Future-Friendly Web
brad_frost
173
9.2k
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
Building Effective Engineering Teams - LeadDev
addyosmani
47
2.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
Git: the NoSQL Database
bkeepers
PRO
423
64k
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