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
How to train your dragon (web standard)
notwaldorf
96
6.2k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Unsuck your backbone
ammeep
671
58k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Documentation Writing (for coders)
carmenintech
74
5k
Embracing the Ebb and Flow
colly
87
4.8k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
112
20k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
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