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
920
CSS in the editor
tammielis
0
230
Global styles the story so far
tammielis
1
620
Dropped stitches and tangled yarn - a call to simplify WordPress
tammielis
1
1.1k
Being Brave
tammielis
2
1.4k
Lessons from growing design in the open
tammielis
0
930
Thinking in patterns
tammielis
0
43
Design matters in open source
tammielis
1
590
Opportunity of Open Source
tammielis
0
530
Other Decks in Design
See All in Design
管理画面の全体UXは利用時品質モデルで考える
readymadegogo
1
1.7k
Kim Possible - Crush
olgastoryboard
0
120
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
1
430
超・ファシリテーション 無理ゲー課題を軽やかに超える MIMIGURI流チームデザイン|TOKYO CREATIVE COLLECTION
madue
1
1.1k
デザインプリンシプルのつくりかた(freee技術の日)
magi1125
5
4.1k
Night Shift concept 9/15/2024
cpineda57
0
730
SpectrumTokyoMeetup12_自動貯金アプリ『finbee』での取り組みについて
shihorishimazu
2
370
最速で価値を届けるUXリサーチ
degudegu2510
5
1.2k
みんなでブラッシュアップするDesign Sprint_BASE BANKチームの場合
base
PRO
3
580
アジャイル開発におけるFigmaAI新機能の活用
abokadotyann
1
150
Памятка-раздатка по Карте процесса-опыта, А4
ashapiro
1
230
エムスリー株式会社 デザイングループ紹介資料 / m3design-team-profile
m3designer
0
3.1k
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Done Done
chrislema
181
16k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9k
Building Better People: How to give real-time feedback that sticks.
wjessup
362
19k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.5k
How GitHub (no longer) Works
holman
311
140k
Music & Morning Musume
bryan
46
6.1k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
Ruby is Unlike a Banana
tanoku
96
11k
Teambox: Starting and Learning
jrom
132
8.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