SlideShare una empresa de Scribd logo
1 de 141
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
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
3Milan UX Book ClubD i v i d e e t i m p e r a .
@robertofalcone
4Milan UX Book ClubD i v i d e e t i m p e r a .
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
6Milan UX Book Club
Design
Systems
D i v i d e e t i m p e r a .
7Milan UX Book ClubD i v i d e e t i m p e r a .
Design
Systems
Everywhere!
Divide et Impera. Why and how to build a Design System
9Milan UX Book Club
Onceuponatime…
D i v i d e e t i m p e r a .
There were static web“pages”
1 0Milan UX Book ClubD i v i d e e t i m p e r a .
1 1Milan UX Book Club
DE

VICES
FRAG
ME

NTATION
D i v i d e e t i m p e r a .
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
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 .
1 4Milan UX Book ClubD i v i d e e t i m p e r a .
DesignSystems
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
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
1 7D i v i d e e t i m p e r a . Milan UX Book Club
1975
NASA
Standard
Manual
1 8D i v i d e e t i m p e r a . Milan UX Book Club
Yahoo!
Pattern
Library
2009
1 9D i v i d e e t i m p e r a . Milan UX Book Club
Google
Material
Design
2014
2 0Milan UX Book Club
Atomic
Design
D i v i d e e t i m p e r a .
2 1Milan UX Book ClubD i v i d e e t i m p e r a .
2 2Milan UX Book Club
ATOMICDESIGN
D i v i d e e t i m p e r a .
2013
2 3Milan UX Book ClubD i v i d e e t i m p e r a .
2 4Milan UX Book Club
ATOMS
D i v i d e e t i m p e r a .
2 5Milan UX Book ClubD i v i d e e t i m p e r a .
2 6D i v i d e e t i m p e r a . Milan UX Book Club
MOLECULES
2 7D i v i d e e t i m p e r a . Milan UX Book Club
ORGANISMS
2 8D i v i d e e t i m p e r a . Milan UX Book Club
ECOSYSTEMS/ 

TEMPLATES
2 9D i v i d e e t i m p e r a . Milan UX Book Club
ENVIROMENTS /
PAGES
3 0Milan UX Book ClubD i v i d e e t i m p e r a .
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”
3 2Milan UX Book ClubD i v i d e e t i m p e r a .
3 3Milan UX Book ClubD i v i d e e t i m p e r a .
3 4Milan UX Book Club
Buildinga
DesignSystem
D i v i d e e t i m p e r a .
3 5Milan UX Book ClubD i v i d e e t i m p e r a .
3 6Milan UX Book ClubD i v i d e e t i m p e r a .
GE Predix
3 7Milan UX Book ClubD i v i d e e t i m p e r a .
Badoo Cosmos
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
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 .
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
4 1Milan UX Book ClubD i v i d e e t i m p e r a .
4 2Milan UX Book ClubD i v i d e e t i m p e r a .
4 3
# 1.
Milan UX Book Club
Interface
InventoryAudit
D i v i d e e t i m p e r a .
4 4Milan UX Book ClubD i v i d e e t i m p e r a .
4 5Milan UX Book ClubD i v i d e e t i m p e r a .
4 6
# 2.
Milan UX Book Club
Define
principles
D i v i d e e t i m p e r a .
4 7Milan UX Book ClubD i v i d e e t i m p e r a .
4 8
#3.
Milan UX Book Club
Define a
nameconvention
D i v i d e e t i m p e r a .
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
5 0Milan UX Book ClubD i v i d e e t i m p e r a .
5 1Milan UX Book ClubD i v i d e e t i m p e r a .
5 2Milan UX Book ClubD i v i d e e t i m p e r a .
5 3
# 4.
Milan UX Book Club
Create
documentation
D i v i d e e t i m p e r a .
5 4Milan UX Book ClubD i v i d e e t i m p e r a .
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
5 6
# 5.
Milan UX Book Club
Define a
colorpalette
D i v i d e e t i m p e r a .
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 .
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 .
5 9Milan UX Book ClubD i v i d e e t i m p e r a .
6 0
#7.
Milan UX Book Club
Define
typography
D i v i d e e t i m p e r a .
6 1Milan UX Book ClubD i v i d e e t i m p e r a .
6 2
#8.
Milan UX Book Club
Design
UIPatterns
D i v i d e e t i m p e r a .
6 3Milan UX Book ClubD i v i d e e t i m p e r a .
6 4
#9.
Milan UX Book Club
Establish a
ComponentsRatio
D i v i d e e t i m p e r a .
6 5Milan UX Book ClubD i v i d e e t i m p e r a .
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
6 7Milan UX Book ClubD i v i d e e t i m p e r a .
6 8
#10.
Milan UX Book Club
Compose
Templates
D i v i d e e t i m p e r a .
6 9Milan UX Book ClubD i v i d e e t i m p e r a .
7 0
#11.
Milan UX Book Club
Build
Pages
D i v i d e e t i m p e r a .
7 1Milan UX Book ClubD i v i d e e t i m p e r a .
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 .
7 3Milan UX Book ClubD i v i d e e t i m p e r a .
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
7 5Milan UX Book ClubD i v i d e e t i m p e r a .
7 6Milan UX Book ClubD i v i d e e t i m p e r a .
7 7Milan UX Book Club
MythsofDesign
Systems
D i v i d e e t i m p e r a .
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
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
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
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
8 2Milan UX Book ClubD i v i d e e t i m p e r a .
8 3Milan UX Book ClubD i v i d e e t i m p e r a .
8 4Milan UX Book ClubD i v i d e e t i m p e r a .
8 5Milan UX Book Club
CaseStudies
D i v i d e e t i m p e r a .
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)
8 7Milan UX Book ClubD i v i d e e t i m p e r a .
8 8D i v i d e e t i m p e r a . Milan UX Book Club
SPOTIFY
GLUE
PRINCIPLES
8 9Milan UX Book ClubD i v i d e e t i m p e r a .
9 0D i v i d e e t i m p e r a . Milan UX Book Club
AIRBNB
DESIGN

