Building Design Systems

Goals and Challenges

• With design systems, we want to enable product

teams to get to consistent results—faster:

• One solution for one component; no duplicates.

• Synchronizing all designers and product teams.
• Shared vocabulary to reduce communication issues.
• Easier testing, debugging and QA on component level.
• Faster iterations with established design patterns.
• Future-proof base for extensions and refinements.
 • One solution for one component; no duplicates.
• Synchnizing all designers and product teams.
• Shared vocabulary to reduce communication issues.
• Easier testing, debugging and QA on component level.
• Faster iterations with established design patterns.
• Future-proof base for extensions and refinements.

• The point of a design system is extensibility. 


Style guides increase in value over time. (Ideally.)
• The point of a design system is extensibility. 

Style guides increase in value over time. (Ideally.)

• …unless they are difficult to use or out-of-date. 


It happens because they require too much effort.
• The point of a design system is extensibility. 

Style guides increase in value over time. (Ideally.)

• …unless they are difficult to use or out-of-date. 


It happens because they require too much effort.

• Let’s find a strategy for building maintainable and

scalable design systems for product teams, within
a reasonable timeframe.
“
In a working design system, the

time savings at the second use of an
existing pattern are much larger
than the effort to introduce the
pattern in the first place. The design
system won’t work if the effort is
much bigger, or the pattern library is
getting out-of-date very quickly.


— Wolf Brüning, Otto.de


http://www.produktbezogen.de/bauanleitung-pattern-library-1/
• Common challenges with design systems

root in technical or organizational issues:

• Architecting the pattern library.

Finding, extracting, grouping and naming modules.

• Building the pattern library.

A strategy and tooling for building components.

• Dealing with maintenance.

Keeping all the assets up-to-date (PSD/CSS/PDF).

• Team workflow issues.

Responsibilities and ownership for updates.
• Common challenges with design systems

root in technical or organizational issues:

• Architecting the pattern library.

Finding, extracting, grouping and naming modules.

• Building the pattern library.

A strategy and tooling for building components.

• Dealing with maintenance.

Keeping all the assets up-to-date (PSD/CSS/PDF).

• Team workflow issues.

Responsibilities and ownership for updates.
• Common challenges with design systems

root in technical or organizational issues:

• Architecting the pattern library.

• Building the pattern library.
• Dealing with maintenance.
• Team workflow issues.

• A common way to organize a design system is by

following the atomic design approach.
“
Atomic design doesn’t work well.

Re-usable components can be used
in many different but similar ways. It
leaves room for interpretation. This
opens the door for all kinds of
disjointed experiences and makes
the system harder to maintain.


— Karri Saarinen, AirBnB


http://airbnb.design/co-creating-experiences-with-our-community/
 Beyond Atomic Design

• Having a shared understanding of building blocks

helps, but they need context to be used effectively.

• Pattern library isn’t the end game. It shines when


internal teams use it to extend the product.
• Show examples. The team should know how to apply
patterns in appropriate and meaningful ways.

• The context exists on the most concrete levels of

atomic design — applications and features.
 Beyond Atomic Design

• Having a shared understanding of building blocks

helps, but they need context to be used effectively.

• Pattern library isn’t the end game. It shines when


internal teams use it to extend the product.
• Show examples. The team should know how to apply
patterns in appropriate and meaningful ways.

• The context exists on the most concrete levels of

atomic design— applications and features.
• The context exists on the most concrete levels of
atomic design— applications and features.

• Applications (accounting, asset management)


Case studies documenting applications of the system.

• Features (analytics, data analysis)


Interface screens that allow users to accomplish a task.
• The context exists on the most concrete levels of
atomic design— applications and features.
• The context exists on the most concrete levels of
atomic design— applications and features.

• Applications (accounting, asset management)


Case studies documenting applications of the system.

• Features (analytics, data analysis)


Interface screens that allow users to accomplish a task.

• Templates (dashboard, cards, widgets)


Patterns that deal mostly with layout.

• Components (data tables, range pickers)


Patterns that deliver complex interactions.

• Basics & Principles (atoms, animation, truncating text)


General, simple interaction patterns and principles.
 Architecting The PL

• The general approach for building pattern

libraries is linear and straightforward:

• Audit the design with an interface inventory (native?),

• Cut-up workshop: identify, group and name modules,
• Art boards: put old/new flows on the wall,
• Set up foundation first: type, colors, icons, spacing, IA.
• Organisms: proceed with advanced components,
• Lean PL first: add only most essential modules first,
• Family of modules: refine relationships, regroup items.
• Design assets: sync Sketch/PSD files via Dropbox.
“
We collected components in a
master Sketch file. After a week or
two we began to see huge leaps in
productivity by using the library
when iterating on designs…


— Karri Saarinen, AirBnB


http://airbnb.design/co-creating-experiences-with-our-community/
“
…One day, while putting together a
last-minute prototype, our team was
able to create nearly 50 screens
within just a few hours by using the
framework our library provided.


— Karri Saarinen, AirBnB


http://airbnb.design/co-creating-experiences-with-our-community/
 Architecting The PL

• The general approach for building pattern

libraries is linear and straightforward:

• Audit the design with an interface inventory (native?),

