Patterns, Language, and the tale of the Million Dollar Button

Transcript

1. Patterns, Language, and the tale of the miLlioN dollar button CSS Dev Conf • October 2017
2. I used to read WordUp magazine It was all a dream
3. 
 @snailbites Vincent Nalupta
4. T Living Style-Guide Design Language System The Cookbook
5. Design Masters Design
 APIs .btn {…} Style Guide Production Apps Code Pen React NG Design
 APIs .btn {…}
6. Design Masters Design
 APIs .btn {…}
7. Language
8. • Sluggish delivery • Inconsistency • Communication CONCERNS
10. “Can we move this 5px down?”
11. There is a difference between a website and a picture of a website.
12. Get to the final medium as quickly as possible Then iterate.
15. $ $ …inset? % “Responsive Inset.” “Use section 3.” .u-section-3
17. • Translating is slow • Translating creates barriers • Translating narrows our focus
18. % section inset 3 ' Section! $ $ …inset? .u-section-3
20. My name is Hov Allow me to reintroduce myself
21. RESEARCH
22. The process of getting from an abstract concept to a spoken word. Lexical Retrieval
25. –Potter et. al, 1984, p. 14 “the surface difference between pictures and words virtually disappears.”
27. • Have a Science Fair • Iterate together • Shared language is powerful! language
28. I got you stuck off the realness.
29. $ Code
32. This System makes it easy to do great work
33. CSS is hard
34. Design System + Cascade
35. The million dollar button
36. • Organize into data objects • Write self-evident code • Maintain a low specificity Tips!
37. From the first to the last of it delivery is passionate
38. * Teams
39. Your customers sit rightnext to you.
40. OKRS
41. “How can designers and devs work better together?”
43. 
 @snailbites Vincent Nalupta