Beyond the Toolkit, Early 2017

Presented at SmashingConf San Francisco, April 4 2017

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
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
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?
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