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

Living Design Systems

jina
March 17, 2016

Living Design Systems

Made by Few, CSS Conf EU, Nordic.js, Cascade SF UX Night, Camp Sass, So Coded, Smashing Conference Barcelona, Smashing Conference Oxford, Smashing Conference San Francisco

jina

March 17, 2016
Tweet

More Decks by jina

Other Decks in Design

Transcript

  1. SMASHING CONFERENCE
    SAN FRANCISCO 04.06.2016
    living design systems
    @JINA
    LEAD DESIGNER, DESIGN SYSTEMS #designsystem

    View Slide

  2. Forward-Looking Statements
    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. @salesforceux
    #designsystem
    #designsystem

    View Slide

  5. @jina
    LEAD DESIGNER, DESIGN SYSTEMS
    SALESFORCE
    #designsystem

    View Slide

  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
    #designsystem

    View Slide

  7. why did salesforce
    need a design system?
    #designsystem

    View Slide

  8. product design in an
    enterprise organization
    can be tricky!
    #designsystem

    View Slide

  9. 17

    years of legacy
    #designsystem

    View Slide

  10. 20K+

    employees
    #designsystem

    View Slide

  11. lots of products
    #designsystem

    View Slide

  12. sales
    #designsystem
    Sales Cloud
    SalesforceIQ
    Data.com

    View Slide

  13. service
    Service Cloud
    Desk.com
    #designsystem

    View Slide

  14. marketing
    Marketing Cloud
    Pardot
    #designsystem

    View Slide

  15. community
    Community Cloud
    Chatter
    #designsystem

    View Slide

  16. analytics
    Wave Analytics
    Wave Apps
    #designsystem

    View Slide

  17. apps
    App Cloud
    Force.com
    Heroku Enterprise
    #designsystem

    View Slide

  18. internet

    of things
    IoT Cloud
    Thunder
    #designsystem

    View Slide

  19. lots of

    platforms & devices
    #designsystem

    View Slide

  20. lots of people
    #designsystem

    View Slide

  21. dozens of scrum teams
    hundreds of developers
    small team of designers
    #designsystem

    View Slide

  22. design for scale
    #designsystem

    View Slide

  23. design for configuration
    #designsystem

    View Slide

  24. #designsystem

    View Slide

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

    View Slide

  26. redlines?
    #designsystem

    View Slide

  27. #designsystem

    View Slide

  28. #designsystem

    View Slide

  29. #designsystem

    View Slide

  30. #FML
    #designsystem

    View Slide

  31. #designsystem
    design pages

    View Slide

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

    View Slide

  33. #designsystem
    design systems

    View Slide

  34. style guides are all

    the rage
    …and they have come a long way
    #designsystem

    View Slide

  35. styleguides.io
    #designsystem

    View Slide

  36. #designsystem

    View Slide

  37. alistapart.com/article/writingainterfacestyleguide

    View Slide

  38. brand & design standards
    front-end standards
    keep your style guide current & useful
    #designsystem

    View Slide

  39. former salesforce1 style guide

    View Slide

  40. #designsystem
    How do I get my app

    to look like this?

    View Slide

  41. #designsystem
    Can I use the CSS

    in my app?

    View Slide

  42. our partners & customers want:
    to look & feel like salesforce
    our design guidelines & best practices
    resources & tools to get it done
    to keep up with our design iterations
    to do it the official salesforce way
    #designsystem

    View Slide

  43. trustworthy
    #designsystem

    View Slide

  44. zombie style guides
    #designsystem

    View Slide

  45. it must be living
    #designsystem

    View Slide

  46. “…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

    “BUILDING SCALABLE DESIGN SYSTEMS AND STYLE GUIDES - A UI20 PODCAST WITH NATHAN CURTIS”
    #designsystem

    View Slide

  47. #designsystem

    View Slide

  48. lightning experience
    #designsystem

    View Slide

  49. salesforce.com/designsystem

    View Slide

  50. consistent with the salesforce lightning UI
    #designsystem

    View Slide

  51. “…great design systems 

    are usable by your 

    entire team.”
    — MARK OTTO
    #designsystem

    View Slide

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

    View Slide

  53. 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
    #designsystem
    VIA TEAM MODELS FOR SCALING A DESIGN SYSTEM BY NATHAN CURTIS

    View Slide

  54. team model #2: centralized
    a single, central design team produces 

    and supports a system used by others 

    as a part of their job
    #designsystem
    VIA TEAM MODELS FOR SCALING A DESIGN SYSTEM BY NATHAN CURTIS

    View Slide

  55. team model #3: federated
    designers from multiple product teams 

    decide on the system together
    #designsystem
    VIA TEAM MODELS FOR SCALING A DESIGN SYSTEM BY NATHAN CURTIS

    View Slide

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

    View Slide

  57. a cyclical team model
    design system informs product design
    product design informs design system
    #designsystem

    View Slide

  58. our centralized design
    systems team
    acts as a librarian, distributor, and facilitator, and we make sure it is
    maintained and crafted with quality
    #designsystem

    View Slide

  59. our centralized team
    product design
    frontend developers (css framework)
    accessibility
    visual design
    ux engineers (infrastructure & distribution)
    #designsystem

    View Slide

  60. our federated design
    systems contributors
    distributed throughout the organization keep the Design System accurate,
    current, & actually useful
    #designsystem

    View Slide

  61. our federated team
    product & platform designers
    prototypers
    researchers
    additional ux engineers
    #designsystem

    View Slide

  62. “A Design System isn’t a
    project. It’s a product,
    serving products.”
    — NATHAN CURTIS
    #designsystem

    View Slide

  63. to design at salesforce

    is to consider the

    whole ecosystem
    #designsystem

    View Slide

  64. plan with a roadmap
    #designsystem

    View Slide

  65. do user research
    #designsystem

    View Slide

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

    View Slide

  67. “While a company is growing fast,
    there is nothing more important
    than constant communication
    and complete alignment.”
    — MARC BENIOFF
    #designsystem

    View Slide

  68. have a clear vision to

    align efforts
    #designsystem

    View Slide

  69. lists in priority order
    #designsystem

    View Slide

  70. bring designers, engineers, 

    & product managers together
    around a single goal
    #designsystem

    View Slide

  71. drive design decisions with
    design principles
    #designsystem

    View Slide

  72. clarity
    Eliminate ambiguity. Enable people
    to see, understand, and act 

    with confidence.
    #designsystem

    View Slide

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

    View Slide

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

    View Slide

  75. beauty
    Demonstrate respect for 

    people’s time and attention
    through thoughtful and 

    elegant craftsmanship.
    #designsystem

    View Slide

  76. UI inventory
    Audit your UI by categorizing all the different types of components you have,
    along with their variants.
    #designsystem

    View Slide

  77. #designsystem

    View Slide

  78. #designsystem

    View Slide

  79. #designsystem

    View Slide

  80. standardize

    & consolidate
    #designsystem

    View Slide

  81. take component notes
    layouts, responsive behaviors, visual differentiation, states, 

    keyboard navigation, usage guidelines, and accessibility requirements
    #designsystem

    View Slide

  82. open-ended questions

    & action items
    #designsystem

    View Slide

  83. list the people involved
    especially design and engineering leads
    #designsystem

    View Slide

  84. it’s all components
    #designsystem

    View Slide

  85. design patterns & guidelines
    #designsystem

    View Slide

  86. color
    neutrals
    #designsystem
    primaries
    secondaries

    View Slide

  87. visual messaging
    #designsystem

    View Slide

  88. visual differentiation
    #designsystem

    View Slide

  89. visual hierarchy
    #designsystem

    View Slide

  90. accessibility
    #designsystem

    View Slide

  91. localization & internationalization
    #designsystem

    View Slide

  92. “…Creating a positive experience

    is not about having best practices.
    It’s about putting those practices
    into the right hands.”
    — BRENDON CORNWELL
    #designsystem

    View Slide

  93. resources including HTML, CSS, icons, & fonts
    #designsystem

    View Slide

  94. empower designers
    design & iterate more efficiently in the browser
    #designsystem

    View Slide

  95. how do we maintain
    consistency across a
    massive organization?
    #designsystem

    View Slide

  96. how do we make future
    visual design

    changes faster?
    #designsystem

    View Slide

  97. how do we keep 

    our design

    system agnostic?
    #designsystem

    View Slide

  98. single source of truth
    #designsystem

    View Slide

  99. assets are stored in repository
    & automatically updated in
    the app & style guide
    #designsystem

    View Slide

  100. design tokens
    the basic atoms of the Lightning Design System
    #designsystem

    View Slide

  101. design tokens help us
    scale design across both
    web & native applications
    #designsystem

    View Slide

  102. some types of design tokens
    font weights, sizes, families, & line-heights
    colors for background, text, & borders
    shadows
    spacing & sizing
    animation durations
    z-indexes
    breakpoints
    #designsystem

    View Slide

  103. designers refer to

    design tokens in

    their specifications
    #designsystem

    View Slide

  104. #designsystem

    View Slide

  105. theo
    open source tool by salesforce UX to
    generate design tokens
    #designsystem

    View Slide

  106. theo JSON file converts to:
    Lightning
    Sass
    Less
    Stylus
    JSON (iOS)
    XML (Android)
    style guide
    color swatches (Photoshop & Sketch) #designsystem

    View Slide

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


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

    View Slide

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

    View Slide

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

    View Slide

  110. design tokens

    View Slide

  111. design tokens: background colors

    View Slide

  112. design tokens: font sizes

    View Slide

  113. design tokens: radiuses

    View Slide

  114. color swatches
    #designsystem

    View Slide

  115. framework agnostic
    #designsystem

    View Slide

  116. no more

    hard-coded values
    #designsystem

    View Slide

  117. empower developers
    provide developers scalable & accessible code at beginning of 

    development cycle
    #designsystem

    View Slide

  118. design system components
    our ui library/css framework
    #designsystem

    View Slide

  119. building an enterprise
    framework is tricky!
    #designsystem

    View Slide

  120. clarity
    efficiency
    consistency
    beauty
    #designsystem

    View Slide

  121. clarity > brevity
    #designsystem

    View Slide

  122. namespaced classes with
    scoping option
    #designsystem

    View Slide

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

    View Slide

  124. scoping
    Wrapping styles in a class for components that live in an environment that
    uses other CSS frameworks or legacy code.
    #designsystem

    View Slide

  125. HTML



    #designsystem
    SASS
    ul li { margin-left: 20px; }
    .slds li { margin-left: 0; }

    View Slide

  126. living style guide
    #designsystem
    + =

    View Slide

  127. don’t make it until you
    need it! (be lean)
    #designsystem

    View Slide

  128. living specifications
    #designsystem

    View Slide

  129. #DeathToRedlines
    #designsystem

    View Slide

  130. “Freed from some of the daily
    tedium that can come with being
    a designer, I can shift the bulk of
    my time and energy to looking at
    the bigger picture.”
    — KATEY BASYE
    #designsystem

    View Slide

  131. living
    #designsystem

    View Slide

  132. how do we lower the bar
    for adoption?
    #designsystem

    View Slide

  133. minimize dependencies
    #designsystem

    View Slide

  134. you don’t know what you don’t know
    What makes up your ecosystem?
    Who are your customers?
    Where are your potential footprints?
    #designsystem

    View Slide

  135. Tokens
    Icons
    HTML
    CSS
    Guidelines
    #designsystem

    View Slide

  136. no JavaScript‽
    #designsystem

    View Slide

  137. Lightning
    React
    Angular
    jQuery
    etc.
    #designsystem

    View Slide

  138. information architecture +
    documentation to
    demonstrate outcome
    #designsystem

    View Slide

  139. component states

    View Slide

  140. component states

    View Slide

  141. component states

    View Slide

  142. component states

    View Slide

  143. component states

    View Slide

  144. component states

    View Slide

  145. component states

    View Slide

  146. we have to be 

    forward thinking while
    backward compatible
    #designsystem

    View Slide

  147. 3

    supported versions
    #designsystem

    View Slide

  148. current

    production release
    #designsystem

    View Slide

  149. previous

    production release
    #designsystem

    View Slide

  150. future

    production release
    #designsystem

    View Slide

  151. deprecation
    #designsystem

    View Slide

  152. as a developer
    How do I keep track of changes?
    When is the right time to deprecate?
    What kind of impact would deprecating a class have on a customers product?
    #designsystem

    View Slide

  153. as a consumer
    How do I know what is deprecated?
    What kind of guidance will I be given?
    How long will I have to upgrade?
    #designsystem

    View Slide

  154. component states

    View Slide

  155. Sass Deprecate!
    #designsystem

    View Slide

  156. $app-version: '1.0.0';
    #designsystem

    View Slide

  157. $version
    version in which you want code to deprecate
    #designsystem

    View Slide

  158. $message
    reason why, or possible workaround
    #designsystem

    View Slide

  159. #designsystem
    $app-version: '1.0.0';
    .slds-button__icon {
    width: 1rem;
    height: 1rem;
    }
    version 1.0.0

    View Slide

  160. #designsystem
    $app-version: '2.0.0';
    @include deprecate('3.0.0', 'use .slds-icon instead') {
    .slds-button__icon {
    width: 1rem;
    height: 1rem;
    }
    }
    version 2.0.0

    View Slide

  161. #designsystem
    0
    15
    30
    45
    60
    Release 1 Release 2 Release 3 Release 4 Release 5
    Normal CSS Deprecated CSS

    View Slide

  162. medium.com/@kaelig/introducing-design-systems-ops-7f34c4561ba7

    View Slide

  163. distance from concept to user
    #designsystem
    fidelity fades as it gets closer to the user

    View Slide

  164. distance with design systems
    #designsystem
    fidelity keeps a lot steadier along the way

    View Slide

  165. distance with design systems + ops
    #designsystem
    reduced inefficiencies, increasing fidelity of software delivery

    View Slide

  166. #designsystem
    CODE LINE

    OPENS
    CODE LINE

    OPENS
    FEATURE

    FREEZE
    RELEASE

    FREEZE
    GA &

    OPEN SOURCE
    UI FREEZE GA
    COMPONENT

    DESIGN FREEZE
    FEATURE

    FREEZE
    engineering
    design system
    MARKUP HANDOFF

    View Slide

  167. make better

    design decisions
    #designsystem

    View Slide

  168. “The more decisions you put
    off, and the longer you delay
    them, the more expensive
    they become.”
    — CRAIG VILLAMOR, CHIEF DESIGN ARCHITECT, SALESFORCE
    #designsystem

    View Slide

  169. clarity
    > efficiency
    > consistency
    > beauty
    #designsystem

    View Slide

  170. design principles > design standards
    #designsystem

    View Slide

  171. evangelize internally 

    & to your external partners
    #designsystem

    View Slide

  172. support adoption through
    education & consultation
    #designsystem

    View Slide

  173. advisory boards

    & office hours
    #designsystem

    View Slide

  174. show the impact through
    examples & metrics
    #designsystem

    View Slide

  175. onward & upward
    #designsystem

    View Slide

  176. “Be regular and orderly in
    your life so that you may 

    be violent and original in
    your work.”
    — GUSTAVE FLAUBERT
    #designsystem

    View Slide

  177. open source
    #designsystem

    View Slide

  178. github.com/salesforce-ux/theo
    github.com/salesforce-ux/sass-deprecate
    github.com/salesforce-ux/design-system
    #designsystem

    View Slide

  179. designsystems.herokuapp.com
    #designsystem

    View Slide

  180. #designsystem

    View Slide

  181. @themixinsf
    #designsystem

    View Slide

  182. thank you!
    @jina
    @salesforceUX
    #designsystem

    View Slide