Let's talk about Design Systems and how they could help you build better products in terms of efficiency, consistency, UX, code quality and accessibility. Summary: 1. About me 2. Why have one? 3. Design system (fundamentals) 4. How to build a design system (process) 5. Cost and value 6. Inspiration 7. Q&A

1. . 4th of December, 2018

2. SUMMARY
1. About me
2. Why have one?
3. Design system (fundamentals)
4. How to build a design system (process)
5. Cost and value
6. Inspiration
7. Q&A

4. 1. ABOUT ME
Nadal Soler
Front-end Web Developer, focused on UX
https://www.linkedin.com/in/nadalsoler/
https://twitter.com/nadalsol
https://github.com/nadalsol/

5. 1. ABOUT ME
Style Guide
& Pattern Library
CSS Framework
Pattern Library
Design System (WIP)

6. 1. ABOUT ME
VR Sites

8. 2. WHY HAVE ONE?
Recurrent problems
1. UX and code inconsistencies
2. Misunderstandings across teams
3. Less collaboration
4. Increased costs (time wasted doing repetitive tasks)
5. Slow shipping times
6. No scalability

9. 2. WHY HAVE ONE?
Main benefits
1. Efficiency
2. Consistency
3. Design and code quality
4. Accessibility

11. “A design system is a set of interconnected patterns
and shared practices, coherently organised to serve
the purposes of a digital product”.
Alla Kholmatova
Designer and writer focused on design systems
3. DESIGN SYSTEM (FUNDAMENTALS)
DEFINITIONS

12. There isn't a standard definition of "design system",
and people use the term in different ways – sometimes
interchangeably with "style guides" and "pattern libraries".
3. DESIGN SYSTEM (FUNDAMENTALS)
DEFINITIONS

13. Style guides
Brand identity documents focused on logo treatments,
corporate values and brand styles, such as colour and typography.
3. DESIGN SYSTEM (FUNDAMENTALS)
DEFINITIONS

15. Pattern libraries*
A tool to collect, store and share your design patterns,
along with the principles and guidelines for how to use them.
(*) aka “front-end style guides”, “UI libraries” or “component
libraries”.
3. DESIGN SYSTEM (FUNDAMENTALS)
DEFINITIONS

17. Going further…
“A design system is a collection of components,
styles and processes to help teams design and build
consistent user experiences — faster and better”.
Jeroen Ransijn
Design Systems Lead at Segment
3. DESIGN SYSTEM (FUNDAMENTALS)
DEFINITIONS

18. Last, but not least...
“We’re not designing pages,
we’re designing systems of components”.
Stephen Hay
Head of UX, Author of Responsive Design Workflow
3. DESIGN SYSTEM (FUNDAMENTALS)
DEFINITIONS

19. Carbon Design System
https://www.carbondesignsystem.com/
Lightning Design System
https://www.lightningdesignsystem.com/
Polaris
https://polaris.shopify.com/
Mailchimp:
https://ux.mailchimp.com/patterns
https://styleguide.mailchimp.com/
Bulb:
http://design.bulb.co.uk/
3. DESIGN SYSTEM (FUNDAMENTALS)
SOME EXAMPLES

27. 1. Atomic Design
2. Interface inventories
3. Create a Pattern Library
4. Customise patterns with settings
4. HOW TO BUILD A DESIGN SYSTEM (PROCESS)
ATOMIC DESIGN

28. Atomic design is a methodology composed of five distinct stages
working together to create interface design systems in a more
deliberate and hierarchical manner.
1. Atoms
2. Molecules
3. Organisms
4. Templates
5. Pages
4. HOW TO BUILD A DESIGN SYSTEM (PROCESS)
ATOMIC DESIGN

29. Atomic design is not a linear process.
Instead, think of the stages of atomic design as a mental model
that allows us to concurrently create final UIs and their underlying
design systems.
4. HOW TO BUILD A DESIGN SYSTEM (PROCESS)
ATOMIC DESIGN

42. Advantages of atomic design
“Atomic design provides us with a few key
insights that help us create more effective,
deliberate UI design systems”.
Brad Frost
Web designer and speaker, author of Atomic Design
4. HOW TO BUILD A DESIGN SYSTEM (PROCESS)
ATOMIC DESIGN

43. 4. HOW TO BUILD A DESIGN SYSTEM (PROCESS)
ATOMIC DESIGN
Advantages of atomic design
1. Quickly shift between abstract and concrete.
2. See interfaces broken down to their atomic elements and also
see how those elements combine together to form our final UIs.
3. Craft design systems that are tailored to the content that lives
inside them.
4. A helpful shorthand for discussing modularity with our
colleagues, and provides a much needed sense of hierarchy in
our design systems.