LANGUAGE

SYSTEM
9 1Milan UX Book ClubD i v i d e e t i m p e r a .
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.
9 3Milan UX Book ClubD i v i d e e t i m p e r a .
9 4Milan UX Book ClubD i v i d e e t i m p e r a .
9 5Milan UX Book ClubD i v i d e e t i m p e r a .
9 6Milan UX Book ClubD i v i d e e t i m p e r a .
9 7Milan UX Book ClubD i v i d e e t i m p e r a .
9 8Milan UX Book ClubD i v i d e e t i m p e r a .
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
1 0 0D i v i d e e t i m p e r a . Milan UX Book Club
MUSEMENT
ATOMIC 

DESIGN
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.
1 0 2Milan UX Book ClubD i v i d e e t i m p e r a .
1 0 3Milan UX Book ClubD i v i d e e t i m p e r a .
1 0 4Milan UX Book ClubD i v i d e e t i m p e r a .
1 0 5Milan UX Book ClubD i v i d e e t i m p e r a .
1 0 6Milan UX Book ClubD i v i d e e t i m p e r a .
1 0 7Milan UX Book ClubD i v i d e e t i m p e r a .
Milan UX Book ClubD i v i d e e t i m p e r a . 1 0 8
Milan UX Book ClubD i v i d e e t i m p e r a . 1 0 9
Milan UX Book ClubD i v i d e e t i m p e r a . 1 1 0
Agoodstartwith
AtomicDesign
Milan UX Book ClubD i v i d e e t i m p e r a . 1 1 1
DevTeamranfaster
thanDesignTeam
onAtomicDesign
Milan UX Book ClubD i v i d e e t i m p e r a . 1 1 2
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
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
Milan UX Book ClubD i v i d e e t i m p e r a . 1 1 5
Milan UX Book ClubD i v i d e e t i m p e r a . 1 1 6
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
Milan UX Book ClubD i v i d e e t i m p e r a . 1 1 8
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
1 2 0Milan UX Book ClubD i v i d e e t i m p e r a .
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
1 2 2Milan UX Book Club
SKETCH
D i v i d e e t i m p e r a .
1 2 3Milan UX Book Club
ZEPLIN
D i v i d e e t i m p e r a .
1 2 4Milan UX Book Club
LINGO
D i v i d e e t i m p e r a .
1 2 5Milan UX Book Club
ABSTRACT
D i v i d e e t i m p e r a .
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
1 2 7Milan UX Book Club
Appendix
D i v i d e e t i m p e r a .
Google
Milan UX Book Club 1 2 8D i v i d e e t i m p e r a .
Dropbox
Milan UX Book Club 1 2 9D i v i d e e t i m p e r a .
LonelyPlanet
Milan UX Book Club 1 3 0D i v i d e e t i m p e r a .
MailChimp
Milan UX Book Club 1 3 1D i v i d e e t i m p e r a .
ShopifyPolaris
Milan UX Book Club 1 3 2D i v i d e e t i m p e r a .
Salesforce
Milan UX Book Club 1 3 3D i v i d e e t i m p e r a .
Microsoft Fluent
Milan UX Book Club 1 3 4D i v i d e e t i m p e r a .
bradfrost.com
Milan UX Book Club 1 3 5D i v i d e e t i m p e r a .
styleguides.io
Milan UX Book Club 1 3 6D i v i d e e t i m p e r a .
patternlab.io
Milan UX Book Club 1 3 7D i v i d e e t i m p e r a .
1 3 8Milan UX Book ClubD i v i d e e t i m p e r a .
1 3 9//
1 4 0
Questions?
Milan UX Book ClubD i v i d e e t i m p e r a .
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