• Cut-up workshop: identify, group and name modules,
• Art boards: put old/new flows on the wall,
• Set up foundation first: type, colors, icons, spacing, IA.
• Organisms: proceed with advanced components,
• Lean PL first: add only most essential modules first,
• Family of modules: refine relationships, regroup items.
• Design assets: sync Sketch/PSDs via Github/Dropbox.
 Architecting The PL

• The general approach for building pattern

libraries is linear and straightforward:

• A•design
Audit pattern usually
the design contains
with an interfaceainventory
name, (native?),
• Cut-up
context, workshop:
problem, identify, group
solutions, andpatterns.
related name modules,
• Art boards: put old/new flows on the wall,
• Set up foundation first: type, colors, icons, spacing, IA.
• Organisms: proceed with advanced components,
• Lean PL first: add only most essential modules first,
• Family of modules: refine relationships, regroup items.
• Design assets: sync Sketch/PSD files via Dropbox.
• The general approach for building pattern
libraries is linear and straightforward:

• A design pattern usually contains a name,

context, problem, solutions, related patterns.

• Usually
• Audit
components
the design
areancut
with
out by inventory,
interface
appearance.
Wouldn’t it be more useful to sort by function?
• A design pattern usually contains a name,
context, problem, solutions, related patterns.

• Usually components are cut out by appearance.

Wouldn’t it be more useful to sort by function?

• Basically
• Audit
it means
the design
isolating
with an
a component
interface
and
inventory,
looking into its semantics: function and name.
• Basically it means isolating a component and
looking into its semantics: function and name.

• Names shouldn’t be descriptive.

E.g. not ‘shiny-button’, ‘big-button’, ‘red-headline’.

•• Names shouldn’t
Audit the design contain
with anreferences
interface to context or location.
inventory,
E.g. not ‘button-footer’, ‘sidebar-navigation’.

• City-block-sizes could define a family of modules.

Pick a standard size (100) and define variations of it.

• Base names on their global function.

Focus on the content within the entire system, not page.
• Basically it means isolating a component and
looking into its semantics: function and name.

• Things that behave the same should look the same.

Different things look different. Naming reflects that.

•• Would component
Audit the keepan
design with theinterface
name in various contexts?
inventory,
With very short/very lengthy names, small/large images?

• Not all components are created equal.

Focus on components that repeat often and refine them.

• No obvious name? Rethink the component entirely.

Maybe its function is overloaded or too diluted.
“
It’s common to think that every
component in every variation has to
be properly documented but it just
bloats up the library. A pattern is a
solution to a problem that’s repeated
in different contexts (with different
content). Headers and footers
shouldn’t be there, for example.


— Wolf Brüning, Otto.de


http://www.produktbezogen.de/bauanleitung-pattern-library-2-die-perfekte-loesung/
• Common challenges with design systems

root in technical or organizational issues:

• Architecting the pattern library.

Finding, extracting, grouping and naming modules.

• Building the pattern library.

A strategy and tooling for building components.

• Dealing with maintenance.

Keeping all the assets up-to-date (PSD/CSS/PDF).

• Team workflow issues.

Responsibilities and ownership for updates.
 Building A Pattern Library

• PLs usually have many stakeholders: designers/devs,

QA, managers, external agencies, subsidiaries.

• To keep a library up-to-date, we need to provide

value for everybody involved — in a single instance.

• So we have to combine brand experience guide,

visual design samples and code snippets in one PL.
 Building A Pattern Library

• The general approach for building pattern

libraries is linear and straightforward:

• Organize the code base by encapsulated modules,

• Extend modules with BEM-convention,
• Living styleguide: the PL is generated automatically,
• Augment context: the code is extended with notes,
• Slow rollout: first release has only critical modules,
• Same codebase: CSS/JS are shared by PL and live site,
• Pattern Library API: avoid PL decay with remote teams.
 Building A Pattern Library

• On an enterprise level, it’s useful to identify shared

attributes across all products, both web and native.

• Design tokens are shared across products using a

JSON object. Theo outputs code in all formats:
• JSON > Salesforce’s special internal CSS syntax
• JSON > Sass
• JSON > LESS/Stylus
• JSON > iOS
• JSON > Android
 Modularising CSS

• “Because these pieces of code [can] both contain the

same data, they should both be the same component.”

• “Components should be data-agnostic. Design a

structure/pattern that you can fill with any data.”
Image here
 The same HTML!

Image here
• Common challenges with design systems

root in technical or organizational issues:

• Abstract based on appearance.

Don’t build based on content but visual patterns.

• Don’t tie into use cases.

Don’t include layout or location in component styles.

• Abstract any one-off requests into global options.

Instead of polluting a family of modules, isolate one-offs.

• Team workflow issues.

Responsibilities and ownership for updates.
 Modularising UIs

Content vs. Context

<!-- Incorrect -->


<div class="masthead">



<h1 class="masthead__title">...</h1>

<a href="#" class="masthead__btn">...</a>



</div>
 Modularising UIs

Content vs. Context

<!-- Correct -->


<div class="masthead">

<div class="masthead__content">

<h1>...</h1>

<a href="#" class="btn">...</a>

</div>



</div>
 Selectors

Namespaces

“ I don’t know what this does. I don’t know

where else it’s used. I don’t know if I can
delete it. I don’t know if I can change it. I
don’t know if I can use it elsewhere. I
don’t know anything!