Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Lightning Design System

67bb0a8cd6c1993dba0bfe302852f729?s=47 jina
October 15, 2015

Lightning Design System

IxDA SF 10/15

67bb0a8cd6c1993dba0bfe302852f729?s=128

jina

October 15, 2015
Tweet

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
  85. None
  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