O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
NOVAUX, Tysons Corner, VA • December 2015
SYSTEMS:

PARTS, PRODUCTS,
& PEOPLE
Nathan Curtis
@nathanacurtis
HELLO!
Nathan Curtis
@nathanacurtis
@nathanacurtis
linkedin.com/in/nathancurtis
@components
NOT COHESIVE
.com Investors Shop Android
COHESIVE?
www.google.com/design/spec/material-design/
http://www.ibm.com/design/language http://harmony.intuit.com/http://style.codeforamerica.org/
http://solid.buzzfeed.com/ht...
MISSION ACCOMPLISHED
We just launched our living style guide!
REMEMBER THE REAL MISSION
Create efficient tooling &
collaborative connections that ship
cohesive, high-quality products
A DESIGN SYSTEM IS…
Our system is (ultimately) an HTML/CSS playbook
for 1 product team to build a consistent design.
http://ux.mailchimp.com/p...
Our system is a design spec, asset library and/or
(maybe) supporting HTML/CSS for our 10 product
teams to share a consiste...
http://www.google.com/design/
Our system is a design spec, asset library, and
structured collaborative activity across 100...
http://www.google.com/design/
The system is a toolkit (often, HTML/CSS)
customized by independent teams on ∞ products
to p...
DESIGN SYSTEMS, SCALED
1
Our system is (ultimately) an HTML/CSS
playbook for 1 product team to build a
consistent design.
...
A scalable framework of decisions & team
behaviors across a product portfolio to
converge on a cohesive experience.
WHAT I...
PARTS
CHALLENGE
“What parts go in it?”
A
A
ATypography Color Iconography
ATypography Color Iconography
Space Motion Imagery Logo Writing tone What else
A DESIGN LANGUAGE’S MOST COMMON THREE:
…AND...
UI ELEMENTS
UI COMPONENTS
PAGE TEMPLATES
http://www.getmdl.io/templates/index.html
LAYOUT SYSTEMS
http://purecss.io/grids/
PATTERNS: SIGN IN
EDITORIAL
CODE http://www.getmdl.io/components/index.html#cards-section
BRANDING RESEARCH/USERS
like personas, mental models
PRACTICES
like accessibility, SEO
VS
DESIGN TEMPLATES
like swatches, ...
PARTS, BY TIME ON SITE
DESIGN LANGUAGE
UI ELEMENTS
UI COMPONENTS
LAYOUTS
BRANDING
EDITORIAL
BEST PRACTICES
ASSETS
ABOUT TH...
DESIGN LANGUAGE
Color
Palettes, by category
Contrast
Meaning
Swatches
UI ELEMENTS
Paragraph
Lead paragraph
Block quote
Hea...
1. Irrelevant Categories: Draw a strong
line / X through categories irrelevant
to your system.
2. Relevant Categories: Cir...
PRODUCTS
CHALLENGE
“What products is it for?”
Home
Account
Hotel Search Book
“Content” iPhoneiPad
Android
WEB APPS
.com
Web App 1 Web App 2
ADDITIONAL APPS
Win App 1
Win App 2 Win App 3
WEB SITES
Community Site
Community Site
Brochures
Events
MARKETING
Win App 1
Win App 2 Win App 3
SITES
WEB APPS
ADDITIONAL APPS
.com...
WWGD?
(What would Google do?)
Search Mail Maps Chrome Calendar
Flagship Secondary Long Tail?
DO
Identify core flagship products
you bond together the most
Prioritize other products that matter
less to tier engagement...
KNOW YOUR PRODUCTS? CAN YOU PRIORITIZE?
PEOPLE
PEOPLE CHALLENGE
“Who’s gonna do the work?”
MODEL 1: SOLITARY
OVERLORDS
DON’T SCALE
MODEL 2: CENTRALIZED
https://vimeo.com/121037431
MODEL 2: CENTRALIZED
PROS
• spread system broadly
• free(er) from bias
• watching for opps
• solicit & manage requests
CON...
https://twitter.com/jina/status/661589501395861504
SKILLS
Information architecture
Interaction design
User experience
Visual design
Writing
Front-end dev
Design research
Con...
ROLES
One person as…
• Product owner
• Editor-in-chief
• Curator
Many people as…
• “Maker” 

(design & dev, usually)
• Wri...
MODEL 3: FEDERATED
CORE TEAM WITH LEADS BY DISCIPLINE
C
Content
I
Interaction
V
Visual
X
eXperience
DRIVING
INFLUENCING
FACILITATING
WATCHING
IGNORING
First things first: You must have
total support from the top.
[A Google-wide design initiative] required the
vision of a CE...
CORPORATE HIERARCHY = ALIGNMENT!
DIGITAL? BRANDPRODUCT TECH
DOING SYSTEM WORK ALIGNING
Team Models for Scaling a
Design System
Evolving Past Overlords to Centralize or Federate
Design Decision-Making Across Pl...
https://medium.com/salesforce-ux/the-salesforce-team-model-for-scaling-a-design-system-d89c2a2d404b
Discussion
DESIGN SYSTEMS

@EIGHTSHAPES
WORKSHOPS
Intro to Systems
Modular Web Design
Component Cut Up
Designing Living Guides
COACHI...
THANKS!
Nathan Curtis
@nathanacurtis
@nathanacurtis
linkedin.com/in/nathancurtis
http://www.ibm.com/design/language http://harmony.intuit.com/http://style.codeforamerica.org/ http://solid.buzzfeed.com/ht...
http://www.ibm.com/design/language http://harmony.intuit.com/http://style.codeforamerica.org/ http://solid.buzzfeed.com/ht...
http://www.ibm.com/design/language http://harmony.intuit.com/http://style.codeforamerica.org/ http://solid.buzzfeed.com/ht...
http://www.ibm.com/design/language http://harmony.intuit.com/http://style.codeforamerica.org/ http://solid.buzzfeed.com/ht...
http://www.ibm.com/design/language http://harmony.intuit.com/http://style.codeforamerica.org/ http://solid.buzzfeed.com/ht...
Próximos SlideShares
Carregando em…5
×

http://www.ibm.com/design/language http://harmony.intuit.com/http://style.codeforamerica.org/ http://solid.buzzfeed.com/https://www.lightningdesignsystem.com/ playbook.cio.gov/designstandards/ LIVING Design Systems: Parts, Products & People

22.493 visualizações

Publicada em

http://www.ibm.com/design/language http://harmony.intuit.com/http://style.codeforamerica.org/
http://solid.buzzfeed.com/https://www.lightningdesignsystem.com/ playbook.cio.gov/designstandards/
LIVING STYLE GUIDES AND SYSTEMS ARE EVERYWHERE!

Publicada em: Design
  • Earn a 6-Figure Side-Income Online... Signup for the free training HERE  https://bit.ly/2kS5a5J
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Doctor's 2-Minute Ritual For Shocking Daily Belly Fat Loss! Watch This Video ▲▲▲ http://ishbv.com/bkfitness3/pdf
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • In only two weeks I stopped my hair loss using a homemade recipe I created. And you can do the same. ★★★ https://bit.ly/2N8ZrEt
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • How can I improve my memory and concentration? How can I improve my memory for studying?♣♣♣ https://tinyurl.com/brainpill101
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Would you rather read the text transcript of how a burnt-out, 40 year old mother lost 84lb doing NO exercise, using a simple set of Flavor-Pairing Rituals? Read The Text Version Here To Find Out.. ♥♥♥ http://t.cn/AiYhcYmI
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui

×