#designsystem IXDA SF 10.14.2015 Lightning
 Design System @JINA SENIOR DESIGNER, DESIGN SYSTEMS

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

user experience #designsystem

#designsystem @jina SENIOR DESIGNER, DESIGN SYSTEMS SALESFORCE

#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

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

#designsystem Salesforce1

#designsystem Design for Scale

#designsystem Support Multiple 
 Platforms & Devices

#designsystem Design for Configuration

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

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

#designsystem Redlines?

#designsystem

#designsystem Design Pages

#designsystem #FML

#designsystem Design Pages

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

#designsystem Design Systems

#designsystem Style Guides are all
 the rage …and they have come a long way

alistapart.com/article/writingainterfacestyleguide

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

#designsystem Zombie Style Guides …are style guides that aren't maintained and part of your process.
 They die and rot. They eat your brains.

#designsystem It must be living

Ye Olde Salesforce1 Style Guide

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

#designsystem How do I get my app
 to look like this?

#designsystem Can I use the CSS
 in my app?

#designsystem Our partners & customers want their apps to look 
 like Salesforce

#designsystem They want our design language & best practices

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

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

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

#designsystem They needed better resources & tools

#designsystem They need to keep up with our design iterations

#designsystem Lightning Experience

#designsystem Have a clear vision to
 align efforts

#designsystem Our design principles are intentionally ordered by priority

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

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

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

#designsystem beauty Demonstrate respect for people’s time 
 and attention through thoughtful and elegant craftsmanship.

#designsystem clarity > efficiency > consistency > beauty

#designsystem Do research &
 talk to your customers

#designsystem Keep testing as you go

#designsystem Accessibility is really freaking important

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

#designsystem Clarity

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

salesforce.com/designsystem

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

#designsystem Design Patterns

#designsystem Use plain language

#designsystem Keep your information architecture simple

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

#designsystem Document & build
 going forward

#designsystem Efficiency

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

#designsystem Empower Developers Provide developers scalable & accessible code at beginning of 
 development cycle

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

#designsystem Design System Components CSS Framework + UI Library

#designsystem Building an enterprise framework is tricky!

#designsystem Clarity > Brevity

#designsystem Namespaced classes with scoping option

#designsystem BEM
 (Block, Element, Modifier)

#designsystem .slds-button__icon--x-small

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

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

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

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

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

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

#designsystem Living Style Guide + =

#designsystem Show the object with its states & variants

lightningdesignsystem.com/components/buttons

#designsystem Only show the code people need to see

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

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

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

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

#designsystem Visual style & semantic hierarchy are not necessarily coupled

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

#designsystem We reset these styles &
 opt in with Utilities

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

No content

#designsystem Clearer communication

#designsystem Designing in the browser

#designsystem Living specifications

#designsystem Better prototypes

#designsystem No more proliferation of inconsistent styles

#designsystem Consistency

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

#designsystem How do we make future visual design
 changes faster?

#designsystem How do we keep 
 our design
 system agnostic?

#designsystem Single Source of Truth

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

#designsystem Design Tokens The basic atoms of the Design System

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

#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

#designsystem Designers refer to
 Design Tokens in
 their specifications

#designsystem

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

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

#designsystem THEO { "name": "COLOR_TEXT", "value": "#000", "category": "text-color", "comment": "Body text" } LIGHTNING SASS // Body text $color-text: #000;

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

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

Design Tokens

Design Tokens: Background Colors

Design Tokens: Font Sizes

Design Tokens: Radiuses

#designsystem Color Swatches

#designsystem No more
 hard-coded values

#designsystem Beauty

#designsystem Salesforce Sans ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

#designsystem Base Unit of 4 for 
 spacing & sizing

#designsystem Modular, responsive
 type scale

#designsystem SVGs for crisp,
 scalable icons

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

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

#designsystem Choose Your Design System Team Model

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

#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

#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

#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

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

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

#designsystem Our centralized Design Systems team acts as a librarian, distributor, and facilitator, and we make sure it is maintained and crafted with quality.

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

#designsystem Bring designers, engineers, 
 & product managers together around a single goal

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

#designsystem Design Principles > Design Standards

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

#designsystem Resources

#designsystem salesforce.com/designsystem

#designsystem styleguides.io

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

#designsystem @salesforceUX

#designsystem @jina

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

#designsystem thank you! @jina