Más contenido relacionado

Similar a Divide et Impera. Why and how to build a Design System

The Guide To Wireframing
The Guide To WireframingThe Guide To Wireframing
The Guide To WireframingLewis Lin 🦊
 
interaction design trends 2015 _ 2016
interaction design trends 2015 _ 2016interaction design trends 2015 _ 2016
interaction design trends 2015 _ 2016Halil Eren Çelik
 
Taking your Dev Team on the UX Journey
Taking your Dev Team on the UX JourneyTaking your Dev Team on the UX Journey
Taking your Dev Team on the UX JourneyBSGAfrica
 
UX UI - Principles and Best Practices 2014-2015
UX UI - Principles and Best Practices 2014-2015UX UI - Principles and Best Practices 2014-2015
UX UI - Principles and Best Practices 2014-2015Harsh Wardhan Dave
 
UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1Lewis Lin 🦊
 
Why user experience design fails.
Why user experience design fails.Why user experience design fails.
Why user experience design fails.Patrick Mooney
 
Hackers guide to UX
Hackers guide to UXHackers guide to UX
Hackers guide to UXCyber-Duck
 
The Top 10 UX Trends for 2016
The Top 10 UX Trends for 2016The Top 10 UX Trends for 2016
The Top 10 UX Trends for 2016Idean France
 
HTML5 Meetup | Back to Basics: Wireframing & Planning
HTML5 Meetup | Back to Basics: Wireframing & PlanningHTML5 Meetup | Back to Basics: Wireframing & Planning
HTML5 Meetup | Back to Basics: Wireframing & PlanningPaul Crimi
 
StartupBus UK presentation
StartupBus UK presentationStartupBus UK presentation
StartupBus UK presentationCyber-Duck
 
Building a UX Process at Salesforce that Promotes Focus and Creativity
Building a UX Process at Salesforce that Promotes Focus and CreativityBuilding a UX Process at Salesforce that Promotes Focus and Creativity
Building a UX Process at Salesforce that Promotes Focus and Creativityuxpin
 
Designing for Interactive User Interfaces
Designing for Interactive User InterfacesDesigning for Interactive User Interfaces
Designing for Interactive User InterfacesFreerange Future
 
Designing for Interactive User Interfaces
Designing for Interactive User InterfacesDesigning for Interactive User Interfaces
Designing for Interactive User InterfacesKieran Wallis
 
Designing for Interactive User Interfaces
Designing for Interactive User InterfacesDesigning for Interactive User Interfaces
Designing for Interactive User InterfacesKieran Wallis
 
Designing Windows 8 application - Microsoft Techdays 2013
Designing Windows 8 application - Microsoft Techdays 2013Designing Windows 8 application - Microsoft Techdays 2013
Designing Windows 8 application - Microsoft Techdays 2013Markus Jönsson
 
Redesign Design (duo version)
Redesign Design (duo version)Redesign Design (duo version)
Redesign Design (duo version)matteo cavucci
 
UX Pres MIni version!
UX Pres MIni version!UX Pres MIni version!
UX Pres MIni version!Jessi Baker
 

Similar a Divide et Impera. Why and how to build a Design System (20)

The Guide To Wireframing
The Guide To WireframingThe Guide To Wireframing
The Guide To Wireframing
 
interaction design trends 2015 _ 2016
interaction design trends 2015 _ 2016interaction design trends 2015 _ 2016
interaction design trends 2015 _ 2016
 
