Designing a Design System

Keynote presentation for CSS Dev Conf. Featured presentation at Adobe MAX.
Also given at Future of Web Design San Francisco and UX Awards NYC, Web Design Day, You Gotta Love Front End, Front End Conf Zürich, Pixel Up!, UX New Zealand, & Mixin

Transcript

1. ADOBE MAX // SAN DIEGO // 2 NOVEMBER 2016 DESIGNING A DESIGN SYSTEM @JINA // LEAD DESIGNER // SALESFORCE LIGHTNING DESIGN SYSTEM # D ESIG N SYSTEM
2. @JINA LEAD DESIGNER // SALESFORCE LIGHTNING DESIGN SYSTEM ORGANIZER // CLARITY DESIGNER // SASS
4. FORWARD-LOOKING STATEMENTS Safe harbor statement under the Private Securities Litigation Reform Act of 1995: This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the forward-looking statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any projections of product or service availability, subscriber growth, earnings, revenues, 
 or other financial items and any statements regarding strategies or plans of management for future operations, statements of belief, any statements concerning new, planned, 
 or upgraded services or technology developments and customer contracts or use of 
 our services. The risks and uncertainties referred to above include – but are not limited to – 
 risks associated with developing and delivering new functionality for our service, 
 new products and services, our new business model, our past operating losses, 
 possible fluctuations in our operating results and rate of growth, interruptions or delays in our Web hosting, breach of our security measures, the outcome of any litigation, 
 risks associated with completed and any possible mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our ability to expand, retain, and motivate our employees and manage our growth, new releases of our service and successful customer deployment, our limited history reselling non-salesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial results of salesforce.com, inc. is included in our annual report on Form 10-K for the most recent fiscal year and in our quarterly report on Form 10-Q for the most recent fiscal quarter. These documents and others containing important disclosures are available on the SEC Filings section of the Investor Information section of our Web site. Any unreleased services or features referenced in this or other presentations, 
 press releases or public statements are not currently available and may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently available. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements.
5. LIGHTNINGDESIGNSYSTEM.COM
6. “IT USED TO BE THAT 
 DESIGNERS MADE AN OBJECT 
 AND WALKED AWAY. TODAY THE EMPHASIS MUST 
 SHIFT TO DESIGNING THE 
 ENTIRE LIFE CYCLE.” — PAUL SAFFO // TECHNOLOGY FORECASTER
7. DESIGN SYSTEMS RULE EVERYTHING AROUND ME
9. PDFS ARE A PAIN TO MAINTAIN
11. 
12. WORDPRESS WAS ONLY
 SLIGHTLY EASIER
14. ALISTAPART.COM/ARTICLE/WRITINGAINTERFACESTYLEGUIDE
16. LIVING STYLE GUIDES FTW!
18. BLOG.ENGINEYARD.COM/2011/FRONT-END-MAINTAINABILITY-WITH-SASS-AND-STYLE-GUIDES
20. REDLINES?
22. PSD ⟶ DROPBOX ⟶ WIKI
23. PSD ⟶ DROPBOX ⟶ WIKI 䡿
25. DOING THIS FOR NATIVE FELT LIKE A STEP BACK
27. SASS-LANG.COM
28. SASS-LANG.COM/STYLEGUIDE
29. COULD THE SASS & STYLE GUIDE SHARE A SINGLE SOURCE?
31. COLORS.YAML swatches: - name: "hopbush" value: "c69" - name: "bouquet" value: "b37399"
32. _COLORS.SCSS.ERB <% data.colors.swatches.each do |swatch| %> $<%= swatch.name %>: #<%= swatch.value %>; <% end %>
33. STYLE-GUIDE/COLORS.HTML.HAML - for swatch in data.colors.swatches %li{class: "swatch-" + swatch.name} %code = "$" + swatch.name = "#" + swatch.value
34. SASS-LANG.COM/STYLEGUIDE/COLOR
35. LIVING STYLE GUIDES FTW
36. STYLEGUIDES.IO
37. “A FRACTURED PROCESS 
 MAKES FOR A FRACTURED 
 USER EXPERIENCE.” — NATE FORTIN // VP DESIGN // EVERNOTE
