We are no longer designing pages, we are now
designing complex systems of components. How can we design, build and maintain consistent and coherent user interfaces?
The speech by Roberto Falcone about Design Systems and Atomic Design @ MilanUXBookClub.
Divide et Impera. Why and how to build a Design System
1. 10th April, 2018M i k a m a i M i l a n o
Divide et impera
Why and how to build a Design System
R O B E R T O F A L C O N E
2. 2
Roberto “Bob” Falcone
robertofalcone
// Lead Experience Designer @ Musement
// Former Experience Designer @ Sketchin
// Visiting Professor @ PoliDesign
// Visiting Professor @ TAG Innovation School
// Member of the Jury @ CSS Design Awards
// Founder @ UXers
Milan UX Book Club
Experience Designer
robertofalcone.it
3. 3Milan UX Book ClubD i v i d e e t i m p e r a .
@robertofalcone
5. 5
Design Systems
Atomic Design
Building a Design System
01.
02.
03.
Milan UX Book ClubD i v i d e e t i m p e r a .
Divideetimpera.
Myths of Design Systems
Case Studies
04.
05.
Why and how to build a Design System
6. 6Milan UX Book Club
Design
Systems
D i v i d e e t i m p e r a .
7. 7Milan UX Book ClubD i v i d e e t i m p e r a .
Design
Systems
Everywhere!
9. 9Milan UX Book Club
Onceuponatime…
D i v i d e e t i m p e r a .
There were static web“pages”
10. 1 0Milan UX Book ClubD i v i d e e t i m p e r a .
11. 1 1Milan UX Book Club
DE
VICES
FRAG
ME
NTATION
D i v i d e e t i m p e r a .
12. 1 2
Stephen Hay
«We are no longer designing pages, we are now
designing complex systems of components».
Milan UX Book ClubD i v i d e e t i m p e r a .
Principal UX Design Lead @catawiki
13. 1 3
How can we design, build and
maintain consistent and
coherent user interfaces?
TOPIC
Milan UX Book ClubD i v i d e e t i m p e r a .
14. 1 4Milan UX Book ClubD i v i d e e t i m p e r a .
DesignSystems
15. 1 5D i v i d e e t i m p e r a . Milan UX Book Club
Four Books of
Architecture
Palladio , 1570
16. 1 6D i v i d e e t i m p e r a . Milan UX Book Club
New York City
Transit Authority
Graphics
Standards
Manual
Massimo Vignelli and Bob Noorda - 1970
17. 1 7D i v i d e e t i m p e r a . Milan UX Book Club
1975
NASA
Standard
Manual
18. 1 8D i v i d e e t i m p e r a . Milan UX Book Club
Yahoo!
Pattern
Library
2009
19. 1 9D i v i d e e t i m p e r a . Milan UX Book Club
Google
Material
Design
2014
20. 2 0Milan UX Book Club
Atomic
Design
D i v i d e e t i m p e r a .
21. 2 1Milan UX Book ClubD i v i d e e t i m p e r a .
22. 2 2Milan UX Book Club
ATOMICDESIGN
D i v i d e e t i m p e r a .
2013
23. 2 3Milan UX Book ClubD i v i d e e t i m p e r a .
24. 2 4Milan UX Book Club
ATOMS
D i v i d e e t i m p e r a .
25. 2 5Milan UX Book ClubD i v i d e e t i m p e r a .
26. 2 6D i v i d e e t i m p e r a . Milan UX Book Club
MOLECULES
27. 2 7D i v i d e e t i m p e r a . Milan UX Book Club
ORGANISMS
28. 2 8D i v i d e e t i m p e r a . Milan UX Book Club
ECOSYSTEMS/
TEMPLATES
29. 2 9D i v i d e e t i m p e r a . Milan UX Book Club
ENVIROMENTS /
PAGES
30. 3 0Milan UX Book ClubD i v i d e e t i m p e r a .
31. 3 1
Brad Frost
«One of the biggest advantages atomic design provides is
the ability to quickly shift between abstract and concrete».
Milan UX Book ClubD i v i d e e t i m p e r a .
Author of “Atomic Design”
32. 3 2Milan UX Book ClubD i v i d e e t i m p e r a .
33. 3 3Milan UX Book ClubD i v i d e e t i m p e r a .
34. 3 4Milan UX Book Club
Buildinga
DesignSystem
D i v i d e e t i m p e r a .
35. 3 5Milan UX Book ClubD i v i d e e t i m p e r a .
36. 3 6Milan UX Book ClubD i v i d e e t i m p e r a .
GE Predix
37. 3 7Milan UX Book ClubD i v i d e e t i m p e r a .
Badoo Cosmos
38. 3 8Milan UX Book Club
No
“Onesizefitsall”
D i v i d e e t i m p e r a .
Public design systems should be learned from, not copied
39. 3 9Milan UX Book Club
How we can design and build
our own designsystem?
D i v i d e e t i m p e r a .
40. 4 0Milan UX Book ClubD i v i d e e t i m p e r a .
Divideet
impera
Divide a complex job into small parts
and rule the whole picture
41. 4 1Milan UX Book ClubD i v i d e e t i m p e r a .
42. 4 2Milan UX Book ClubD i v i d e e t i m p e r a .
43. 4 3
# 1.
Milan UX Book Club
Interface
InventoryAudit
D i v i d e e t i m p e r a .
44. 4 4Milan UX Book ClubD i v i d e e t i m p e r a .
45. 4 5Milan UX Book ClubD i v i d e e t i m p e r a .
46. 4 6
# 2.
Milan UX Book Club
Define
principles
D i v i d e e t i m p e r a .
47. 4 7Milan UX Book ClubD i v i d e e t i m p e r a .
48. 4 8
#3.
Milan UX Book Club
Define a
nameconvention
D i v i d e e t i m p e r a .
49. 4 9D i v i d e e t i m p e r a . Milan UX Book Club
NAME
CONVENTION
‣ folders
‣ projects
‣ files
‣ artboards
‣ layers
‣ symbols
‣ states
‣ instances
‣ styles
50. 5 0Milan UX Book ClubD i v i d e e t i m p e r a .
51. 5 1Milan UX Book ClubD i v i d e e t i m p e r a .
52. 5 2Milan UX Book ClubD i v i d e e t i m p e r a .
53. 5 3
# 4.
Milan UX Book Club
Create
documentation
D i v i d e e t i m p e r a .
54. 5 4Milan UX Book ClubD i v i d e e t i m p e r a .
55. 5 5Milan UX Book Club
COLORI GRIGLIE TIPOGRAFIA UI ELEMENTS
D i v i d e e t i m p e r a .
UITOOLKIT
56. 5 6
# 5.
Milan UX Book Club
Define a
colorpalette
D i v i d e e t i m p e r a .
57. 5 7
Map also lighter and
darker variations of
the main brand color
Lighter variations are obtained by increasing
the brightness and lowering the saturation
compared to the main color.
Lighter variations
Darker variations are obtained by lowering the
brightness and increasing the saturation
compared to the main color.
Darker variations
Milan UX Book ClubD i v i d e e t i m p e r a .
58. 5 8
#6.
Milan UX Book Club
Set up a
gridsystem
D i v i d e e t i m p e r a .
59. 5 9Milan UX Book ClubD i v i d e e t i m p e r a .
60. 6 0
#7.
Milan UX Book Club
Define
typography
D i v i d e e t i m p e r a .
61. 6 1Milan UX Book ClubD i v i d e e t i m p e r a .
62. 6 2
#8.
Milan UX Book Club
Design
UIPatterns
D i v i d e e t i m p e r a .
63. 6 3Milan UX Book ClubD i v i d e e t i m p e r a .
64. 6 4
#9.
Milan UX Book Club
Establish a
ComponentsRatio
D i v i d e e t i m p e r a .
65. 6 5Milan UX Book ClubD i v i d e e t i m p e r a .
66. 6 6Milan UX Book ClubD i v i d e e t i m p e r a .
«Belikewater,
myfriend»
Choose a device-agnostic
Design Components ratio
67. 6 7Milan UX Book ClubD i v i d e e t i m p e r a .
68. 6 8
#10.
Milan UX Book Club
Compose
Templates
D i v i d e e t i m p e r a .
69. 6 9Milan UX Book ClubD i v i d e e t i m p e r a .
70. 7 0
#11.
Milan UX Book Club
Build
Pages
D i v i d e e t i m p e r a .
71. 7 1Milan UX Book ClubD i v i d e e t i m p e r a .
72. 7 2
#12.
Milan UX Book Club
Provide a shared
SourceofTruth
D i v i d e e t i m p e r a .
73. 7 3Milan UX Book ClubD i v i d e e t i m p e r a .
74. 7 4D i v i d e e t i m p e r a . Milan UX Book Club
Advantages of
using a Design
System
✓ UI coherence
✓ Common and shared language
✓ Greater maintainability of the project
✓ Rapid prototyping and faster iterations
75. 7 5Milan UX Book ClubD i v i d e e t i m p e r a .
76. 7 6Milan UX Book ClubD i v i d e e t i m p e r a .
77. 7 7Milan UX Book Club
MythsofDesign
Systems
D i v i d e e t i m p e r a .
78. 7 8
Myth #1
Milan UX Book Club
ADesignSystem
istoolimiting
D i v i d e e t i m p e r a .
With a design system, new solutions can be created and fed back
into the system making improvements available to everyone.
Reality
79. 7 9
Myth #2
Milan UX Book Club
ADesignSystem
leadstoalossofcreativity
D i v i d e e t i m p e r a .
The components of a design system are interdependent, so when a
change is made in one location, the change will be inherited
throughout the whole system.
Reality
80. 8 0
Myth #3
Milan UX Book Club
Onceadesignsystemis
built,theworkiscomplete.
D i v i d e e t i m p e r a .
A design system is living, meaning it will require ongoing
maintenance and improvements as needs arise.
Reality
81. 8 1
Myth #4
Milan UX Book Club
ADesignSystem
consistsofaStyleGuide
D i v i d e e t i m p e r a .
Simply having a pattern library of elements to choose from, allow
the team to keep consistency, but it doesn’t preclude from building
interfaces far from the product or the concepts behind it.
Reality
82. 8 2Milan UX Book ClubD i v i d e e t i m p e r a .
83. 8 3Milan UX Book ClubD i v i d e e t i m p e r a .
84. 8 4Milan UX Book ClubD i v i d e e t i m p e r a .
85. 8 5Milan UX Book Club
CaseStudies
D i v i d e e t i m p e r a .
86. 8 6D i v i d e e t i m p e r a . Milan UX Book Club
SPOTIFY
GLUE
GLUE (Global Language for a Unified Experience)
87. 8 7Milan UX Book ClubD i v i d e e t i m p e r a .
88. 8 8D i v i d e e t i m p e r a . Milan UX Book Club
SPOTIFY
GLUE
PRINCIPLES
89. 8 9Milan UX Book ClubD i v i d e e t i m p e r a .
90. 9 0D i v i d e e t i m p e r a . Milan UX Book Club
AIRBNB
DESIGN
LANGUAGE
SYSTEM
91. 9 1Milan UX Book ClubD i v i d e e t i m p e r a .
92. 9 2D i v i d e e t i m p e r a . Milan UX Book Club
AirBnb Design
Language System
Principles
Unified: Each piece is part of a greater whole and
should contribute positively to the system at scale.
There should be no isolated features or outliers.
Universal: Airbnb is used around the world by a wide
global community. Our products and visual language
should be welcoming and accessible.
Iconic: We’re focused when it comes to both design
and functionality. Our work should speak boldly and
clearly to this focus.
Conversational: Our use of motion breathes life into
our products, and allows us to communicate with users
in easily understood ways.
93. 9 3Milan UX Book ClubD i v i d e e t i m p e r a .
94. 9 4Milan UX Book ClubD i v i d e e t i m p e r a .
95. 9 5Milan UX Book ClubD i v i d e e t i m p e r a .
96. 9 6Milan UX Book ClubD i v i d e e t i m p e r a .
97. 9 7Milan UX Book ClubD i v i d e e t i m p e r a .
98. 9 8Milan UX Book ClubD i v i d e e t i m p e r a .
99. 9 9
Alex Schleifer
«Here’s the simple truth: you can’t innovate on products
without first innovating the way you build them»
Milan UX Book ClubD i v i d e e t i m p e r a .
VP of Design @ AirBnb
100. 1 0 0D i v i d e e t i m p e r a . Milan UX Book Club
MUSEMENT
ATOMIC
DESIGN
101. 1 0 1Milan UX Book ClubD i v i d e e t i m p e r a .
A Journey to a Relationship
We want to build a relationship
with the user instead of selling
him just a ticket. We want to
support him in the entirety of the
experience journey.
102. 1 0 2Milan UX Book ClubD i v i d e e t i m p e r a .
103. 1 0 3Milan UX Book ClubD i v i d e e t i m p e r a .
104. 1 0 4Milan UX Book ClubD i v i d e e t i m p e r a .
105. 1 0 5Milan UX Book ClubD i v i d e e t i m p e r a .
106. 1 0 6Milan UX Book ClubD i v i d e e t i m p e r a .
107. 1 0 7Milan UX Book ClubD i v i d e e t i m p e r a .
108. Milan UX Book ClubD i v i d e e t i m p e r a . 1 0 8
109. Milan UX Book ClubD i v i d e e t i m p e r a . 1 0 9
110. Milan UX Book ClubD i v i d e e t i m p e r a . 1 1 0
Agoodstartwith
AtomicDesign
111. Milan UX Book ClubD i v i d e e t i m p e r a . 1 1 1
DevTeamranfaster
thanDesignTeam
onAtomicDesign
112. Milan UX Book ClubD i v i d e e t i m p e r a . 1 1 2
113. 1 1 3
Cristian Ronzio
«Guys, we can’t keep create
exceptions to handle cases like this!»
Milan UX Book ClubD i v i d e e t i m p e r a .
Lead Front-End Architect @ Musement
114. 1 1 4
«Have you already mapped this new
UI element into the design library?»
Milan UX Book ClubD i v i d e e t i m p e r a .
Lorenzo Simone
Front-End Architect @ Musement
115. Milan UX Book ClubD i v i d e e t i m p e r a . 1 1 5
116. Milan UX Book ClubD i v i d e e t i m p e r a . 1 1 6
117. 1 1 7
«Why don’t we reuse these UI components
we already have in our design library?
Milan UX Book ClubD i v i d e e t i m p e r a .
Mattia Gatti
UI Designer @ Musement
118. Milan UX Book ClubD i v i d e e t i m p e r a . 1 1 8
119. Milan UX Book ClubD i v i d e e t i m p e r a . 1 1 9
ADesign
Systemis a
marathon,
notasprint
120. 1 2 0Milan UX Book ClubD i v i d e e t i m p e r a .
121. 1 2 1D i v i d e e t i m p e r a . Milan UX Book Club
EVOLUTION
OF MUSEMENT
DESIGN SYSTEM
✓ Loading Strategy
✓ Functional Specs
✓ Microanimations
✓ Copywriting
✓ A/B Tests
122. 1 2 2Milan UX Book Club
SKETCH
D i v i d e e t i m p e r a .
123. 1 2 3Milan UX Book Club
ZEPLIN
D i v i d e e t i m p e r a .
124. 1 2 4Milan UX Book Club
LINGO
D i v i d e e t i m p e r a .
125. 1 2 5Milan UX Book Club
ABSTRACT
D i v i d e e t i m p e r a .
126. 1 2 6D i v i d e e t i m p e r a . Milan UX Book Club
Lessons
learned
✓ We can’t force change
✓ We should learn from others
✓ We have to adapt what we learned to our context
✓ We must be prepared for failure
✓ We should keep persevering
✓ It is worth it
127. 1 2 7Milan UX Book Club
Appendix
D i v i d e e t i m p e r a .