44. “An interface inventory is a comprehensive
collection of the bits and pieces that make up
your user interface”.
Brad Frost
Web designer and speaker, author of Atomic Design
4. HOW TO BUILD A DESIGN SYSTEM (PROCESS)
INTERFACE INVENTORIES

45. 4. HOW TO BUILD A DESIGN SYSTEM (PROCESS)
INTERFACE INVENTORIES

46. 4. HOW TO BUILD A DESIGN SYSTEM (PROCESS)
INTERFACE INVENTORIES
Some key questions
1. Which patterns should stay, which should go, and which can be
merged together?
2. What pattern names should we settle on?
3. What are the next steps to translate the interface inventory into
a living Pattern Library?

47. 4. HOW TO BUILD A DESIGN SYSTEM (PROCESS)
CREATE A PATTERN LIBRARY

48. Settings may help on developing faster, ensuring consistency and
maintainability:
1. Set a default "base-agnostic theme", to be used for all
projects in “vr-sites”.
2. Create a “_settings.scss” Sass variables file, in order to
customise the default appearance for all components.
3. Import the "base-agnostic theme" in the rest of projects,
overriding those settings with custom values.
4. HOW TO BUILD A DESIGN SYSTEM (PROCESS)
CUSTOMISE PATTERNS WITH SETTINGS

49. 4. HOW TO BUILD A DESIGN SYSTEM (PROCESS)
CUSTOMISE PATTERNS WITH SETTINGS

50. 4. HOW TO BUILD A DESIGN SYSTEM (PROCESS)
CUSTOMISE PATTERNS WITH SETTINGS

51. 4. HOW TO BUILD A DESIGN SYSTEM (PROCESS)
CUSTOMISE PATTERNS WITH SETTINGS

52. 4. HOW TO BUILD A DESIGN SYSTEM (PROCESS)
CUSTOMISE PATTERNS WITH SETTINGS

53. Settings leads to…
1. UI consistency
2. Reusable code (DRY!)
3. Fast development time
4. Easy adoption of new products
4. HOW TO BUILD A DESIGN SYSTEM (PROCESS)
CUSTOMISE PATTERNS WITH SETTINGS

55. The cost of creating a design system depends on how further do
you want to go...
1. Maturity of the product
2. Resources invested (people, time, money…)
3. Level of collaboration
4. Starting from scratch?
5. Size of the company
6. Number of projects and components
Keep in mind it’s a work in progress!
5. COST & VALUE
COST

56. 5. COST & VALUE
VALUE
1. Consistency and cohesion (better UX)
2. Speed up your team’s productivity
3. More collaborative workflow
4. Shared vocabulary
5. Helpful documentation
6. Make testing easier
7. Serve as a future-friendly foundation
8. A single source of truth for everyone
In the end is a matter of saving time and money.

57. “Teams that use the design system can focus
on what’s unique to their product instead
of reinventing common UI components.”
Jeroen Ransijn
Design Systems Lead at Segment
5. COST & VALUE
VALUE

59. 6. INSPIRATION
ARTICLES & BOOKS
ARTICLES
Building a Visual Language
by Karri Saarinen
Driving Adoption of a Design System
by Jeroen Ransijn
Introducing Bulb’s design system
by Alla Kholmatova
BOOKS
Atomic design
by Brad Frost
Design systems
by Alla Kholmatova

60. 6. INSPIRATION
GLOSSARY & PRACTICES
GLOSSARY
Design system glossary
by Bulb team
GOOD PRACTICES
Criteria for new patterns
by Bulb team
Defining patterns
by Bulb team

61. 6. INSPIRATION
TOOLS & RESOURCES
TOOLS
Astrum
Figma
Fractal
Frontify
RESOURCES
Adele
DesignSystems.com
StyleGuides.io
UI Patterns
Pattern Lab
Storybook
ZeroHeight
Check my Pattern library tools research for more details.

62. 6. INSPIRATION
THE HOLY GRAIL OF DESIGN SYSTEMS
Carbon Design System
by IBM
Evergreen
by Segment
Lightning Design System
by Salesforce
Mailchimp Pattern Library
by Mailchimp
Polaris Design System
by Shopify
Solar Design System
by Bulb

64. Feel free to ask any question.
Please join
#design-systems
SLACK CHANNEL