38. DESIGN SYSTEMS FTW
39. WHAT IS A DESIGN SYSTEM?
40. BRAND GUIDELINES?
41. NASA.GOV/IMAGE-FEATURE/NASA-GRAPHICS-STANDARDS-MANUAL
42. STANDARDSMANUAL.COM/PRODUCTS/NASA-GRAPHICS-STANDARDS-MANUAL
43. NASA.GOV/SITES/DEFAULT/FILES/ATOMS/FILES/NASA_GRAPHICS_MANUAL_NHB_1430-2_JAN_1976.PDF
44. DROPBOX.COM/BRANDING
45. DESIGN LANGUAGE?
46. MATERIAL.GOOGLE.COM
47. BRAND.UBER.COM
48. VOICE & TONE?
49. VOICEANDTONE.COM
50. SLACKHQ.COM/WORDS-ARE-HARD-AABAFC490D04
51. PATTERN LIBRARY?
52. UI LIBRARY?
53. COMPONENT LIBRARY?
54. FRONT-END STYLE GUIDE?
55. WHATCHAMACALLIT?
56. STANDARDS.USA.GOV
57. IT CAN BE ANY OF THESE. OR ALL OF THESE. OR OTHER THINGS AS WELL.
58. A DESIGN SYSTEM CONTAINS WHATEVER YOUR ORGANIZATION NEEDS TO COMMUNICATE 
 DESIGN DECISIONS
59. “…STYLE GUIDES. NOW, IT’S DESIGN SYSTEMS. IS THIS JUST A CHANGE IN THE MARKETING? OR ARE THESE THINGS ACTUALLY DIFFERENT FROM ONE ANOTHER?” — JARED SPOOL // FOUNDER // USER INTERFACE ENGINEERING
60. “A STYLE GUIDE IS AN ARTIFACT
 OF DESIGN PROCESS. A DESIGN SYSTEM IS A LIVING, FUNDED PRODUCT WITH A ROADMAP & BACKLOG, 
 SERVING AN ECOSYSTEM.” — NATHAN CURTIS // FOUNDER // EIGHTSHAPES
62. FORMER SALESFORCE1 STYLE GUIDE
64. WHY DID SALESFORCE 
 NEED A DESIGN SYSTEM?
65. SCALING ENTERPRISE 
 DESIGN IS TRICKY!
66. 17
 YEARS OF LEGACY
67. 20K+
 EMPLOYEES
68. LOTS OF PRODUCTS Sales Cloud SalesforceIQ Salesforce Quote-to-Cash Data.com Financial Services Cloud Health Cloud Commerce Cloud Service Cloud Desk.com Analytics Cloud Wave Apps Community Cloud Chatter Marketing Cloud Pardot App Cloud AppExchange Force.com Heroku Enterprise IOT Cloud
69. CONSIDER THE 
 WHOLE ECOSYSTEM
71. GREAT TEAM COMMUNICATION 
 IS CRITICAL
72. WHERE CAN I FIND THE ICONS? WHAT COLOR IS THE BUTTON BORDER? WHERE CAN I FIND THE ICONS?
76. #FML
77. 106 UNIQUE TEXT COLORS
78. 120 UNIQUE BACKGROUND COLORS
79. 73 UNIQUE FONT SIZES
80. DESIGN PAGES
81. DESIGN SYSTEMS
82. L I G H T N I N G E X P E R I E N C E
83. “TRUE COLLABORATION ISN’T THROWING DESIGNS OVER THE WALL. IT’S DESIGNERS, ENGINEERS, 
 & THE REST OF THE TEAM 
 SHARING THE RESPONSIBILITY
 TO BUILD A QUALITY PRODUCT.” — DIANA MOUNTER // DESIGN SYSTEMS LEAD // GITHUB
84. MEDIUM.COM/EIGHTSHAPES-LLC/TEAM-MODELS-FOR-SCALING-A-DESIGN-SYSTEM-2CF9D03BE6A0
85. a solitary model sees a one team make 
 a system available, but with efforts focused 
 primarily on that team’s needs TEAM MODEL #1 SOLITARY VIA TEAM MODELS FOR SCALING A DESIGN SYSTEM BY NATHAN CURTIS
86. a single, central design team produces 
 and supports a system used by others 
 as a part of their job TEAM MODEL #2 CENTRALIZED VIA TEAM MODELS FOR SCALING A DESIGN SYSTEM BY NATHAN CURTIS
87. designers from multiple product teams 
 decide on the system together TEAM MODEL #3 FEDERATED VIA TEAM MODELS FOR SCALING A DESIGN SYSTEM BY NATHAN CURTIS
88. MEDIUM.COM/SALESFORCE-UX/THE-SALESFORCE-TEAM-MODEL-FOR-SCALING-A-DESIGN-SYSTEM-D89C2A2D404B
89. design system informs product design product design informs design system OUR MODEL CYCLICAL SALESFORCE TEAM MODEL FOR 
 SCALING A DESIGN SYSTEM
