SlideShare uma empresa 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

Mais conteúdo relacionado

Semelhante 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
 

Semelhante 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

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
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 

Último (19)

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
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 

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