Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Patterns, Language, and the tale of the Million Dollar Button
Vince
October 11, 2017
1
230
Patterns, Language, and the tale of the Million Dollar Button
Vince
October 11, 2017
Tweet
Share
More Decks by Vince
See All by Vince
snailbites
0
46
Featured
See All Featured
sstephenson
144
12k
matthewcrist
73
7.5k
lara
590
61k
samanthasiow
56
6.3k
destraynor
223
47k
mongodb
23
3.8k
geeforr
332
29k
chrislema
173
14k
akmur
252
19k
jlugia
216
16k
jeffersonlam
328
15k
jponch
103
5k
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