90. DO YOUR RESEARCH
91. BLOGS.ADOBE.COM/CREATIVECLOUD/BUILDING-EMPOWERING-STYLE-GUIDES-WITH-PRACTICAL-RESEARCH
92. HAVE A CLEAR VISION
 TO ALIGN EFFORTS
93. “THE MORE DECISIONS YOU PUT OFF, & THE LONGER YOU DELAY THEM, THE MORE EXPENSIVE THEY BECOME.” — CRAIG VILLAMOR // VP PRODUCT EXPERIENCE // APPDYNAMICS
94. BRING EVERYONE TOGETHER AROUND A SINGLE GOAL
96. DRIVE DESIGN DECISIONS
 WITH DESIGN PRINCIPLES
97. CLARITY Eliminate ambiguity. Enable people to see, understand, and act with confidence.
98. EFFICIENCY Streamline and optimize workflows. Intelligently anticipate needs to help people work better, smarter, and faster.
99. CONSISTENCY Create familiarity and strengthen 
 intuition by applying the same solution 
 to the same problem.
100. BEAUTY Demonstrate respect for people’s time 
 and attention through thoughtful and elegant craftsmanship.
101. LISTS IN PRIORITY ORDER
102. > CLARITY > EFFICIENCY > CONSISTENCY > BEAUTY
103. PRINCIPLES > STANDARDS
104. EVANGELIZE & ALIGN
105. SALESFORCE.COM/BLOG/2013/04/HOW-TO-CREATE-ALIGNMENT-WITHIN-YOUR-COMPANY.HTML
106. V2MOM Vision Values Methods Obstacles Measures What you want to do What’s most important about that vision How you get the job done What challenges, problems, and issues might stand in the way How you know when you’ve succeeded
107. UI INVENTORY
108. ALISTAPART.COM/ARTICLE/FROM-PAGES-TO-PATTERNS-AN-EXERCISE-FOR-EVERYONE
110. SKETCH USER FLOWS
111. DOCS.GOOGLE.COM/PRESENTATION/D/1GQFMIDV_NQKI36FXAWD3WTJL5-JV-GHL7XVD2FVEL0M BY BRAD FROST
112. STANDARDIZE & CONSOLIDATE
113. SPECIAL SNOWFLAKES
114. DOCUMENT,
 DOCUMENT, DOCUMENT
115. “IF YOU DON’T DOCUMENT SOMETHING, IT DOESN’T EXIST.” — MIRIAM SUZANNE // FOUNDER // ODDBIRD
116. EMPOWER DESIGNERS 
 & DEVELOPERS
117. “…THE REAL PRODUCT/DELIVERABLE
 IS THE ABILITY TO USE YOUR COMPONENT LIBRARY. THIS MEANS DOCUMENTATION
 IS PARAMOUNT…” — UNA KRAVETS // UI ENGINEER // DIGITAL OCEAN
118. primaries neutrals secondaries COLOR
119. neutrals VISUAL MESSAGING
120. neutrals VISUAL HIERARCHY
121. standards-compliant markup keyboard navigation appropriate use of color accessible forms described images & icons ACCESSIBILITY
122. “WHEN ACCESSIBILITY ISN'T BAKED IN…
 [IT’S LIKE] MAKING MUFFINS 
 [& FORCING] BLUEBERRIES INTO 
 THE MUFFINS… …THEY’RE NOT REALLY THE SAME… 
 YES, YOU MAY HAVE AN ACCESSIBLE SYSTEM, BUT IT NOT A GOOD SYSTEM.” — CORDELIA MCGEE-TUBB // ACCESSIBILITY ENGINEER // DROPBOX
123. cultural significance & color no flags to represent languages text expansion separate labels from form fields capitalization LOCALIZATION
124. RED = DOWN
125. RED = UP
126. LOTS OF
 PLATFORMS & DEVICES
127. HOW DO WE SCALE DESIGN ACROSS OUR ECOSYSTEM AND ALL ITS PLATFORMS & DEVICES?
128. HOW DO WE MAKE FUTURE VISUAL DESIGN CHANGES FASTER?
129. HOW DO WE KEEP OUR DESIGN 
 SYSTEM AGNOSTIC?
130. SINGLE SOURCE OF TRUTH
131. CSS Preprocessors introduced Variables in CSS for better consistency, efficiency, & maintainability. SASS, LESS, STYLUS, ETC.
133. DESIGN TOKENS
134. “DESIGN TOKENS ARE DESIGN DECISIONS PROPAGATED THROUGH A SYSTEM.” — NATHAN CURTIS // FOUNDER // EIGHTSHAPES
135. “DESIGN TOKENS ARE AN ABSTRACTION FOR EVERYTHING IMPACTING THE VISUAL DESIGN OF AN APP/PLATFORM” — SÖNKE ROHDE, VP, UX ENGINEERING, SALESFORCE
136. NO MORE HARD-CODED VALUES
138. THEO Open source tool for generating 
 Design Tokens
