Lightning Design System

IxDA SF 10/15

Transcript

1. #designsystem IXDA SF 10.14.2015 Lightning
 Design System @JINA SENIOR DESIGNER, DESIGN SYSTEMS
2. Safe Harbor 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. #designsystem
3. user experience #designsystem
4. #designsystem @jina SENIOR DESIGNER, DESIGN SYSTEMS SALESFORCE
5. #designsystem “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
6. #designsystem Product design in an enterprise organization can be tricky!
7. #designsystem Salesforce1
8. #designsystem Design for Scale
9. #designsystem Support Multiple 
 Platforms & Devices
10. #designsystem Design for Configuration
11. #designsystem Dozens of Scrum Teams Hundreds of Developers Small Team of Designers
12. #designsystem Where can I find the icons? What color is the button border? Where can I find the icons?
13. #designsystem Redlines?
14. #designsystem
15. #designsystem Design Pages
16. #designsystem #FML
17. #designsystem Design Pages
18. #designsystem “A fractured process makes for a fractured user experience” — NATE FORTIN
19. #designsystem Design Systems
20. #designsystem Style Guides are all
 the rage …and they have come a long way
21. alistapart.com/article/writingainterfacestyleguide
22. #designsystem Brand & Design Standards Front-End Standards Keep your Style Guide Current & Useful
23. #designsystem Zombie Style Guides …are style guides that aren't maintained and part of your process.
 They die and rot. They eat your brains.
24. #designsystem It must be living
25. Ye Olde Salesforce1 Style Guide
26. #designsystem Last year at Dreamforce, we talked to developers about our Style Guide
27. #designsystem How do I get my app
 to look like this?
28. #designsystem Can I use the CSS
 in my app?
29. #designsystem Our partners & customers want their apps to look 
 like Salesforce
30. #designsystem They want our design language & best practices
31. #designsystem A 3rd-party Salesforce-ish Bootstrap-theme got distributed & used
32. #designsystem It was not maintained by us, so quickly grew out of sync with our UI updates
33. #designsystem Many partner apps look & work great, but don’t feel like Salesforce
34. #designsystem They needed better resources & tools
35. #designsystem They need to keep up with our design iterations
36. #designsystem Lightning Experience
37. #designsystem Have a clear vision to
 align efforts
38. #designsystem Our design principles are intentionally ordered by priority
39. #designsystem clarity Eliminate ambiguity. Enable people to see, understand, and act with confidence.
40. #designsystem efficiency Streamline and optimize workflows. Intelligently anticipate needs to help people work better, smarter, and faster.
41. #designsystem consistency Create familiarity and strengthen intuition by applying the same solution to the 
 same problem.
42. #designsystem beauty Demonstrate respect for people’s time 
 and attention through thoughtful and elegant craftsmanship.
43. #designsystem clarity > efficiency > consistency > beauty
44. #designsystem Do research &
 talk to your customers
45. #designsystem Keep testing as you go
46. #designsystem Accessibility is really freaking important
47. #designsystem A solution that works for us… & now for our customers, too
48. #designsystem Clarity
49. #designsystem Lightning Design System The next generation of living style guides
50. salesforce.com/designsystem
51. #designsystem Lightning Design System Guidelines and design patterns Consistent with the Salesforce UI Includes HTML, CSS, icons, and fonts Framework-agnostic Open Source
52. #designsystem Design Patterns
53. #designsystem Use plain language
54. #designsystem Keep your information architecture simple
55. #designsystem Don’t try to document & build everything at once
56. #designsystem Document & build
 going forward
57. #designsystem Efficiency
58. #designsystem “…Creating a positive experience is not about having best practices. It’s about putting those practices into the right hands.” — BRENDON CORNWELL
59. #designsystem Empower Developers Provide developers scalable & accessible code at beginning of 
 development cycle
60. #designsystem Empower Designers Design & iterate more efficiently in the browser
61. #designsystem Design System Components CSS Framework + UI Library
62. #designsystem Building an enterprise framework is tricky!
63. #designsystem Clarity > Brevity
64. #designsystem Namespaced classes with scoping option
65. #designsystem BEM
 (Block, Element, Modifier)
66. #designsystem .slds-button__icon--x-small
67. #designsystem .slds-button__icon--x-small NAMESPACE
68. #designsystem .slds-button__icon--x-small NAMESPACE BLOCK
69. #designsystem .slds-button__icon--x-small NAMESPACE BLOCK ELEMENT
70. #designsystem .slds-button__icon--x-small NAMESPACE BLOCK ELEMENT MODIFIER
71. #designsystem .slds-button__icon--x-small NAMESPACE BLOCK ELEMENT MODIFIER
72. #designsystem Objects/Components LIGHTWEIGHT MODULAR REUSABLE Dependencies DESIGN TOKENS Utilities NON-SEMANTIC SINGLE PURPOSE
73. #designsystem Living Style Guide + =
74. #designsystem Show the object with its states & variants
75. lightningdesignsystem.com/components/buttons
76. #designsystem Only show the code people need to see
77. #designsystem Don’t make it until you need it! (Be Lean)
78. #designsystem For our application, most typographic elements require spacing removed
79. #designsystem Since this is the most common case, we remove them by default
80. #designsystem Heading hierarchy levels vary depending on context & our customer’s needs
81. #designsystem Visual style & semantic hierarchy are not necessarily coupled
82. #designsystem Lists are used usually for their semantics, but rarely have bullets or margins
83. #designsystem We reset these styles &
 opt in with Utilities
