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

Nathan Curtis

April 05, 2017

More Decks by Nathan Curtis

Other Decks in Design


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

    Nathan Cur+s
  2. 4 I want a system for this. ALL of this.

    Marke+ng Site Account
 Setup Account
  3. 5

  4. 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
  5. 10 Even BuNons Create Debt! NEW Designed for Growth (Etsy)

    hDps:/ /medium.com/etsy-design/designed-for-growth-cdc2a01a8a8a#.4p0wafimu
  6. 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
  7. 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


    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 +
  10. 21 VIEW The Universe! It’s the biggest place. Space THE

    SOLAR SYSTEM A slightly smaller place. UNIT: Space
  11. 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
  12. 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
  13. Principles of Designing Systems bit.ly/8s-principles-systems 24 Systems solve the easy

    problems so 
 products can solve hard problems more easily.
  14. 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.
  15. 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
  16. 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
  17. 32 Develop a Roadmap What We Could Do What We

    Will Do, By When Roadmaps for Design Systems bit.ly/8s-system-roadmap
  18. 35

  19. 36 CRITERIA A DESIGN SYSTEM MISSION Create efficient tools 

    & collabora/ve community 
 to scale & ship
 cohesive, high-quality experiences PARTS PEOPLE PRODUCTS WHY
  20. 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
  21. 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
  22. 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, ….
  23. 47

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

    part-?me Delivers outputs regularly Monitors (and governs?) use
  25. 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
  26. 55 Can I get a system with a staff designer

    or developer doing this on Friday afternoons?
  27. SHOULD
 (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?

    OPS Staff Up & Align Across an OrganizaMon MARKETING
  29. 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 “
  30. 63 At Salesforce, a “Cyclical” Teaming Model The Salesforce Team

    Model for Scaling a Design System bit.ly/sf-system-team-model
  31. 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
  32. 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