$30 off During Our Annual Pro Sale. View Details »

Lightning Design System

jina
October 15, 2015

Lightning Design System

IxDA SF 10/15

jina

October 15, 2015
Tweet

More Decks by jina

Other Decks in Design

Transcript

  1. #designsystem
    IXDA SF
    10.14.2015
    Lightning

    Design System
    @JINA
    SENIOR DESIGNER, DESIGN SYSTEMS

    View Slide

  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

    View Slide

  3. user experience
    #designsystem

    View Slide

  4. #designsystem
    @jina
    SENIOR DESIGNER, DESIGN SYSTEMS
    SALESFORCE

    View Slide

  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

    View Slide

  6. #designsystem
    Product design in an
    enterprise organization
    can be tricky!

    View Slide

  7. #designsystem
    Salesforce1

    View Slide

  8. #designsystem
    Design for Scale

    View Slide

  9. #designsystem
    Support Multiple 

    Platforms & Devices

    View Slide

  10. #designsystem
    Design for Configuration

    View Slide

  11. #designsystem
    Dozens of Scrum Teams
    Hundreds of Developers
    Small Team of Designers

    View Slide

  12. #designsystem
    Where can I find the icons?
    What color is the button border?
    Where can I find the icons?

    View Slide

  13. #designsystem
    Redlines?

    View Slide

  14. #designsystem

    View Slide

  15. #designsystem
    Design Pages

    View Slide

  16. #designsystem
    #FML

    View Slide

  17. #designsystem
    Design Pages

    View Slide

  18. #designsystem
    “A fractured process
    makes for a fractured
    user experience”
    — NATE FORTIN

    View Slide

  19. #designsystem
    Design Systems

    View Slide

  20. #designsystem
    Style Guides are all

    the rage
    …and they have come a long way

    View Slide

  21. alistapart.com/article/writingainterfacestyleguide

    View Slide

  22. #designsystem
    Brand & Design Standards
    Front-End Standards
    Keep your Style Guide Current & Useful

    View Slide

  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.

    View Slide

  24. #designsystem
    It must be living

    View Slide

  25. Ye Olde Salesforce1 Style Guide

    View Slide

  26. #designsystem
    Last year at Dreamforce,
    we talked to developers
    about our Style Guide

    View Slide

  27. #designsystem
    How do I get my app

    to look like this?

    View Slide

  28. #designsystem
    Can I use the CSS

    in my app?

    View Slide

  29. #designsystem
    Our partners & customers
    want their apps to look 

    like Salesforce

    View Slide

  30. #designsystem
    They want our design
    language & best practices

    View Slide

  31. #designsystem
    A 3rd-party Salesforce-ish
    Bootstrap-theme got
    distributed & used

    View Slide

  32. #designsystem
    It was not maintained by
    us, so quickly grew out of
    sync with our UI updates

    View Slide

  33. #designsystem
    Many partner apps look &
    work great, but don’t feel
    like Salesforce

    View Slide

  34. #designsystem
    They needed better
    resources & tools

    View Slide

  35. #designsystem
    They need to keep up
    with our design iterations

    View Slide

  36. #designsystem
    Lightning
    Experience

    View Slide

  37. #designsystem
    Have a clear vision to

    align efforts

    View Slide

  38. #designsystem
    Our design principles
    are intentionally ordered by priority

    View Slide

  39. #designsystem
    clarity
    Eliminate ambiguity. Enable people to see,
    understand, and act with confidence.

    View Slide

  40. #designsystem
    efficiency
    Streamline and optimize workflows.
    Intelligently anticipate needs to help
    people work better, smarter, and faster.

    View Slide

  41. #designsystem
    consistency
    Create familiarity and strengthen intuition
    by applying the same solution to the 

    same problem.

    View Slide

  42. #designsystem
    beauty
    Demonstrate respect for people’s time 

    and attention through thoughtful and
    elegant craftsmanship.

    View Slide

  43. #designsystem
    clarity
    > efficiency
    > consistency
    > beauty

    View Slide

  44. #designsystem
    Do research &

    talk to your customers

    View Slide

  45. #designsystem
    Keep testing as you go

    View Slide

  46. #designsystem
    Accessibility is really
    freaking important

    View Slide

  47. #designsystem
    A solution that works for
    us… & now for our
    customers, too

    View Slide

  48. #designsystem
    Clarity

    View Slide

  49. #designsystem
    Lightning Design System
    The next generation of living style guides

    View Slide

  50. salesforce.com/designsystem

    View Slide

  51. #designsystem
    Lightning Design System
    Guidelines and design patterns
    Consistent with the Salesforce UI
    Includes HTML, CSS, icons, and fonts
    Framework-agnostic
    Open Source

    View Slide

  52. #designsystem
    Design Patterns

    View Slide

  53. #designsystem
    Use plain language

    View Slide

  54. #designsystem
    Keep your information
    architecture simple

    View Slide

  55. #designsystem
    Don’t try to document &
    build everything at once

    View Slide

  56. #designsystem
    Document & build

    going forward

    View Slide

  57. #designsystem
    Efficiency

    View Slide

  58. #designsystem
    “…Creating a positive experience is
    not about having best practices. It’s
    about putting those practices into
    the right hands.”
    — BRENDON CORNWELL

    View Slide

  59. #designsystem
    Empower Developers
    Provide developers scalable & accessible code at beginning of 

    development cycle

    View Slide

  60. #designsystem
    Empower Designers
    Design & iterate more efficiently in the browser

    View Slide

  61. #designsystem
    Design System Components
    CSS Framework + UI Library

    View Slide

  62. #designsystem
    Building an enterprise
    framework is tricky!

    View Slide

  63. #designsystem
    Clarity > Brevity

    View Slide

  64. #designsystem
    Namespaced classes with
    scoping option

    View Slide

  65. #designsystem
    BEM

    (Block, Element, Modifier)

    View Slide

  66. #designsystem
    .slds-button__icon--x-small

    View Slide

  67. #designsystem
    .slds-button__icon--x-small
    NAMESPACE

    View Slide

  68. #designsystem
    .slds-button__icon--x-small
    NAMESPACE BLOCK

    View Slide

  69. #designsystem
    .slds-button__icon--x-small
    NAMESPACE BLOCK ELEMENT

    View Slide

  70. #designsystem
    .slds-button__icon--x-small
    NAMESPACE BLOCK ELEMENT MODIFIER

    View Slide

  71. #designsystem
    .slds-button__icon--x-small
    NAMESPACE BLOCK ELEMENT MODIFIER

    View Slide

  72. #designsystem
    Objects/Components
    LIGHTWEIGHT
    MODULAR
    REUSABLE
    Dependencies
    DESIGN TOKENS
    Utilities
    NON-SEMANTIC
    SINGLE PURPOSE

    View Slide

  73. #designsystem
    Living Style Guide
    + =

    View Slide

  74. #designsystem
    Show the object with its
    states & variants

    View Slide

  75. lightningdesignsystem.com/components/buttons

    View Slide

  76. #designsystem
    Only show the code
    people need to see

    View Slide

  77. #designsystem
    Don’t make it until you
    need it! (Be Lean)

    View Slide

  78. #designsystem
    For our application, most
    typographic elements
    require spacing removed

    View Slide

  79. #designsystem
    Since this is the most
    common case, we remove
    them by default

    View Slide

  80. #designsystem
    Heading hierarchy levels
    vary depending on context
    & our customer’s needs

    View Slide

  81. #designsystem
    Visual style & semantic
    hierarchy are not
    necessarily coupled

    View Slide

  82. #designsystem
    Lists are used usually for
    their semantics, but rarely
    have bullets or margins

    View Slide

  83. #designsystem
    We reset these styles &

    opt in with Utilities

    View Slide

  84. #designsystem
    We use a scoped utility
    class to opt-back in on a
    parent-level

    View Slide

  85. View Slide

  86. #designsystem
    Clearer communication

    View Slide

  87. #designsystem
    Designing in the browser

    View Slide

  88. #designsystem
    Living specifications

    View Slide

  89. #designsystem
    Better prototypes

    View Slide

  90. #designsystem
    No more proliferation of
    inconsistent styles

    View Slide

  91. #designsystem
    Consistency

    View Slide

  92. #designsystem
    How do we keep colors,
    spacing, sizing, etc.
    consistent?

    View Slide

  93. #designsystem
    How do we make future
    visual design

    changes faster?

    View Slide

  94. #designsystem
    How do we keep 

    our design

    system agnostic?

    View Slide

  95. #designsystem
    Single Source of Truth

    View Slide

  96. #designsystem
    Assets are stored in
    repository and
    automatically updated in
    the app and style guide

    View Slide

  97. #designsystem
    Design Tokens
    The basic atoms of the Design System

    View Slide

  98. #designsystem
    Design Tokens help us
    scale design across both
    web & native applications.

    View Slide

  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

    View Slide

  100. #designsystem
    Designers refer to

    Design Tokens in

    their specifications

    View Slide

  101. #designsystem

    View Slide

  102. #designsystem
    theo
    Open source tool by Salesforce UX to
    generate Design Tokens

    View Slide

  103. #designsystem
    Theo JSON file converts to:
    Lightning
    Sass
    Less
    Stylus
    JSON (iOS)
    XML (Android)
    Style Guide
    Color Swatches (Photoshop & Sketch)

    View Slide

  104. #designsystem
    THEO
    {
    "name": "COLOR_TEXT",
    "value": "#000",
    "category": "text-color",
    "comment": "Body text"
    }
    LIGHTNING


    SASS
    // Body text
    $color-text: #000;

    View Slide

  105. #designsystem
    CSS — hex
    iOS — RGBA
    Android — 8-digit hex

    View Slide

  106. #designsystem
    CSS — rem/em/px
    iOS — pt
    Android — sp/dip

    View Slide

  107. Design Tokens

    View Slide

  108. Design Tokens: Background Colors

    View Slide

  109. Design Tokens: Font Sizes

    View Slide

  110. Design Tokens: Radiuses

    View Slide

  111. #designsystem
    Color Swatches

    View Slide

  112. #designsystem
    No more

    hard-coded values

    View Slide

  113. #designsystem
    Beauty

    View Slide

  114. #designsystem
    Salesforce Sans
    ABCDEFGHIJKLMNOPQRSTUVWXYZ
    abcdefghijklmnopqrstuvwxyz
    0123456789

    View Slide

  115. #designsystem
    Base Unit of 4 for 

    spacing & sizing

    View Slide

  116. #designsystem
    Modular, responsive

    type scale

    View Slide

  117. #designsystem
    SVGs for crisp,

    scalable icons

    View Slide

  118. #designsystem
    ENTER & EXIT EMPHASIS TRANSITIONAL PERSONALITY & BRANDING
    TIMING ELEVATION EFFECTS
    Motion Guidelines

    View Slide

  119. #designsystem
    #A7B8D1
    #CFD7E6
    #EEF1F6 #4F6A92
    #0070D2
    #0C8EFF #00396B
    #005FB2
    #EF7EAD #4BC076 #7F8DE1 #F88962
    Color Palette

    View Slide

  120. #designsystem
    Choose Your Design
    System Team Model

    View Slide

  121. medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  125. medium.com/salesforce-ux/the-salesforce-team-model-for-scaling-a-design-system-d89c2a2d404b

    View Slide

  126. #designsystem
    A Cyclical Team Model
    Design System informs Product Design
    Product Design informs Design System

    View Slide

  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.

    View Slide

  128. #designsystem
    Our federated Design
    Systems contributors
    distributed throughout the organization keep the Design System accurate,
    current, and actually useful

    View Slide

  129. #designsystem
    Bring designers, engineers, 

    & product managers together
    around a single goal

    View Slide

  130. blog.capwatkins.com/the-sliding-scale-of-giving-a-fuck
    APOLOGIES FOR THE PROFANITY BUT IT’S A GREAT READ.

    View Slide

  131. #designsystem
    Design Principles >
    Design Standards

    View Slide

  132. #designsystem
    “Design considerations beat
    design patterns. Test and
    decide; don’t just copy things
    like the hamburger icon.”
    — JEFFREY ZELDMAN

    View Slide

  133. #designsystem
    Resources

    View Slide

  134. #designsystem
    salesforce.com/designsystem

    View Slide

  135. #designsystem
    styleguides.io

    View Slide

  136. #designsystem
    speakerdeck.com/jina/lightning-design-system

    View Slide

  137. #designsystem
    @salesforceUX

    View Slide

  138. #designsystem
    @jina

    View Slide

  139. #designsystem
    “Be regular and orderly in
    your life so that you may
    be violent and original in
    your work.”
    — GUSTAVE FLAUBERT

    View Slide

  140. #designsystem
    thank you!
    @jina

    View Slide