Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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...
Prochain SlideShare
Chargement dans…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 155 vues

Publié le

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!

Publié dans : Design
  • 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
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • How can I improve my memory and concentration? How can I improve my memory for studying?♣♣♣ https://tinyurl.com/brainpill101
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • 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
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • How To Get Rid Of Acne, The amazing clear skin secret Of top models and celebrities ▲▲▲ http://t.cn/AiWGkfA8
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • New E-book Reveals Unique Holistic Strategies to Cure Acne. Discover How To Quickly And Easily Cure Acne Permanently...Even If Everything Else You Tried had Failed... Without Drugs, Without Over The Counters, and Without Nasty Side Effects - Guaranteed!  https://bit.ly/2xJfKi2
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

×