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
Patterns, Language, and the tale of the Million Dollar Button
Search
Vince
October 11, 2017
1
460
Patterns, Language, and the tale of the Million Dollar Button
Vince
October 11, 2017
Tweet
Share
More Decks by Vince
See All by Vince
KonMariCSS
snailbites
0
77
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
178
21k
Rails Girls Zürich Keynote
gr2m
93
13k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
19k
Building Applications with DynamoDB
mza
89
5.8k
Music & Morning Musume
bryan
43
5.9k
Agile that works and the tools we love
rasmusluckow
325
20k
Design by the Numbers
sachag
277
18k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
245
1.2M
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
The Brand Is Dead. Long Live the Brand.
mthomps
52
36k
Building an army of robots
kneath
301
42k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Transcript
Patterns, Language, and the tale of the miLlioN dollar button
CSS Dev Conf • October 2017
I used to read WordUp magazine It was all a
dream
@snailbites Vincent Nalupta
T Living Style-Guide Design Language System The Cookbook
Design Masters Design APIs .btn {…} Style Guide Production Apps
Code Pen React NG Design APIs .btn {…}
Design Masters Design APIs .btn {…}
Language
• Sluggish delivery • Inconsistency • Communication CONCERNS
None
“Can we move this 5px down?”
There is a difference between a website and a picture
of a website.
Get to the final medium as quickly as possible Then
iterate.
None
None
$ $ …inset? % “Responsive Inset.” “Use section 3.” .u-section-3
None
• Translating is slow • Translating creates barriers • Translating
narrows our focus
% section inset 3 ' Section! $ $ …inset? .u-section-3
None
My name is Hov Allow me to reintroduce myself
RESEARCH
The process of getting from an abstract concept to a
spoken word. Lexical Retrieval
None
None
–Potter et. al, 1984, p. 14 “the surface difference between
pictures and words virtually disappears.”
None
• Have a Science Fair • Iterate together • Shared
language is powerful! language
I got you stuck off the realness.
$ Code
None
None
This System makes it easy to do great work
CSS is hard
Design System + Cascade
The million dollar button
• Organize into data objects • Write self-evident code •
Maintain a low specificity Tips!
From the first to the last of it delivery is
passionate
* Teams
Your customers sit rightnext to you.
OKRS
“How can designers and devs work better together?”
None
@snailbites Vincent Nalupta