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
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
720
CSS in the editor
tammielis
0
180
Global styles the story so far
tammielis
1
520
Dropped stitches and tangled yarn - a call to simplify WordPress
tammielis
1
830
Being Brave
tammielis
2
1.3k
Lessons from growing design in the open
tammielis
0
730
Thinking in patterns
tammielis
0
43
Design matters in open source
tammielis
1
480
Opportunity of Open Source
tammielis
0
450
Other Decks in Design
See All in Design
良いアプリケーションをデザインするための感覚の持ち方 / Cultivating a Sense for Designing Great Applications
usagimaru
23
8.2k
共創のための地域基盤としての非公式組織の形成 / Informal community as an infrastructure for co-creation
fumiyaakasaka
2
240
Product-Writing
aguringo
6
2.8k
プロダクトデザイン部 組織紹介(デザイナー向け)
chatwork_hr
1
300
20240120_画像生成AI_NovelAI入門・情報収集
doradora09
PRO
0
130
Desarrollo de Carrera en Diseño y Producto
solmesz1
2
190
間違った「問い」を乗り越え ノベルティをプチバズりさせた話
takaikanako
0
1.3k
The Fight
euralisw
0
120
デザイナーの帽子をかぶったわたしが、プロダクト開発するうえでスクラムチームに提供したいこと / what I want to provide to Scrum teams when developing products
hiromitsuuuuu
14
5.1k
ダークテーマとアクセシビリティ の融合したカラートークンの設計
degudegu2510
0
300
デザイナー採用 3社目で学び中のこと / Learnings of Designer Recruitment | Yasuhiro Yokota
yasuhiroyokota
1
770
スマートバンクのプロダクトデザイン
putchomsmartbank
2
710
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
22
1.4k
A Modern Web Designer's Workflow
chriscoyier
689
190k
The Mythical Team-Month
searls
217
42k
A better future with KSS
kneath
231
16k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
84
45k
Code Review Best Practice
trishagee
56
15k
Mobile First: as difficult as doing things right
swwweet
217
8.6k
For a Future-Friendly Web
brad_frost
172
9k
The Invisible Customer
myddelton
114
12k
Web development in the modern age
philhawksworth
203
10k
GraphQLの誤解/rethinking-graphql
sonatard
56
9.3k
Producing Creativity
orderedlist
PRO
338
39k
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