Tweet
Tweet

Slide 1

Slide 1 text

1 Beyond the Toolkit SmashingConf – Monday, April 3, 2017 Nathan Cur+s
 @nathanacur?s SPREADING A SYSTEM ACROSS PEOPLE & PRODUCTS

Slide 2

Slide 2 text

2 Day 1: All-Hands Design Leadership Summit

Slide 3

Slide 3 text

3 Account
 Hub

Slide 4

Slide 4 text

4 I want a system for this. ALL of this. Marke+ng Site Account
 Setup Account
 Hub

Slide 5

Slide 5 text

5

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

7 Is this cohesive?

Slide 8

Slide 8 text

8 NEW

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

10 Even BuNons Create Debt! NEW Designed for Growth (Etsy) hDps:/ /medium.com/etsy-design/designed-for-growth-cdc2a01a8a8a#.4p0wafimu

Slide 11

Slide 11 text

Color in Design Systems bit.ly/8s-color-in-design-systems NEW

Slide 12

Slide 12 text

12 A

Slide 13

Slide 13 text

13 A

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

17 Visual Style’s “Big 4” A Typography Color Iconography Space

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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 + QUALITY RESPONSIVE ACCESSIBLE THEMABLE BROWSERS/DEVICES +

Slide 20

Slide 20 text

20 VIEW The Universe! It’s the biggest place. Space BUTTON

Slide 21

Slide 21 text

21 VIEW The Universe! It’s the biggest place. Space THE SOLAR SYSTEM A slightly smaller place. UNIT: Space

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Principles of Designing Systems bit.ly/8s-principles-systems 24 Systems solve the easy problems so 
 products can solve hard problems more easily.

Slide 25

Slide 25 text

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.

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Picking Parts, Products & People bit.ly/8s-parts-products-people

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

30 Paint a Picture of a Target State Reference Designs bit.ly/8s-reference-designs

Slide 31

Slide 31 text

31 Produce Outputs They Need ASSETS CODE getmdl.io/index.html + DOC material.io/guidelines/ +

Slide 32

Slide 32 text

32 Develop a Roadmap What We Could Do What We Will Do, By When Roadmaps for Design Systems bit.ly/8s-system-roadmap

Slide 33

Slide 33 text

33 0.5 0.6 0.7 1.0

Slide 34

Slide 34 text

34 MISSION ACCOMPLISHED 1.0

Slide 35

Slide 35 text

35

Slide 36

Slide 36 text

36 CRITERIA A DESIGN SYSTEM MISSION Create efficient tools 
 & collabora/ve community 
 to scale & ship
 cohesive, high-quality experiences PARTS PEOPLE PRODUCTS WHY

Slide 37

Slide 37 text

37 What Products Does it Reach?

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

39 Marke+ng Site Account
 Setup Account
 Hub

Slide 40

Slide 40 text

40 Choose Flagships That Commit to You, Too Account
 Hub Marke+ng Site Account
 Setup

Slide 41

Slide 41 text

41 Not Every Product (Team) is a Flagship

Slide 42

Slide 42 text

Align Your Goal Date(s) with Their Release Cycles

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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, ….

Slide 46

Slide 46 text

46 What People are Involved?

Slide 47

Slide 47 text

47

Slide 48

Slide 48 text

48 Overlords Don’t Scale

Slide 49

Slide 49 text

49 Model 1: Solitary

Slide 50

Slide 50 text

50 Model 2: Central

Slide 51

Slide 51 text

51 Model 2: Central Serves many products Dedicated capacity, ocen part-?me Delivers outputs regularly Monitors (and governs?) use

Slide 52

Slide 52 text

52 Modern Orgs Have a Central System Team hIps:/ /vimeo.com/121037431

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

55 Can I get a system with a staff designer or developer doing this on Friday afternoons?

Slide 56

Slide 56 text

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?

Slide 57

Slide 57 text

57 Who leads & manages? Design System Leader(s) & Manager(s) bit.ly/8s-system-leaders-managers

Slide 58

Slide 58 text

CENTRAL TEAM “PARTNERS” TO ALIGN WITH DESIGN? BRAND PRODUCT DEV OPS Staff Up & Align Across an OrganizaMon MARKETING

Slide 59

Slide 59 text

59 Alignment Work Wasn’t Enjoyable This Project Rocked! That Project Sucked? bit.ly/8s-projects-rocked-sucked

Slide 60

Slide 60 text

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 “

Slide 61

Slide 61 text

61 Favor community over control.

Slide 62

Slide 62 text

62 Model 3: Federated

Slide 63

Slide 63 text

63 At Salesforce, a “Cyclical” Teaming Model The Salesforce Team Model for Scaling a Design System bit.ly/sf-system-team-model

Slide 64

Slide 64 text

64 How do I contribute? Contribu?ons to Design Systems bit.ly/8s-contribu?ons-to-systems

Slide 65

Slide 65 text

65 BUILD A CORE Closed TO CONTRIBUTIONS Open

Slide 66

Slide 66 text

66 DRIVER INFLUENCER CONNECTOR WATCHER IGNORER Find Your Community Connector

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

69 Thanks! Nathan Cur+s
 @nathanacur?s