Slide 1
Slide 1 text
ADOBE MAX // SAN DIEGO // 2 NOVEMBER 2016
DESIGNING A
DESIGN SYSTEM
@JINA // LEAD DESIGNER // SALESFORCE LIGHTNING DESIGN SYSTEM
#
D
ESIG
N
SYSTEM
Slide 2
Slide 2 text
@JINA
LEAD DESIGNER // SALESFORCE LIGHTNING DESIGN SYSTEM
ORGANIZER // CLARITY
DESIGNER // SASS
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
FORWARD-LOOKING STATEMENTS
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.
Slide 5
Slide 5 text
LIGHTNINGDESIGNSYSTEM.COM
Slide 6
Slide 6 text
“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 // TECHNOLOGY FORECASTER
Slide 7
Slide 7 text
DESIGN SYSTEMS RULE
EVERYTHING AROUND ME
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
PDFS ARE A PAIN TO MAINTAIN
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
Slide 12
Slide 12 text
WORDPRESS WAS ONLY
SLIGHTLY EASIER
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
ALISTAPART.COM/ARTICLE/WRITINGAINTERFACESTYLEGUIDE
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
LIVING STYLE GUIDES FTW!
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
BLOG.ENGINEYARD.COM/2011/FRONT-END-MAINTAINABILITY-WITH-SASS-AND-STYLE-GUIDES
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
REDLINES?
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
PSD ⟶ DROPBOX ⟶ WIKI
Slide 23
Slide 23 text
PSD ⟶ DROPBOX ⟶ WIKI
䡿
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
DOING THIS FOR NATIVE FELT LIKE
A STEP BACK
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
SASS-LANG.COM
Slide 28
Slide 28 text
SASS-LANG.COM/STYLEGUIDE
Slide 29
Slide 29 text
COULD THE SASS & STYLE GUIDE
SHARE A SINGLE SOURCE?
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
COLORS.YAML
swatches:
- name: "hopbush"
value: "c69"
- name: "bouquet"
value: "b37399"
Slide 32
Slide 32 text
_COLORS.SCSS.ERB
<% data.colors.swatches.each do |swatch| %>
$<%= swatch.name %>: #<%= swatch.value %>;
<% end %>
Slide 33
Slide 33 text
STYLE-GUIDE/COLORS.HTML.HAML
- for swatch in data.colors.swatches
%li{class: "swatch-" + swatch.name}
%code
= "$" + swatch.name
= "#" + swatch.value
Slide 34
Slide 34 text
SASS-LANG.COM/STYLEGUIDE/COLOR
Slide 35
Slide 35 text
LIVING STYLE GUIDES FTW
Slide 36
Slide 36 text
STYLEGUIDES.IO
Slide 37
Slide 37 text
“A FRACTURED PROCESS
MAKES FOR A FRACTURED
USER EXPERIENCE.”
— NATE FORTIN // VP DESIGN // EVERNOTE
Slide 38
Slide 38 text
DESIGN SYSTEMS FTW
Slide 39
Slide 39 text
WHAT IS A DESIGN SYSTEM?
Slide 40
Slide 40 text
BRAND GUIDELINES?
Slide 41
Slide 41 text
NASA.GOV/IMAGE-FEATURE/NASA-GRAPHICS-STANDARDS-MANUAL
Slide 42
Slide 42 text
STANDARDSMANUAL.COM/PRODUCTS/NASA-GRAPHICS-STANDARDS-MANUAL
Slide 43
Slide 43 text
NASA.GOV/SITES/DEFAULT/FILES/ATOMS/FILES/NASA_GRAPHICS_MANUAL_NHB_1430-2_JAN_1976.PDF
Slide 44
Slide 44 text
DROPBOX.COM/BRANDING
Slide 45
Slide 45 text
DESIGN LANGUAGE?
Slide 46
Slide 46 text
MATERIAL.GOOGLE.COM
Slide 47
Slide 47 text
BRAND.UBER.COM
Slide 48
Slide 48 text
VOICE & TONE?
Slide 49
Slide 49 text
VOICEANDTONE.COM
Slide 50
Slide 50 text
SLACKHQ.COM/WORDS-ARE-HARD-AABAFC490D04
Slide 51
Slide 51 text
PATTERN LIBRARY?
Slide 52
Slide 52 text
UI LIBRARY?
Slide 53
Slide 53 text
COMPONENT LIBRARY?
Slide 54
Slide 54 text
FRONT-END STYLE GUIDE?
Slide 55
Slide 55 text
WHATCHAMACALLIT?
Slide 56
Slide 56 text
STANDARDS.USA.GOV
Slide 57
Slide 57 text
IT CAN BE ANY OF THESE.
OR ALL OF THESE.
OR OTHER THINGS AS WELL.
Slide 58
Slide 58 text
A DESIGN SYSTEM CONTAINS
WHATEVER YOUR ORGANIZATION
NEEDS TO COMMUNICATE
DESIGN DECISIONS
Slide 59
Slide 59 text
“…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 // FOUNDER // USER INTERFACE ENGINEERING
Slide 60
Slide 60 text
“A STYLE GUIDE IS AN ARTIFACT
OF DESIGN PROCESS.
A DESIGN SYSTEM IS A LIVING,
FUNDED PRODUCT WITH A
ROADMAP & BACKLOG,
SERVING AN ECOSYSTEM.”
— NATHAN CURTIS // FOUNDER // EIGHTSHAPES
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
FORMER SALESFORCE1 STYLE GUIDE
Slide 63
Slide 63 text
No content
Slide 64
Slide 64 text
WHY DID SALESFORCE
NEED A DESIGN SYSTEM?
Slide 65
Slide 65 text
SCALING ENTERPRISE
DESIGN IS TRICKY!
Slide 66
Slide 66 text
17
YEARS OF LEGACY
Slide 67
Slide 67 text
20K+
EMPLOYEES
Slide 68
Slide 68 text
LOTS OF PRODUCTS
Sales Cloud
SalesforceIQ
Salesforce Quote-to-Cash
Data.com
Financial Services Cloud
Health Cloud
Commerce Cloud
Service Cloud
Desk.com
Analytics Cloud
Wave Apps
Community Cloud
Chatter
Marketing Cloud
Pardot
App Cloud
AppExchange
Force.com
Heroku Enterprise
IOT Cloud
Slide 69
Slide 69 text
CONSIDER THE
WHOLE ECOSYSTEM
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
GREAT TEAM COMMUNICATION
IS CRITICAL
Slide 72
Slide 72 text
WHERE CAN I FIND THE ICONS?
WHAT COLOR IS THE BUTTON BORDER?
WHERE CAN I FIND THE ICONS?
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
No content
Slide 75
Slide 75 text
No content
Slide 76
Slide 76 text
#FML
Slide 77
Slide 77 text
106 UNIQUE TEXT COLORS
Slide 78
Slide 78 text
120 UNIQUE BACKGROUND COLORS
Slide 79
Slide 79 text
73 UNIQUE FONT SIZES
Slide 80
Slide 80 text
DESIGN PAGES
Slide 81
Slide 81 text
DESIGN SYSTEMS
Slide 82
Slide 82 text
L I G H T N I N G E X P E R I E N C E
Slide 83
Slide 83 text
“TRUE COLLABORATION ISN’T
THROWING DESIGNS OVER THE WALL.
IT’S DESIGNERS, ENGINEERS,
& THE REST OF THE TEAM
SHARING THE RESPONSIBILITY
TO BUILD A QUALITY PRODUCT.”
— DIANA MOUNTER // DESIGN SYSTEMS LEAD // GITHUB
Slide 84
Slide 84 text
MEDIUM.COM/EIGHTSHAPES-LLC/TEAM-MODELS-FOR-SCALING-A-DESIGN-SYSTEM-2CF9D03BE6A0
Slide 85
Slide 85 text
a solitary model sees a one team make
a system available, but with efforts focused
primarily on that team’s needs
TEAM MODEL #1
SOLITARY
VIA TEAM MODELS FOR SCALING A
DESIGN SYSTEM BY NATHAN CURTIS
Slide 86
Slide 86 text
a single, central design team produces
and supports a system used by others
as a part of their job
TEAM MODEL #2
CENTRALIZED
VIA TEAM MODELS FOR SCALING A
DESIGN SYSTEM BY NATHAN CURTIS
Slide 87
Slide 87 text
designers from multiple product teams
decide on the system together
TEAM MODEL #3
FEDERATED
VIA TEAM MODELS FOR SCALING A
DESIGN SYSTEM BY NATHAN CURTIS
Slide 88
Slide 88 text
MEDIUM.COM/SALESFORCE-UX/THE-SALESFORCE-TEAM-MODEL-FOR-SCALING-A-DESIGN-SYSTEM-D89C2A2D404B
Slide 89
Slide 89 text
design system informs product design
product design informs design system
OUR MODEL
CYCLICAL
SALESFORCE TEAM MODEL FOR
SCALING A DESIGN SYSTEM
Slide 90
Slide 90 text
DO YOUR RESEARCH
Slide 91
Slide 91 text
BLOGS.ADOBE.COM/CREATIVECLOUD/BUILDING-EMPOWERING-STYLE-GUIDES-WITH-PRACTICAL-RESEARCH
Slide 92
Slide 92 text
HAVE A CLEAR VISION
TO ALIGN EFFORTS
Slide 93
Slide 93 text
“THE MORE DECISIONS YOU PUT
OFF, & THE LONGER YOU DELAY
THEM, THE MORE EXPENSIVE
THEY BECOME.”
— CRAIG VILLAMOR // VP PRODUCT EXPERIENCE // APPDYNAMICS
Slide 94
Slide 94 text
BRING EVERYONE TOGETHER
AROUND A SINGLE GOAL
Slide 95
Slide 95 text
No content
Slide 96
Slide 96 text
DRIVE DESIGN DECISIONS
WITH DESIGN PRINCIPLES
Slide 97
Slide 97 text
CLARITY
Eliminate ambiguity. Enable people to see,
understand, and act with confidence.
Slide 98
Slide 98 text
EFFICIENCY
Streamline and optimize workflows.
Intelligently anticipate needs to help
people work better, smarter, and faster.
Slide 99
Slide 99 text
CONSISTENCY
Create familiarity and strengthen
intuition by applying the same solution
to the same problem.
Slide 100
Slide 100 text
BEAUTY
Demonstrate respect for people’s time
and attention through thoughtful and
elegant craftsmanship.
Slide 101
Slide 101 text
LISTS IN PRIORITY ORDER
Slide 102
Slide 102 text
> CLARITY
> EFFICIENCY
> CONSISTENCY
> BEAUTY
Slide 103
Slide 103 text
PRINCIPLES > STANDARDS
Slide 104
Slide 104 text
EVANGELIZE & ALIGN
Slide 105
Slide 105 text
SALESFORCE.COM/BLOG/2013/04/HOW-TO-CREATE-ALIGNMENT-WITHIN-YOUR-COMPANY.HTML
Slide 106
Slide 106 text
V2MOM
Vision
Values
Methods
Obstacles
Measures
What you want to do
What’s most important about that vision
How you get the job done
What challenges, problems, and issues might stand in the way
How you know when you’ve succeeded
Slide 107
Slide 107 text
UI INVENTORY
Slide 108
Slide 108 text
ALISTAPART.COM/ARTICLE/FROM-PAGES-TO-PATTERNS-AN-EXERCISE-FOR-EVERYONE
Slide 109
Slide 109 text
No content
Slide 110
Slide 110 text
SKETCH USER FLOWS
Slide 111
Slide 111 text
DOCS.GOOGLE.COM/PRESENTATION/D/1GQFMIDV_NQKI36FXAWD3WTJL5-JV-GHL7XVD2FVEL0M
BY BRAD FROST
Slide 112
Slide 112 text
STANDARDIZE & CONSOLIDATE
Slide 113
Slide 113 text
SPECIAL SNOWFLAKES
Slide 114
Slide 114 text
DOCUMENT,
DOCUMENT, DOCUMENT
Slide 115
Slide 115 text
“IF YOU DON’T DOCUMENT
SOMETHING, IT DOESN’T EXIST.”
— MIRIAM SUZANNE // FOUNDER // ODDBIRD
Slide 116
Slide 116 text
EMPOWER DESIGNERS
& DEVELOPERS
Slide 117
Slide 117 text
“…THE REAL PRODUCT/DELIVERABLE
IS THE ABILITY TO USE YOUR
COMPONENT LIBRARY.
THIS MEANS DOCUMENTATION
IS PARAMOUNT…”
— UNA KRAVETS // UI ENGINEER // DIGITAL OCEAN
Slide 118
Slide 118 text
primaries
neutrals
secondaries
COLOR
Slide 119
Slide 119 text
neutrals
VISUAL MESSAGING
Slide 120
Slide 120 text
neutrals
VISUAL HIERARCHY
Slide 121
Slide 121 text
standards-compliant markup
keyboard navigation
appropriate use of color
accessible forms
described images & icons
ACCESSIBILITY
Slide 122
Slide 122 text
“WHEN ACCESSIBILITY ISN'T BAKED IN…
[IT’S LIKE] MAKING MUFFINS
[& FORCING] BLUEBERRIES INTO
THE MUFFINS…
…THEY’RE NOT REALLY THE SAME…
YES, YOU MAY HAVE AN ACCESSIBLE
SYSTEM, BUT IT NOT A GOOD SYSTEM.”
— CORDELIA MCGEE-TUBB // ACCESSIBILITY ENGINEER // DROPBOX
Slide 123
Slide 123 text
cultural significance & color
no flags to represent languages
text expansion
separate labels from form fields
capitalization
LOCALIZATION
Slide 124
Slide 124 text
RED = DOWN
Slide 125
Slide 125 text
RED = UP
Slide 126
Slide 126 text
LOTS OF
PLATFORMS & DEVICES
Slide 127
Slide 127 text
HOW DO WE SCALE DESIGN ACROSS
OUR ECOSYSTEM AND ALL ITS
PLATFORMS & DEVICES?
Slide 128
Slide 128 text
HOW DO WE MAKE FUTURE VISUAL
DESIGN CHANGES FASTER?
Slide 129
Slide 129 text
HOW DO WE KEEP OUR DESIGN
SYSTEM AGNOSTIC?
Slide 130
Slide 130 text
SINGLE SOURCE OF TRUTH
Slide 131
Slide 131 text
CSS Preprocessors introduced
Variables in CSS for better consistency,
efficiency, & maintainability.
SASS, LESS, STYLUS, ETC.
Slide 132
Slide 132 text
No content
Slide 133
Slide 133 text
DESIGN TOKENS
Slide 134
Slide 134 text
“DESIGN TOKENS ARE DESIGN
DECISIONS PROPAGATED
THROUGH A SYSTEM.”
— NATHAN CURTIS // FOUNDER // EIGHTSHAPES
Slide 135
Slide 135 text
“DESIGN TOKENS ARE AN
ABSTRACTION FOR EVERYTHING
IMPACTING THE VISUAL DESIGN
OF AN APP/PLATFORM”
— SÖNKE ROHDE, VP, UX ENGINEERING, SALESFORCE
Slide 136
Slide 136 text
NO MORE HARD-CODED VALUES
Slide 137
Slide 137 text
No content
Slide 138
Slide 138 text
THEO
Open source tool for generating
Design Tokens
Slide 139
Slide 139 text
DESIGN TOKENS CONVERTED TO
Lightning
Sass
Less
Stylus
JSON (iOS)
XML (Android)
style guide
color swatches
Slide 140
Slide 140 text
.ASE
Adobe Photoshop
Adobe Illustrator
Adobe InDesign
.CLR
other design apps on Mac
COLOR SWATCHES
Slide 141
Slide 141 text
No content
Slide 142
Slide 142 text
No content
Slide 143
Slide 143 text
No content
Slide 144
Slide 144 text
APPLY DESIGN DECISIONS
WITH CONFIDENCE
Slide 145
Slide 145 text
NO PRODUCT TOO LARGE,
NO PRODUCT TOO SMALL
Slide 146
Slide 146 text
No content
Slide 147
Slide 147 text
“JUST BECAUSE SOMETHING IS
HARD DOESN’T MEAN IT’S NOT
WORTH PURSUING…
IT’S OUR JOB TO SOLVE THOSE
PROBLEMS. AFTER ALL, WE’RE IN
THE INTERFACE BUSINESS.
— BRAD FROST // WEB DESIGNER // ATOMIC DESIGN AUTHOR
Slide 148
Slide 148 text
KEEP THE MOMENTUM GOING
Slide 149
Slide 149 text
A DESIGN SYSTEM IS
NOT A SIDE PROJECT
Slide 150
Slide 150 text
ZOMBIE
STYLE GUIDES
Slide 151
Slide 151 text
IT MUST BE LIVING
Slide 152
Slide 152 text
A DESIGN SYSTEM IS A PRODUCT
GOOD PRODUCTS
REQUIRE GOOD SUPPORT
Slide 153
Slide 153 text
BROWN BAG LUNCHES
ADVISORY BOARD
WORK CHAT
TOWN HALLS
DOCUMENT. DOCUMENT. DOCUMENT.
Slide 154
Slide 154 text
SUPPORT YOUR
NON-CODING DESIGNERS
Slide 155
Slide 155 text
MATERIAL.GOOGLE.COM/RESOURCES/STICKER-SHEETS-ICONS.HTML
Slide 156
Slide 156 text
Endeavor
Science Blue
Azure
Biscay
Midnight Blue
Deep Cove Kasmir
Cadet Blue
Koromiko
Flush Mahogany Salem
Emerald
Geyser
Stream
Link Water
White
C O L O R P A L E T T E
The quick brown fox jumps over the lazy dog.
Base
The quick brown fox jumps over the lazy dog.
Body Small
The quick brown fox jumps over the lazy dog.
Heading Large
The quick brown fox jumps over the lazy dog.
Heading Medium
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Heading Small
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
Heading Label
Heading Label Normal
Aa
LIGHT
Aa
REGULAR
Aa
BOLD
Salesforce Sans
T Y P O G R A P H Y
D E S I G N S Y S T E M U I K I T
W I N T E R ’ 1 7
LIGHTNINGDESIGNSYSTEM.COM/DOWNLOADS
Slide 157
Slide 157 text
Mark Stage as Complete
Unqualified Nurturing Closed
Wizard
NAVIGATION ACTIONS COMPACT LAYOUT REVIEW INVITE
Sales Path Coach Discussion Feed
Comment
Share
Placeholder Text
Write a comment…
Placeholder Text
T A B S
ITEM TWO ITEM THREE
ITEM ONE
Placeholder Text
ITEM ONE ITEM TWO ITEM THREE
Placeholder Text
T I L E S
Salesforce UX
26 Members
T R E E S
TREE GROUP HEADER
Placeholder Text
Placeholder Text
Placeholder Text
Placeholder Text
S P I N N E R S
small medium large
brand small brand medium brand large
LIGHTNINGDESIGNSYSTEM.COM/DOWNLOADS
Slide 158
Slide 158 text
No content
Slide 159
Slide 159 text
No content
Slide 160
Slide 160 text
COMING SOON BY @MBIANCHI27
Slide 161
Slide 161 text
“PATTERNS ARE NOT DOGMA.
THEY CAN CHANGE & ADAPT.”
— CLAUDINA SARAHE // DIRECTOR, FRONT END // CASPER
Slide 162
Slide 162 text
“MUSIC SETS EXPECTATIONS
AND MEETS THEM.
COMEDY SETS EXPECTATIONS
AND BREAKS THEM.”
— ESPEN BRUNBORG // COFOUNDER // PRIMATE
Slide 163
Slide 163 text
DESIGN IS
Fast
Universal
Intuitive
Invisible
User-centric
Scientific
Slow
Individual
Surprising
Impressive
Visionary
Artistic
THE SECRET LIFE OF COMEDY
BY ESPEN BRUNBORG
Slide 164
Slide 164 text
“BE REGULAR AND ORDERLY IN
YOUR LIFE, SO THAT YOU MAY
BE VIOLENT AND ORIGINAL IN
YOUR WORK.”
— GUSTAVE FLAUBERT // NOVELIST
Slide 165
Slide 165 text
LIGHTNINGDESIGNSYSTEM.COM
Slide 166
Slide 166 text
OPEN SOURCE AT GITHUB.COM/SALESFORCE-UX
Slide 167
Slide 167 text
DESIGNSYSTEMS.HEROKUAPP.COM
Slide 168
Slide 168 text
CLARITYCONF.COM
Slide 169
Slide 169 text
THANKS!
@JINA