Taking your Dev Team on the UX Journey
Taking your Dev Team on the UX JourneyTaking your Dev Team on the UX Journey
Taking your Dev Team on the UX Journey
 
UX UI - Principles and Best Practices 2014-2015
UX UI - Principles and Best Practices 2014-2015UX UI - Principles and Best Practices 2014-2015
UX UI - Principles and Best Practices 2014-2015
 
UX Workshop
UX WorkshopUX Workshop
UX Workshop
 
UX Work Shop
UX Work ShopUX Work Shop
UX Work Shop
 
UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1
 
Why user experience design fails.
Why user experience design fails.Why user experience design fails.
Why user experience design fails.
 
Hackers guide to UX
Hackers guide to UXHackers guide to UX
Hackers guide to UX
 
The Top 10 UX Trends for 2016
The Top 10 UX Trends for 2016The Top 10 UX Trends for 2016
The Top 10 UX Trends for 2016
 
HTML5 Meetup | Back to Basics: Wireframing & Planning
HTML5 Meetup | Back to Basics: Wireframing & PlanningHTML5 Meetup | Back to Basics: Wireframing & Planning
HTML5 Meetup | Back to Basics: Wireframing & Planning
 
StartupBus UK presentation
StartupBus UK presentationStartupBus UK presentation
StartupBus UK presentation
 
Building a UX Process at Salesforce that Promotes Focus and Creativity
Building a UX Process at Salesforce that Promotes Focus and CreativityBuilding a UX Process at Salesforce that Promotes Focus and Creativity
Building a UX Process at Salesforce that Promotes Focus and Creativity
 
What is UX v1
What is UX v1What is UX v1
What is UX v1
 
Designing for Interactive User Interfaces
Designing for Interactive User InterfacesDesigning for Interactive User Interfaces
Designing for Interactive User Interfaces
 
Designing for Interactive User Interfaces
Designing for Interactive User InterfacesDesigning for Interactive User Interfaces
Designing for Interactive User Interfaces
 
Designing for Interactive User Interfaces
Designing for Interactive User InterfacesDesigning for Interactive User Interfaces
Designing for Interactive User Interfaces
 
Designing Windows 8 application - Microsoft Techdays 2013
Designing Windows 8 application - Microsoft Techdays 2013Designing Windows 8 application - Microsoft Techdays 2013
Designing Windows 8 application - Microsoft Techdays 2013
 
Redesign Design (duo version)
Redesign Design (duo version)Redesign Design (duo version)
Redesign Design (duo version)
 
UX Pres MIni version!
UX Pres MIni version!UX Pres MIni version!
UX Pres MIni version!
 

Último

Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|CaydenIngman
 
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote ShirtJackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote ShirtTeeFusion
 
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.Vaishnavi R
 
Revit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareRevit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareResDraft
 
second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnsecond stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnjohannesrothkegel
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...Peter139483
 
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LABF.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LAButariworks
 
MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfMIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfaimonayesha7
 
DSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien FedouDSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien Fedoujfedou2105
 
Digi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxDigi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxRufusGleave
 
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt  Sign The Contract Big Boy ShirtSign The Contract Big Boy Shirt  Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy ShirtTeeFusion
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...ssuseraaa1581
 
DesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportDesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportstudiotelon
 
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
ورشة الطريق إلى البيم   ورشة الطريق إلى البيمورشة الطريق إلى البيم   ورشة الطريق إلى البيم
ورشة الطريق إلى البيم ورشة الطريق إلى البيمOmarSelim27
 
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfSHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfaimonayesha7
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...ssuseraaa1581
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfoliopagei
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?krc0yvm5
 
Strawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtStrawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtTeeFusion
 

Último (20)

Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|
 
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote ShirtJackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
 
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
 
Revit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareRevit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and Software
 
second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnsecond stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnn
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
 
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LABF.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
 
MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfMIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdf
 
DSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien FedouDSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien Fedou
 
Digi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxDigi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptx
 
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt  Sign The Contract Big Boy ShirtSign The Contract Big Boy Shirt  Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
 
DesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportDesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course report
 
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
ورشة الطريق إلى البيم   ورشة الطريق إلى البيمورشة الطريق إلى البيم   ورشة الطريق إلى البيم
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
 
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfSHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdf
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfolio
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?
 
Strawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtStrawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't Shirt
 

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
  • 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 .
  • 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