84. #designsystem We use a scoped utility class to opt-back in on a parent-level
86. #designsystem Clearer communication
87. #designsystem Designing in the browser
88. #designsystem Living specifications
89. #designsystem Better prototypes
90. #designsystem No more proliferation of inconsistent styles
91. #designsystem Consistency
92. #designsystem How do we keep colors, spacing, sizing, etc. consistent?
93. #designsystem How do we make future visual design
 changes faster?
94. #designsystem How do we keep 
 our design
 system agnostic?
95. #designsystem Single Source of Truth
96. #designsystem Assets are stored in repository and automatically updated in the app and style guide
97. #designsystem Design Tokens The basic atoms of the Design System
98. #designsystem Design Tokens help us scale design across both web & native applications.
99. #designsystem Some Types of Design Tokens Font Weights, Sizes, Families, & Line-Heights Colors for Background, Text, & Borders Shadows Spacing & Sizing Animation Durations Z-indexes Breakpoints
100. #designsystem Designers refer to
 Design Tokens in
 their specifications
101. #designsystem
102. #designsystem theo Open source tool by Salesforce UX to generate Design Tokens
103. #designsystem Theo JSON file converts to: Lightning Sass Less Stylus JSON (iOS) XML (Android) Style Guide Color Swatches (Photoshop & Sketch)
104. #designsystem THEO { "name": "COLOR_TEXT", "value": "#000", "category": "text-color", "comment": "Body text" } LIGHTNING <!-- Body text color --> <aura:var name="colorText" value="#000" /> SASS // Body text $color-text: #000;
105. #designsystem CSS — hex iOS — RGBA Android — 8-digit hex
106. #designsystem CSS — rem/em/px iOS — pt Android — sp/dip
107. Design Tokens
108. Design Tokens: Background Colors
109. Design Tokens: Font Sizes
110. Design Tokens: Radiuses
111. #designsystem Color Swatches
112. #designsystem No more
 hard-coded values
113. #designsystem Beauty
114. #designsystem Salesforce Sans ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
115. #designsystem Base Unit of 4 for 
 spacing & sizing
116. #designsystem Modular, responsive
 type scale
117. #designsystem SVGs for crisp,
 scalable icons
118. #designsystem ENTER & EXIT EMPHASIS TRANSITIONAL PERSONALITY & BRANDING TIMING ELEVATION EFFECTS Motion Guidelines
119. #designsystem #A7B8D1 #CFD7E6 #EEF1F6 #4F6A92 #0070D2 #0C8EFF #00396B #005FB2 #EF7EAD #4BC076 #7F8DE1 #F88962 Color Palette
120. #designsystem Choose Your Design System Team Model
121. medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0
122. #designsystem Team Model #1: Solitary A solitary model sees a one team make a system available, but with efforts focused primarily on that team’s needs VIA TEAM MODELS FOR SCALING A DESIGN SYSTEM BY NATHAN CURTIS
123. #designsystem Team Model #2: Centralized A single, central design team produces and supports a system used by others as a part of their job VIA TEAM MODELS FOR SCALING A DESIGN SYSTEM BY NATHAN CURTIS
124. #designsystem Team Model #3: Federated Designers from multiple 
 product teams decide on the system together VIA TEAM MODELS FOR SCALING A DESIGN SYSTEM BY NATHAN CURTIS
125. medium.com/salesforce-ux/the-salesforce-team-model-for-scaling-a-design-system-d89c2a2d404b
126. #designsystem A Cyclical Team Model Design System informs Product Design Product Design informs Design System
127. #designsystem Our centralized Design Systems team acts as a librarian, distributor, and facilitator, and we make sure it is maintained and crafted with quality.
128. #designsystem Our federated Design Systems contributors distributed throughout the organization keep the Design System accurate, current, and actually useful
129. #designsystem Bring designers, engineers, 
 & product managers together around a single goal
130. blog.capwatkins.com/the-sliding-scale-of-giving-a-fuck APOLOGIES FOR THE PROFANITY BUT IT’S A GREAT READ.
131. #designsystem Design Principles > Design Standards
132. #designsystem “Design considerations beat design patterns. Test and decide; don’t just copy things like the hamburger icon.” — JEFFREY ZELDMAN
133. #designsystem Resources
134. #designsystem salesforce.com/designsystem
135. #designsystem styleguides.io
136. #designsystem speakerdeck.com/jina/lightning-design-system
137. #designsystem @salesforceUX
138. #designsystem @jina
139. #designsystem “Be regular and orderly in your life so that you may be violent and original in your work.” — GUSTAVE FLAUBERT
140. #designsystem thank you! @jina