CSS Conf EU
EMOTIONTHROUGH CSS
View Slide
www.aldebaran.com/en/a-robots/who-is-pepper
www.parorobots.com
Carlos López Molina
Flickr: danielito311
Sympho on Wikipedia
h p://the12principles.tumblr.com/
ANTICIPATION
TIMING
EXAGGERATION
APPEAL
Kristina Alexanderson
CatenaAlma Reklam Bilisim Sanayi Ve Ticaret A.S.
Monument Valleyustwo
UP CoffeeAliphcom, Inc.
Flappy Bird
Peter Kleincodepen.io/pmk/pen/ByXOOq/
species-in-pieces.com/
www.toyota-insidedreams.com/dreamcar-collection/
BEYOND THE SHOWCASE
Slack
Codepen
Natalyacodepen.io/tallys/pen/MwxXbW
EMOTIONAL BUTTONScodepen.io/collection/DNqkZE
TEST CONDITIONS
HAPPY
codepen.io/karmatosed/pen/avvbpj
ANGRY
codepen.io/karmatosed/pen/vNNZYb
SAD
codepen.io/karmatosed/pen/EVVXdO
THE TESTS
HAPPY BUTTON : 5rushed, excited or anxious too
ANGRY BUTTON : 5annoyed
SAD BUTTON : 5stoned 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
Tammie Lister @karmatosedTHANKSSlides: speakerdeck.com/tammielis/emotion-through-css