SlideShare una empresa de Scribd logo
1 de 57
Descargar para leer sin conexión
Accounting for Quantity and Scalability
Amy Vainieri & Courtney Clark
O’Reilly Design Conference, San Francisco
March 21, 2017
#DesignSystems
Design Systems
When a technology
matures, design moves to
the foreground because
the underlying machinery
has been commoditized.
“
John Maeda

Design in Tech Report
Hello.
Amy
@avainie
Courtney
@circlish
Who are you?
Have you used

a design system?
Who loves

a good design
system?
Who is…
still not
sure?
How do you
know if you need
a design system?
Your site has 20+ button styles
Your site will evolve

or grow over time.
sharing or turnover
You have a lot of project
So…what is a

design system?
1 2 3 4 5 6 7 8
ImagesviaTacoBell
+ More variation!
8 ingredients
=
50+ menu options!
Case Study
A design system in the wild.
AfterBefore
Wireframes
Digital design
system…
What are our ingredients?
Elements
Building Blocks
Pages
Basics
Basics
Elements
Building Blocks
Pages
Basics
Elements
Elements
Building Blocks
Pages
Basics
Building Blocks
Building Blocks
Elements
Building Blocks
Pages
Basics
Pages
Average Hero
Stat Boxes
Volunteer Openings

Teasers
Quote (with button)
Story Teasers
Image Gallery
Support Teasers
Share Bar
Why use

a design
system?
Scalability
Consistency
Efficiency

& Teamwork
Consistency
Efficiency & Teamwork
Scalability
Consistency
Efficiency & Teamwork
Scalability
Consistency
Efficiency & Teamwork
Scalability
This design system has
made my life rainbows
and unicorns.
“Dan Mouyard

Front-End Developer Extraordinaire
Consistency
Efficiency & Teamwork
Scalability
#DesignSystems Lesson
Scalability
Benefits Consistency
Efficiency

& Teamwork
After Launch
The story continues…
Extending

the system
1. What already exists?
2. What is the significance?
3. How will it be used again

in the future?
Ask:
Guard the
system, or it will
unravel quickly.
#DesignSystems Lesson
It was vital to understand
the genesis of the design
system. After that, it was
easy peasy to maintain

and extend the system.
“
Sarah Coles

Designer Extraordinaire
How do you get
buy in?
“
John Maeda

Design in Tech Report
‘Scale’ a company’s design
function through better
managing/leading of
designers and shareable
design systems
Time
Developing & Refining System Implementing System
Money
Design System
Traditional Process
Frame it around investment.
Project Management
DevelopmentUser Experience
Design

System
Business Development
GovernanceDesign & Branding
What about
clients?
Teach your clients.
Share your approach.
#DesignSystems Lesson
Tips and Tricks
Be consistent!
Be organized!
Document!
Communicate!
Code!
Decide on the afterlife!
You have bigger
fish to fry.
#DesignSystems Lesson
Like fun
404 pages
and pre-
loaders.
Who wouldn’t want
more delight?
Ask us anything.
avainieri@taoti.com

@avainie
cclark@forumone.com

@circlish
#DesignSystems

Más contenido relacionado

Similar a Design Systems - O'Reilly Design Conference

Similar a Design Systems - O'Reilly Design Conference (20)

Building a Design System: A Practitioner's Case Study
Building a Design System: A Practitioner's Case StudyBuilding a Design System: A Practitioner's Case Study
Building a Design System: A Practitioner's Case Study
 
Intro Design System for Visual Designers
Intro Design System for Visual DesignersIntro Design System for Visual Designers
Intro Design System for Visual Designers
 
Building Debt Free MVP
Building Debt Free MVPBuilding Debt Free MVP
Building Debt Free MVP
 
Purpose Before Action: Why You Need a Design Language System
Purpose Before Action: Why You Need a Design Language SystemPurpose Before Action: Why You Need a Design Language System
Purpose Before Action: Why You Need a Design Language System
 
Ai progress = leaderboards compute data algorithms 20180817 v3
Ai progress = leaderboards compute data algorithms 20180817 v3Ai progress = leaderboards compute data algorithms 20180817 v3
Ai progress = leaderboards compute data algorithms 20180817 v3
 
Product Design and Organization Design: Two sides of the same coin (1)
Product Design and Organization Design: Two sides of the same coin (1)Product Design and Organization Design: Two sides of the same coin (1)
Product Design and Organization Design: Two sides of the same coin (1)
 
Design systems, content systems, and the people who need them
Design systems, content systems, and the people who need themDesign systems, content systems, and the people who need them
Design systems, content systems, and the people who need them
 
Strategic Design Workshops, IXDA Munich
Strategic Design Workshops, IXDA MunichStrategic Design Workshops, IXDA Munich
Strategic Design Workshops, IXDA Munich
 
CWIN17 san francisco-ai implementation-pub
CWIN17 san francisco-ai implementation-pubCWIN17 san francisco-ai implementation-pub
CWIN17 san francisco-ai implementation-pub
 
Auditing Design Systems for Accessibility - Anna E. Cook
Auditing Design Systems for Accessibility - Anna E. CookAuditing Design Systems for Accessibility - Anna E. Cook
Auditing Design Systems for Accessibility - Anna E. Cook
 
Design System - Fail, Learn, Build, Test
Design System - Fail, Learn, Build, TestDesign System - Fail, Learn, Build, Test
Design System - Fail, Learn, Build, Test
 
CWP Meetup - All of Government Design
CWP Meetup - All of Government DesignCWP Meetup - All of Government Design
CWP Meetup - All of Government Design
 
Design system presentation - How to sell it internally
Design system presentation - How to sell it internallyDesign system presentation - How to sell it internally
Design system presentation - How to sell it internally
 
