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...
Search
Vince
October 11, 2017
1
540
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
93
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
The Invisible Side of Design
smashingmag
302
51k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
How GitHub (no longer) Works
holman
315
140k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
The Cult of Friendly URLs
andyhume
79
6.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
980
GraphQLとの向き合い方2022年版
quramy
49
14k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
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