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.

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

4. 4Milan UX Book ClubD i v i d e e t i m p e r a .

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 .

128. Google
Milan UX Book Club 1 2 8D i v i d e e t i m p e r a .

129. Dropbox
Milan UX Book Club 1 2 9D i v i d e e t i m p e r a .

130. LonelyPlanet
Milan UX Book Club 1 3 0D i v i d e e t i m p e r a .

131. MailChimp
Milan UX Book Club 1 3 1D i v i d e e t i m p e r a .

132. ShopifyPolaris
Milan UX Book Club 1 3 2D i v i d e e t i m p e r a .

133. Salesforce
Milan UX Book Club 1 3 3D i v i d e e t i m p e r a .

134. Microsoft Fluent
Milan UX Book Club 1 3 4D i v i d e e t i m p e r a .

135. bradfrost.com
Milan UX Book Club 1 3 5D i v i d e e t i m p e r a .

136. styleguides.io
Milan UX Book Club 1 3 6D i v i d e e t i m p e r a .

137. patternlab.io
Milan UX Book Club 1 3 7D i v i d e e t i m p e r a .

138. 1 3 8Milan UX Book ClubD i v i d e e t i m p e r a .

139. 1 3 9//

140. 1 4 0
Questions?
Milan UX Book ClubD i v i d e e t i m p e r a .

141. 1 4 1Milan UX Book ClubD i v i d e e t i m p e r a .
T h a n k y o u
robertofalcone
robertofalcone.it