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
490
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
82
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.9k
Six Lessons from altMBA
skipperchong
27
3.5k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
For a Future-Friendly Web
brad_frost
175
9.4k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
170
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Testing 201, or: Great Expectations
jmmastey
41
7.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