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

Living Design Systems

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


March 17, 2016

More Decks by jina

Other Decks in Design


  1. 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
  2. “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
  3. #designsystem Where can I find the icons? What color is

    the button border? Where can I find the icons?
  4. 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
  5. “…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
  6. 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
  7. team model #2: centralized a single, central design team produces

 and supports a system used by others 
  8. 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
  9. a cyclical team model design system informs product design product

    design informs design system #designsystem
  10. our centralized design systems team acts as a librarian, distributor,

    and facilitator, and we make sure it is maintained and crafted with quality #designsystem
  11. our centralized team product design frontend developers (css framework) accessibility

    visual design ux engineers (infrastructure & distribution) #designsystem
  12. our federated design systems contributors distributed throughout the organization keep

    the Design System accurate, current, & actually useful #designsystem
  13. “A Design System isn’t a project. It’s a product, serving

    products.” — NATHAN CURTIS #designsystem
  14. “Design considerations beat design patterns. Test and decide; don’t just

    copy things like the hamburger icon.” — LUKE WROBLEWSKI #designsystem
  15. “While a company is growing fast, there is nothing more

    important than constant communication and complete alignment.” — MARC BENIOFF #designsystem
  16. efficiency Streamline and optimize workflows. Intelligently anticipate needs to help

    people work better, smarter, and faster. #designsystem
  17. beauty Demonstrate respect for 
 people’s time and attention through

    thoughtful and 
 elegant craftsmanship. #designsystem
  18. UI inventory Audit your UI by categorizing all the different

    types of components you have, along with their variants. #designsystem
  19. take component notes layouts, responsive behaviors, visual differentiation, states, 

    keyboard navigation, usage guidelines, and accessibility requirements #designsystem
  20. “…Creating a positive experience
 is not about having best practices.

    It’s about putting those practices into the right hands.” — BRENDON CORNWELL #designsystem
  21. design tokens help us scale design across both web &

    native applications #designsystem
  22. 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
  23. theo JSON file converts to: Lightning Sass Less Stylus JSON

    (iOS) XML (Android) style guide color swatches (Photoshop & Sketch) #designsystem
  24. THEO { "name": "COLOR_TEXT", "value": "#000", "category": "text-color", "comment": "Body

    text" } #designsystem LIGHTNING <!-- Body text color --> <aura:var name="colorText" value="#000" /> SASS // Body text $color-text: #000;
  25. scoping Wrapping styles in a class for components that live

    in an environment that uses other CSS frameworks or legacy code. #designsystem
  26. HTML <div class="slds"> <!-- Your components here --> </div> #designsystem

    SASS ul li { margin-left: 20px; } .slds li { margin-left: 0; }
  27. “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
  28. you don’t know what you don’t know What makes up

    your ecosystem? Who are your customers? Where are your potential footprints? #designsystem
  29. 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
  30. 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
  31. #designsystem 0 15 30 45 60 Release 1 Release 2

    Release 3 Release 4 Release 5 Normal CSS Deprecated CSS
  32. #designsystem CODE LINE

 FREEZE engineering design system MARKUP HANDOFF
  33. “The more decisions you put off, and the longer you

    delay them, the more expensive they become.” — CRAIG VILLAMOR, CHIEF DESIGN ARCHITECT, SALESFORCE #designsystem
  34. “Be regular and orderly in your life so that you

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