139. DESIGN TOKENS CONVERTED TO Lightning Sass Less Stylus JSON (iOS) XML (Android) style guide color swatches
140. .ASE
 Adobe Photoshop
 Adobe Illustrator
 Adobe InDesign .CLR
 other design apps on Mac COLOR SWATCHES
144. APPLY DESIGN DECISIONS 
 WITH CONFIDENCE
145. NO PRODUCT TOO LARGE,
 NO PRODUCT TOO SMALL
147. “JUST BECAUSE SOMETHING IS 
 HARD DOESN’T MEAN IT’S NOT 
 WORTH PURSUING… IT’S OUR JOB TO SOLVE THOSE 
 PROBLEMS. AFTER ALL, WE’RE IN
 THE INTERFACE BUSINESS. — BRAD FROST // WEB DESIGNER // ATOMIC DESIGN AUTHOR
148. KEEP THE MOMENTUM GOING
149. A DESIGN SYSTEM IS 
 NOT A SIDE PROJECT
150. ZOMBIE
 STYLE GUIDES
151. IT MUST BE LIVING
152. A DESIGN SYSTEM IS A PRODUCT GOOD PRODUCTS 
 REQUIRE GOOD SUPPORT
153. BROWN BAG LUNCHES ADVISORY BOARD WORK CHAT TOWN HALLS DOCUMENT. DOCUMENT. DOCUMENT.
154. SUPPORT YOUR 
 NON-CODING DESIGNERS
155. MATERIAL.GOOGLE.COM/RESOURCES/STICKER-SHEETS-ICONS.HTML
156. Endeavor Science Blue Azure Biscay Midnight Blue Deep Cove Kasmir Cadet Blue Koromiko Flush Mahogany Salem Emerald Geyser Stream Link Water White C O L O R P A L E T T E The quick brown fox jumps over the lazy dog. Base The quick brown fox jumps over the lazy dog. Body Small The quick brown fox jumps over the lazy dog. Heading Large The quick brown fox jumps over the lazy dog. Heading Medium The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. Heading Small THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG. Heading Label Heading Label Normal Aa LIGHT Aa REGULAR Aa BOLD Salesforce Sans T Y P O G R A P H Y D E S I G N S Y S T E M U I K I T W I N T E R ’ 1 7 LIGHTNINGDESIGNSYSTEM.COM/DOWNLOADS
157. Mark Stage as Complete Unqualified Nurturing Closed Wizard NAVIGATION ACTIONS COMPACT LAYOUT REVIEW INVITE Sales Path Coach Discussion Feed Comment Share Placeholder Text Write a comment… Placeholder Text T A B S ITEM TWO ITEM THREE ITEM ONE Placeholder Text ITEM ONE ITEM TWO ITEM THREE Placeholder Text T I L E S Salesforce UX 26 Members T R E E S TREE GROUP HEADER Placeholder Text Placeholder Text Placeholder Text Placeholder Text S P I N N E R S small medium large brand small brand medium brand large LIGHTNINGDESIGNSYSTEM.COM/DOWNLOADS
160. COMING SOON BY @MBIANCHI27
161. “PATTERNS ARE NOT DOGMA. THEY CAN CHANGE & ADAPT.” — CLAUDINA SARAHE // DIRECTOR, FRONT END // CASPER
162. “MUSIC SETS EXPECTATIONS 
 AND MEETS THEM. COMEDY SETS EXPECTATIONS AND BREAKS THEM.” — ESPEN BRUNBORG // COFOUNDER // PRIMATE
163. DESIGN IS Fast Universal Intuitive Invisible User-centric Scientific Slow Individual Surprising Impressive Visionary Artistic THE SECRET LIFE OF COMEDY
 BY ESPEN BRUNBORG
164. “BE REGULAR AND ORDERLY IN YOUR LIFE, SO THAT YOU MAY 
 BE VIOLENT AND ORIGINAL IN YOUR WORK.” — GUSTAVE FLAUBERT // NOVELIST
165. LIGHTNINGDESIGNSYSTEM.COM
166. OPEN SOURCE AT GITHUB.COM/SALESFORCE-UX
167. DESIGNSYSTEMS.HEROKUAPP.COM
168. CLARITYCONF.COM
169. THANKS! @JINA