Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Beyond the Toolkit, Early 2017

Beyond the Toolkit, Early 2017

Presented at SmashingConf San Francisco, April 4 2017

D3d6d307f114d3da3c833966a9d8ab64?s=128

Nathan Curtis

April 05, 2017
Tweet

More Decks by Nathan Curtis

Other Decks in Design

Transcript

  1. 1 Beyond the Toolkit SmashingConf – Monday, April 3, 2017

    Nathan Cur+s
 @nathanacur?s SPREADING A SYSTEM ACROSS PEOPLE & PRODUCTS
  2. 2 Day 1: All-Hands Design Leadership Summit

  3. 3 Account
 Hub

  4. 4 I want a system for this. ALL of this.

    Marke+ng Site Account
 Setup Account
 Hub
  5. 5

  6. ConversaMon on TwiNer about ‘design systems’ 2014 2016 2013 2015

    Tweets / 2 weeks 20 40 60 80 10 30 50 70 5 15 25 35 45 55 65 75 85 By @ashlie from @design
  7. 7 Is this cohesive?

  8. 8 NEW

  9. 9 BuNons! NEW BuDons in Design Systems bit.ly/8s-buDons-in-design-systems

  10. 10 Even BuNons Create Debt! NEW Designed for Growth (Etsy)

    hDps:/ /medium.com/etsy-design/designed-for-growth-cdc2a01a8a8a#.4p0wafimu
  11. Color in Design Systems bit.ly/8s-color-in-design-systems NEW

  12. 12 A

  13. 13 A

  14. 14 Visual Style’s “Big 3” A Typography Color Iconography

  15. 15 CSS Rules by Property, Across Libraries Measures CSS property

    quan?ty by category per library. Excludes reserved words (transparent), zeroed (0;), and maxed (100%;) values
  16. VIDEO VIDEO VIDEO Supernova Supernova Supernova An astronomical event that

    occurs during the last stages of a massive star's life. An astronomical event that occurs during the last stages of a massive star's life. An astronomical event that occurs during the last stages of a massive star's life. Galaxies Galaxies Galaxies Speed of Light Speed of Light Speed of Light Milky Way Milky Way Milky Way 32 32 32 16 16 16 16 16 16 8 8 8 8 8 8 8 View View View 32 16 Space! Space in Design Systems bit.ly/8s-space-in-design-systems
  17. 17 Visual Style’s “Big 4” A Typography Color Iconography Space

  18. 18 BUTTON BORDER RADIUS BOX-SHADOW BACKGROUND COLOR PADDING-TOP PADDING-LEFT &

    -RIGHT PADDING-BOTTOM MARGIN COLOR FONT-SIZE FONT-WEIGHT FONT-FAMILY TEXT-TRANSFORM A Typography Color Iconography Space
  19. 19 BUTTON BUTTON . BUTTON GROUP WITH OPTIONS BUTTON .

    Basic Menu Split Icon Group TYPE BUTTON BUTTON BUTTON Secondary Secondary Alt Primary Alt Primary BUTTON HIERARCHY + BUTTON BUTTON BUTTON BUTTON Default Hover Press Disabled STATE + ELEMENT <button> <a> <input type=“submit”> <input type=“button”> + QUALITY RESPONSIVE ACCESSIBLE THEMABLE BROWSERS/DEVICES +
  20. 20 VIEW The Universe! It’s the biggest place. Space BUTTON

  21. 21 VIEW The Universe! It’s the biggest place. Space THE

    SOLAR SYSTEM A slightly smaller place. UNIT: Space
  22. 22 Is this cohesive? VIEW The Universe! It’s the biggest

    place. Space THE SOLAR SYSTEM A slightly smaller place. UNIT: Space EDIT My Earth! It’s my biggest place. MySpace
  23. 23 What if this is one week a^er the 1.0

    release? VIEW The Universe! It’s the biggest place. Space THE SOLAR SYSTEM A slightly smaller place. UNIT: Space EDIT My Earth! It’s my biggest place. MySpace
  24. Principles of Designing Systems bit.ly/8s-principles-systems 24 Systems solve the easy

    problems so 
 products can solve hard problems more easily.
  25. Ingredients Sign In Username Password Login Forgot Your Username? Forgot

    Your Password? Create a New Username Login with Google Use your existing Discovery Education username and password.
  26. 26 Primary Secondary Flat Ghost Username or password is incorrect.

    Your profile has been saved. You haven’t attached any resources yet. This assessment can only be taken once. IMAGE Rocks Lorem ipsum dolor sit amet, consectetur adipiscing VIDEO Rocks Lorem ipsum dolor sit amet, consectetur adipiscing HEADER CELL Data Cell Data Cell Data Cell HEADER CELL Data Cell Data Cell Data Cell HEADER CELL Data Cell Data Cell Data Cell Cancel Submit Save Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra maximus velit eu aliquam. Donec at elit urna. Nulla at ultricies mi. Vestibulum ante massa, accumsan id magna sit amet, condimentum egestas odio. Level-3-Heading LIST GROUP HEADER List Group Item List Group Item List Group Item List Group Item Tooltip Tab 1 Tab 3 Tab 4 Tab 2 Happening Now: Virtual Field Trip. Check it out. A New Search Has Arrived! Give it a try. Discovery Education will be down for maintanance Tuesday, 2/3/17. Level-1-Heading Level-2-Heading Level-3-Heading LEVEL-4-HEADING Level-5-Heading Display Text Paragraph Text Error Text Interactive Text Small Link Username Password Login
  27. Picking Parts, Products & People bit.ly/8s-parts-products-people

  28. 28 Include what's shared, omit what's not.

  29. Component Cut-Up bit.ly/8s-component-cut-up 29 Inventory Parts With, Not For, Your

    Teams 1. Cut 2. Group 3. Label Groups 4. Tape 5. PrioriMze 6. Label Components
  30. 30 Paint a Picture of a Target State Reference Designs

    bit.ly/8s-reference-designs
  31. 31 Produce Outputs They Need ASSETS CODE getmdl.io/index.html + DOC

    material.io/guidelines/ +
  32. 32 Develop a Roadmap What We Could Do What We

    Will Do, By When Roadmaps for Design Systems bit.ly/8s-system-roadmap
  33. 33 0.5 0.6 0.7 1.0

  34. 34 MISSION ACCOMPLISHED 1.0

  35. 35

  36. 36 CRITERIA A DESIGN SYSTEM MISSION Create efficient tools 


    & collabora/ve community 
 to scale & ship
 cohesive, high-quality experiences PARTS PEOPLE PRODUCTS WHY
  37. 37 What Products Does it Reach?

  38. 38 A System’s Reach ∞ A World’s Plahorm 100 An

    Enterprise’s Language 10 A Porholio’s Guide 1 A Team’s Playbook http://foundatio http://www.goog harmony.int http://ux.mailchimp A Design System’s Reach bit.ly/8s-system-reach
  39. 39 Marke+ng Site Account
 Setup Account
 Hub

  40. 40 Choose Flagships That Commit to You, Too Account
 Hub

    Marke+ng Site Account
 Setup
  41. 41 Not Every Product (Team) is a Flagship

  42. Align Your Goal Date(s) with Their Release Cycles

  43. 43 Products own their desMny. System equip products to realize

    that desMny.
  44. 44 Analysis Strategy Reference Concepts Design/Build/Doc MONTH 1 2 3

    4 5 6 7 * Timing varies based on factors like capacity, organiza?on size, and scope FORMATIVE PERIOD OPERATING PERIOD Gelng to System 1.0 Pair w/ Products on Integra?on
  45. 45 PrioriMze Products Into Tiers Promo?ng a System Across Products

    alistapart.com/ar?cle/promo?ng-a-design-system-across-your-products using Influence, Urgency, Exis?ng Code Integra?on, ….
  46. 46 What People are Involved?

  47. 47

  48. 48 Overlords Don’t Scale

  49. 49 Model 1: Solitary

  50. 50 Model 2: Central

  51. 51 Model 2: Central Serves many products Dedicated capacity, ocen

    part-?me Delivers outputs regularly Monitors (and governs?) use
  52. 52 Modern Orgs Have a Central System Team hIps:/ /vimeo.com/121037431

  53. 53 Define System PosiMons as Jobs (with HR!?!?) hIps:/ /twiIer.com/jina/status/661589501395861504

  54. 54 Place People with Skills that Match Parts 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? DATE PARTS Informa?on architecture Interac?on design User experience Visual design Wri?ng Front-end dev Design research Content strategy Systems engineering Product management
  55. 55 Can I get a system with a staff designer

    or developer doing this on Friday afternoons?
  56. SHOULD
 (MEDIUM SIZE) MUST
 (SMALL SIZE) 56 Designer Developer Product

    Other Capacity (Here, 25%) Role Sizing a System Team My Role, Early On COULD
 (LARGER SIZE) Accessibility
 or Editorial?
  57. 57 Who leads & manages? Design System Leader(s) & Manager(s)

    bit.ly/8s-system-leaders-managers
  58. CENTRAL TEAM “PARTNERS” TO ALIGN WITH DESIGN? BRAND PRODUCT DEV

    OPS Staff Up & Align Across an OrganizaMon MARKETING
  59. 59 Alignment Work Wasn’t Enjoyable This Project Rocked! That Project

    Sucked? bit.ly/8s-projects-rocked-sucked
  60. 60 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. Jon Wiley @jonwiley “
  61. 61 Favor community over control.

  62. 62 Model 3: Federated

  63. 63 At Salesforce, a “Cyclical” Teaming Model The Salesforce Team

    Model for Scaling a Design System bit.ly/sf-system-team-model
  64. 64 How do I contribute? Contribu?ons to Design Systems bit.ly/8s-contribu?ons-to-systems

  65. 65 BUILD A CORE Closed TO CONTRIBUTIONS Open

  66. 66 DRIVER INFLUENCER CONNECTOR WATCHER IGNORER Find Your Community Connector

  67. 67 Working Systems = Embracing New ResponsibiliMes COMFORT ZONE Designing

    Developing Even, Documen?ng! “NOT MY HAPPY PLACE” Selling an Idea Aligning an Org Managing a “Product” Edi?ng Doc Connec?ng Others
  68. 68 A style guide is an arMfact of design process.

    A design system is a living, funded product with a roadmap & backlog, serving an ecosystem. A Design System isn’t a Project. It’s a Product, Serving Products. bit.ly/8s-system-is-product
  69. 69 Thanks! Nathan Cur+s
 @nathanacur?s