Csls 20160821 v1
Csls 20160821 v1Csls 20160821 v1
Csls 20160821 v1
 
Michael Haggerty-Villa -Joining Forces: Content Strategy in Design Systems
Michael Haggerty-Villa -Joining Forces: Content Strategy in Design SystemsMichael Haggerty-Villa -Joining Forces: Content Strategy in Design Systems
Michael Haggerty-Villa -Joining Forces: Content Strategy in Design Systems
 
Make a Good Slide Show 1 - Methods of SlideCraft
Make a Good Slide Show 1 - Methods of SlideCraftMake a Good Slide Show 1 - Methods of SlideCraft
Make a Good Slide Show 1 - Methods of SlideCraft
 
The road to faster mock-ups: How we built and shared our design system
The road to faster mock-ups: How we built and  shared our design systemThe road to faster mock-ups: How we built and  shared our design system
The road to faster mock-ups: How we built and shared our design system
 
Visible Architectures
Visible ArchitecturesVisible Architectures
Visible Architectures
 
Boosting a Design Language with Real Language: Content Strategy in and for De...
Boosting a Design Language with Real Language: Content Strategy in and for De...Boosting a Design Language with Real Language: Content Strategy in and for De...
Boosting a Design Language with Real Language: Content Strategy in and for De...
 
Scalable Design Systems with Sketch
Scalable Design Systems with SketchScalable Design Systems with Sketch
Scalable Design Systems with Sketch
 

Más de Courtney Clark

Más de Courtney Clark (10)

More Than a Feeling: Data-Informed Design
More Than a Feeling: Data-Informed DesignMore Than a Feeling: Data-Informed Design
More Than a Feeling: Data-Informed Design
 
Going Beyond the Donate Button NACHC CHI EXPO 2018
Going Beyond the Donate Button   NACHC CHI EXPO 2018Going Beyond the Donate Button   NACHC CHI EXPO 2018
Going Beyond the Donate Button NACHC CHI EXPO 2018
 
Data Informed Design - Good Tech Test - May 2018
Data Informed Design - Good Tech Test - May 2018Data Informed Design - Good Tech Test - May 2018
Data Informed Design - Good Tech Test - May 2018
 
Data + Audience: Connecting to Create Impact
Data + Audience: Connecting to Create ImpactData + Audience: Connecting to Create Impact
Data + Audience: Connecting to Create Impact
 
Audience Research on a Dime - Nonprofit of Influence
Audience Research on a Dime - Nonprofit of InfluenceAudience Research on a Dime - Nonprofit of Influence
Audience Research on a Dime - Nonprofit of Influence
 
Audience Research on a Dime - NTC
Audience Research on a Dime - NTCAudience Research on a Dime - NTC
Audience Research on a Dime - NTC
 
Think Beyond Your Sector - NTC 2016
Think Beyond Your Sector - NTC 2016  Think Beyond Your Sector - NTC 2016
Think Beyond Your Sector - NTC 2016
 
Longform Content: A Cautionary Tale - NTC 2016 Wordpress Day
Longform Content: A Cautionary Tale - NTC 2016 Wordpress DayLongform Content: A Cautionary Tale - NTC 2016 Wordpress Day
Longform Content: A Cautionary Tale - NTC 2016 Wordpress Day
 
Understanding Your Audiences | UX Research
Understanding Your Audiences | UX ResearchUnderstanding Your Audiences | UX Research
Understanding Your Audiences | UX Research
 
Styles of Storytelling - Cultivating Longform Content
Styles of Storytelling - Cultivating Longform ContentStyles of Storytelling - Cultivating Longform Content
Styles of Storytelling - Cultivating Longform Content
 

Último

ab-initio-training basics and architecture
ab-initio-training basics and architectureab-initio-training basics and architecture
ab-initio-training basics and architecture
saipriyacoool
 
Simple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptxSimple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptx
balqisyamutia
 
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
nirzagarg
 
Design-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora AgencyDesign-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora Agency
Isadora Agency
 
Resume all my skills and educations and achievement
Resume all my skills and educations and  achievement Resume all my skills and educations and  achievement
Resume all my skills and educations and achievement
210303105569
 
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
gajnagarg
 
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
CristineGraceAcuyan
 
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman MuscatAbortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion pills in Kuwait Cytotec pills in Kuwait
 
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
gajnagarg
 
Minimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptxMinimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptx
balqisyamutia
 
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
gajnagarg
 
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
HyderabadDolls
 

Último (20)

ab-initio-training basics and architecture
ab-initio-training basics and architectureab-initio-training basics and architecture
ab-initio-training basics and architecture
 
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service AvailableCall Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
 
Simple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptxSimple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptx
 
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
 
Design-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora AgencyDesign-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora Agency
 
Resume all my skills and educations and achievement
Resume all my skills and educations and  achievement Resume all my skills and educations and  achievement
Resume all my skills and educations and achievement
 
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
 
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
 
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
 
Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...
Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...
Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...
 
How to Create a Productive Workspace Trends and Tips.pdf
How to Create a Productive Workspace Trends and Tips.pdfHow to Create a Productive Workspace Trends and Tips.pdf
How to Create a Productive Workspace Trends and Tips.pdf
 
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best ServiceHigh Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
 
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for FriendshipRaebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
 
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman MuscatAbortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
 
The hottest UI and UX Design Trends 2024
The hottest UI and UX Design Trends 2024The hottest UI and UX Design Trends 2024
The hottest UI and UX Design Trends 2024
 
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
 
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
 
Minimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptxMinimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptx
 
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
 
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
 

Design Systems - O'Reilly Design Conference