Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Design Systems: Parts, Products & People

19,542 views

Published on

A design system is a scalable framework of decisions & team behaviors spread across an organization so your products can converge on a cohesive experience. Start your plan with a firm understanding of what parts it includes, products it applies to, and people that will do the work.

Published in: Design

Design Systems: Parts, Products & People

  1. NOVAUX, Tysons Corner, VA • December 2015 SYSTEMS:
 PARTS, PRODUCTS, & PEOPLE Nathan Curtis @nathanacurtis
  2. HELLO! Nathan Curtis @nathanacurtis @nathanacurtis linkedin.com/in/nathancurtis
  3. @components
  4. NOT COHESIVE .com Investors Shop Android
  5. COHESIVE?
  6. www.google.com/design/spec/material-design/
  7. 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!
  8. MISSION ACCOMPLISHED We just launched our living style guide!
  9. REMEMBER THE REAL MISSION Create efficient tooling & collaborative connections that ship cohesive, high-quality products
  10. A DESIGN SYSTEM IS…
  11. Our system is (ultimately) an HTML/CSS playbook for 1 product team to build a consistent design. http://ux.mailchimp.com/patterns
  12. Our system is a design spec, asset library and/or (maybe) supporting HTML/CSS for our 10 product teams to share a consistent design. harmony.intuit.com
  13. http://www.google.com/design/ Our system is a design spec, asset library, and structured collaborative activity across 100 products to spread a cohesive design.
  14. http://www.google.com/design/ The system is a toolkit (often, HTML/CSS) customized by independent teams on ∞ products to produce effective design efficiently. http://foundation.zurb.com/
  15. DESIGN SYSTEMS, SCALED 1 Our system is (ultimately) an HTML/CSS playbook for 1 product team to build a consistent design. So many of my own projects over the years 10 Our system is a design spec, asset library and/ or (maybe) supporting HTML/CSS for our 10 product teams to share a consistent design. Red Gate, Intuit Harmony, Marriott (my time in 2013-14) 100 Our system is a design spec, asset library, and structured collaborative activity across 100 products to spread a cohesive design. IBM, Google, GE, 
 big orgs across many platforms ∞ The system is a toolkit (often, HTML/CSS) customized by independent teams on ∞ products to produce effective design efficiently. Bootstrap, Mac OSX, Google Material (& Lite), Code for America
  16. A scalable framework of decisions & team behaviors across a product portfolio to converge on a cohesive experience. WHAT IS A DESIGN SYSTEM? PRACTICES PARTS PEOPLE PRODUCTS
  17. PARTS
  18. CHALLENGE “What parts go in it?”
  19. A
  20. A
  21. ATypography Color Iconography
  22. ATypography Color Iconography Space Motion Imagery Logo Writing tone What else A DESIGN LANGUAGE’S MOST COMMON THREE: …AND THE REST:
  23. UI ELEMENTS
  24. UI COMPONENTS
  25. PAGE TEMPLATES http://www.getmdl.io/templates/index.html
  26. LAYOUT SYSTEMS http://purecss.io/grids/
  27. PATTERNS: SIGN IN
  28. EDITORIAL
  29. CODE http://www.getmdl.io/components/index.html#cards-section
  30. BRANDING RESEARCH/USERS like personas, mental models PRACTICES like accessibility, SEO VS DESIGN TEMPLATES like swatches, layouts GOVERNANCE like reviews, audits PROCESS like requests, contributing UTILITIES like mixing, helpers MORE AND MORE PARTS…
  31. PARTS, BY TIME ON SITE DESIGN LANGUAGE UI ELEMENTS UI COMPONENTS LAYOUTS BRANDING EDITORIAL BEST PRACTICES ASSETS ABOUT THE PROGRAM GLOBAL Online style guide with broad coverage, much spec (280 articles), & little code. ICONS COLOR TYPE BUTTON SITE NAV PUNCUTATION/
 FORMATS ACCESSIBILITY
  32. DESIGN LANGUAGE Color Palettes, by category Contrast Meaning Swatches UI ELEMENTS Paragraph Lead paragraph Block quote Headers (H1 - H6) Lists Links Code Typography Hierarchy Weights / types Web fonts Baseline grid Buttons Primary Secondary Button groups Menu buttons Split buttons FAB (floating action) Iconography Pictograms Illustration Icon fonts Alignment Form controls Text Variants (email, etc) Text area Radio Checkbox Select Motion Principles Timing Types Transitions Form controls, cont’d File upload Labels Floating labels Microcopy Required Validation Space Units / measurments Metrics and keylines Structure Photography Divider / rule Switch Slider Image Block Full bleed Inline with positions UI COMPONENTS Action bar/sheet Back to top Badges Breadcrumbs Calendar picker Caption Cards Chat (live) Code block Comments Contact us Cookie notification Data tables Dialog Drawer/accordion Filters Footer Footnotes Header Hero billboard Hero carousel Legend Loading / spinner Local navigation Maps Menu Messaging Toast Block Inline error Modal Nav Megamenu Pagination Progress bar Pull quote Ratings Reviews Rich text editor Search Sidebar Site/App navigation Social networking Status (alpha, beta,...) Tabs Tags / chips / pills Thumbnails / #-ups Tips / tutorial Toolbar Tooltips Video & media UI PATTERNS Authentication Create account Database connection Form structure Launch EDITORIAL Voice & tone Writing for the web Word list Capitalization Punctuation DOWNLOADS Templates (PSD,...) Swatch palettes Fonts Icons Code Permissions Purchase/checkout Settings Site / app structure Swipe to refresh BRANDING Identity Logo(s) Tagline(s) Partnerships Themes GETTING INVOLVED Request New Parts Give Feedback Request Audit Present at a Share Contribute PAGE TEMPLATES Home Category Product Dashboard Article RESEARCH & USERS User needs Personas Research techniques Surveys A/B, multivar. testing ABOUT THE PROGRAM Home page Principles / pillars Getting started FAQ Version history Search results Contact us Getting started Discussion Gallery PRACTICES Accessibility Prototyping Performance SEO Design thinking ABOUT THE TEAM Team Recruiting / jobs LAYOUT SYSTEMS Grids for sites Grids for apps Paneling/transitions Responsive/breakpoints Screen sizes CODING Style Browsers & devices Environments Prog. enhancement Version control UTILITIES Mixins Helpers Customize Variables / tokens YOUR NAME OTHER? DATEPARTS PARTS WORKSHEET
  33. 1. Irrelevant Categories: Draw a strong line / X through categories irrelevant to your system. 2. Relevant Categories: Circle the labels of up to 5 categories most relevant to your system. 3. Relevant Parts: Check up to 25 parts most relevant to your system, across any category. 4. Important Parts: Circle the checks of the top 10 most important parts. PARTS WORKSHEET Color Color
  34. PRODUCTS
  35. CHALLENGE “What products is it for?”
  36. Home Account Hotel Search Book “Content” iPhoneiPad Android
  37. WEB APPS .com Web App 1 Web App 2 ADDITIONAL APPS Win App 1 Win App 2 Win App 3 WEB SITES
  38. Community Site Community Site Brochures Events MARKETING Win App 1 Win App 2 Win App 3 SITES WEB APPS ADDITIONAL APPS .com Web App 1 Web App 2
  39. WWGD? (What would Google do?)
  40. Search Mail Maps Chrome Calendar
  41. Flagship Secondary Long Tail?
  42. DO Identify core flagship products you bond together the most Prioritize other products that matter less to tier engagement DO Search Mail Maps Chrome Calendar News Santa TrackerRemote TERTIARY? SERIOUSLY?REMOTE? SECONDARY?
  43. KNOW YOUR PRODUCTS? CAN YOU PRIORITIZE?
  44. PEOPLE
  45. PEOPLE CHALLENGE “Who’s gonna do the work?”
  46. MODEL 1: SOLITARY
  47. OVERLORDS DON’T SCALE
  48. MODEL 2: CENTRALIZED
  49. https://vimeo.com/121037431
  50. MODEL 2: CENTRALIZED PROS • spread system broadly • free(er) from bias • watching for opps • solicit & manage requests CONS • lacks context & visibility • lacks power to foster participation • lower influence
  51. https://twitter.com/jina/status/661589501395861504
  52. SKILLS Information architecture Interaction design User experience Visual design Writing Front-end dev Design research Content strategy Systems engineering Product management etc…
  53. ROLES One person as… • Product owner • Editor-in-chief • Curator Many people as… • “Maker” 
 (design & dev, usually) • Writer • Influencer
 (director+, usually)
  54. MODEL 3: FEDERATED
  55. CORE TEAM WITH LEADS BY DISCIPLINE C Content I Interaction V Visual X eXperience
  56. DRIVING INFLUENCING FACILITATING WATCHING IGNORING
  57. First things first: You must have total support from the top. [A Google-wide design initiative] required the vision of a CEO who could rally the entire company to make it happen. @jonwiley “
  58. CORPORATE HIERARCHY = ALIGNMENT! DIGITAL? BRANDPRODUCT TECH DOING SYSTEM WORK ALIGNING
  59. Team Models for Scaling a Design System Evolving Past Overlords to Centralize or Federate Design Decision-Making Across Platforms http://bit.do/scaled-team-models
  60. https://medium.com/salesforce-ux/the-salesforce-team-model-for-scaling-a-design-system-d89c2a2d404b
  61. Discussion
  62. DESIGN SYSTEMS
 @EIGHTSHAPES WORKSHOPS Intro to Systems Modular Web Design Component Cut Up Designing Living Guides COACHING PROJECTS Assess Discover & Plan Design & Build System Management
  63. THANKS! Nathan Curtis @nathanacurtis @nathanacurtis linkedin.com/in/nathancurtis

×