Designing Design Systems for Drupal: DrupalCampl Asheville 2019

Designing Design Systems for Drupal: DrupalCampl Asheville 2019

Design systems are all the rage these days, but what exactly is a design system? How do you know when you need one? In this session we'll cover the following:

- What is a design system?
- How do you know when you need a design system?
- How do you thoughtfully plan and model a design system for a CMS like Drupal?
- How do you create and maintain a design system as a team (or teams)?

I'll share real-world examples from projects of varied scale and complexity that our team of Lullabot strategists, designers and developers have worked on.

Who is this session for?

- Designers looking to learn more about what design systems are and how to model them for a CMS like Drupal.
- Content editors and product owners looking for practices and approaches to creating great design systems that empower editors of a Drupal site.
Content strategists looking for ways to relate the content model to the patterns, components and presentation of the site.
- Front-end and back-end developers wanting better process and strategies for planning out design systems collaboratively.
- Project managers looking for practices to facilitate communication and collaboration by multiple disciplines creating a design system.

7653c7c449918ff6542880a8c284f5e7?s=128

Jared Ponchot

July 13, 2019
Tweet

Transcript

  1. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + DESIGN SYSTEMS designing !1
  2. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + WELCOME! hello there, and !2
  3. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + !3
  4. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + DESIGNER I’m a … !4
  5. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + DEVELOPER I’m a … !5
  6. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + UNICORN I’m a … !6
  7. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + OTHER I’m an … !7
  8. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + L LARGE L XL EXTRA LARGE XL OR !8
  9. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + L LARGE L XL EXTRA LARGE XL M MEDIUM M !9
  10. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + L LARGE L XL EXTRA LARGE XL M MEDIUM M XXM EXTRA EXTRA MEDIUM XXM !10
  11. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + L LARGE L XL EXTRA LARGE XL M MEDIUM M S SMALL S !11
  12. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + L LARGE L XL EXTRA LARGE XL !12
  13. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + !13 ST RAT E GY D ESI GN DEV ELO P M E NT / / / /
  14. None
  15. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + DESIGN SYSTEM? wait … !15
  16. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + WELCOME 1 AUDIENCE DEFINITION 2 ME DEFINITION 3 DEFINING 4 PRESCRIBING 5 DESIGNING 6 YOU ARE HERE !16
  17. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + DESIGN SYSTEMS defining !17
  18. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + !18 what is a ? DESIGN SYSTEM
  19. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + !19 Style Guide what is a DESIGN SYSTEM
  20. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + !20 Atomic Design Style Guide what is a DESIGN SYSTEM
  21. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + !21 Pattern Library Atomic Design Style Guide what is a DESIGN SYSTEM
  22. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + !22 Expensive Pattern Library Atomic Design Style Guide what is a DESIGN SYSTEM
  23. “ DE SI G NI NG DES IG N S

    YS T E MS DC AS HEV IL L E 20 1 9 + — ALLA KHOL M A TO V A, “DE S I G N S Y S TE M S ” There isn’t a standard definition of ‘design system’ within the web community, and people use the term in different ways — sometimes interchangeably with ‘style guides’ and ‘pattern libraries’. !23
  24. PH OTO BY L EW IS H I NE O

    F E MP IR E STAT E B U I L D IN G U N D ER CO NST RU CT IO N !24
  25. !25

  26. “ DE SI G NI NG DES IG N S

    YS T E MS DC AS HEV IL L E 20 1 9 + — ME a set of principles, constraints, patterns, and documentation that empower disparate teams to create, maintain, and extend a design efficiently and consistently. !26 A DESI GN SYSTEM IS …
  27. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + DESIGN SYSTEM prescribing a !27
  28. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + VILLAINS naming your !28
  29. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + INEFFICIENCY problems of … !29
  30. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + INCONSISTENCY problems of … !30 INEFFICIENCY
  31. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + !31 INCONSISTENCY problems of … INEFFICIENCY SCALE
  32. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + INEFFICIENCY INCONSISTENCY SCALE !32
  33. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + INEFFICIENCY INCONSISTENCY SCALE !33
  34. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + INEFFICIENCY INCONSISTENCY SCALE !34
  35. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + CHALLENGE designing to the !35
  36. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + !36
  37. “ DE SI G NI NG DES IG N S

    YS T E MS DC AS HEV IL L E 20 1 9 + Complex systems that work evolve from simpler systems that work. !37 GALL’S LAW …
  38. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + !38
  39. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + !39 Principles Constraints Patterns Documentation WHAT DO WE NEED?
  40. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + !40 Principles Constraints Patterns Documentation WHAT DO WE NEED?
  41. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + DESIGN SYSTEMS designing !41
  42. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + DESIGN DEV PRODUCT BIZ CONTENT SALES !42
  43. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + DESIGN DEV PRODUCT BIZ CONTENT SALES !43
  44. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + INTERVIEWS 30 minute !44
  45. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + WORKING WELL? what’s !45 not
  46. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + WORKING WELL? !46 what’s is
  47. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + INDIVIDUALS the value of !47
  48. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + INVENTORY design !48
  49. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + INVENTORY design !49
  50. IMAGE BY BRAD FROST HTTPS://BRADFROST.COM/BLOG/POST/INTERFACE-INVENTORY/ !50

  51. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + DESIGN SYSTEM planning your !51
  52. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + !52 Principles Constraints Patterns Documentation WHAT DO WE NEED?
  53. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + !53
  54. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + !54
  55. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + PRINCIPLES design !55
  56. “ DE SI G NI NG DES IG N S

    YS T E MS DC AS HEV IL L E 20 1 9 + Organize for outsiders. !56
  57. “ DE SI G NI NG DES IG N S

    YS T E MS DC AS HEV IL L E 20 1 9 + Celebrate the common. !57
  58. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + CONSTRAINTS design !58
  59. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + ‣ Audience ‣ Voice & Tone ‣ Typography ‣ Spacing & Rhythm CONSTRAINTS !59 ‣ Color ‣ Imagery ‣ Behaviors & Motion
  60. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + CUSTOMERS? who are your !60
  61. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + CUSTOMERS? who are your !61
  62. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + MODELS creating !62
  63. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + PHOTO FROM HTTPS://BIT.LY/2VJADIU PHOTO FROM HTTPS://BIT.LY/2HD7YAD PHOTO FROM HTTPS://BIT.LY/2XEHVBD !63
  64. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + Cards / Grid List Calls to Action (Marketing Promo) Advertisements Calls to Action (Marketing Promo) Newsletter Signup !64 Hero
  65. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + PROBLEMS repeat !65
  66. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + PROBLEMS repeat !66
  67. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + COMPLEXITY greater !67
  68. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + COMPLEXITY greater !68 greater INCONSISTENCY =
  69. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + !69
  70. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + !70
  71. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + CONTENT, OUTWARD modeling from !71
  72. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + PUBLISHING? what are you !72
  73. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + PUBLISHING? what are you !73 HOW OFTEN?
  74. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + PUBLISHING? what are you !74 HOW OFTEN? PROCESS?
  75. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + CONTENT MODEL? what is a !75
  76. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + ‣ Types of Content ‣ Attributes ‣ Relationships CONTENT MODEL !76
  77. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + !77
  78. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + CONTENT MODEL? why a !78
  79. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + CONTENT MODEL every project has a !79
  80. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + CONTENT MODEL every project has a !80
  81. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + !81 CONTENT MODEL? dude, where’s my
  82. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + SHAPES WORKFLOWS A content model !82
  83. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + SHAPES WORKFLOWS A content model !83
  84. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + RELY ON IT! redesigns !84
  85. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + MODEL CONTENT how to !85
  86. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + ‣ Asset ‣ Structural ‣ Micro-content ‣ Presentational THE TYPES OF TYPES !86
  87. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + Event Category Article Asset Structural Asset Promo Presentational Quote Micro-content !87
  88. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + Content Type Description Examples Known Data Notes Current Type Treatments MVP Display Wireframe Edit Form Wireframe Ready for ticketing? GA Only MVP Backlog Index for Search Agency Info Facts about agencies, their services, their staff, etc. Highly structured, aggregated on Georgia.gov for centralized presentation. Organization Your agency and its divisions or departments. https://georgia.gov/agencies/georgia-state- board-accountancy https://epd.georgia.gov/air- protection-branch https://dhs.georgia.gov/office- enterprise-development Body field == "mission/respon sibilities", optional reference to Parent Organization to create org charts. Includes any Agency, Division, Department, Office, etc. that has a distinct site. Organizations can have Parent organizations. Agency List, Full TRUE https://www. dropbox. com/s/v2hbsc38 4xjfh71/organiz ation-display. jpg?dl=0 TRUE Currently Yes y Program or Service Programs and services you provide to the public, or to other agencies. https://childsupport.georgia.gov/paternity- establishment Covers lots of ground, needs editorial guidelines. For MVP: "Is this something we want in the global services directory on georgia.gov?" Site Page List, Full TRUE https://www. dropbox. com/s/lbmox60 5ko00c9z/Adopt ion.pdf?dl=0 TRUE Yes y Contact Names, numbers, and addresses the public should use to contact you. https://dhs.georgia.gov/who-call-directory Role, short description, phone number (s), address, email(s), URL Profile List, Full TRUE https://www. dropbox. com/s/bsm9zv6 qjbjeumy/contac t-multiple- displays.jpg? dl=0 TRUE Yes y Location Physical locations where the public can interact with your agency, receive services, or participate in public events. https://dds.georgia.gov/location/albany https: //dor.georgia.gov/location/department-revenue- headquarters https://dol.georgia. gov/location/savannah https://epd.georgia. gov/location/epd-coastal-district-office Location List, Full TRUE https://www. dropbox. com/s/nke8cgsu e406t8r/contact- location- previews.jpg? dl=0 TRUE y Bio Profiles of staff, elected officials, web contributors, and other people associated with your agency. https://dhs.georgia.gov/commissioner-robyn- crittenden Headshot image, profile type, contact info Profiles can be Staff, Leadership, Elected Official, Volunteer, or Contributor Profile List, Card, Full TRUE https://www. dropbox. com/s/h5bgr7uf yprr1wx/bio- display-w-posts. jpg?dl=0 https://www. dropbox. com/s/i4di1ov5q mhft2z/bio- listing-display. jpg?dl=0 https://www. dropbox. com/s/gwv7d0y xfab8zyo/bio- edit.jpg?dl=0 TRUE Yes y Job A job opening at a government agency Currently handled by another system. Yes n Agency Communicati ons News, announcements, and records made available to the public News Blog posts, site news, and less official updates. https://georgia.gov/blog/2018-06-26/hands-free- law-and-others-taking-effect-july-1 Multi-use, need better name for this that covers News/Announc ement/Blog Post/Recipes/Et c. Blog List, Full TRUE https://www.dropbox.com/s/7nnkcsfm6esj0g0/news-display.jpg?dl=0 https://www.dropbox.com/s/6chwtmvqgqgqdmr/news-listing-display-example.jpg?dl=0 TRUE Yes y Event Events open to the public, or official meetings they should be informed about. https://dhs.georgia.gov/events/2018-07- 02/community-conversation-2018-public-hearing Should be able to link to an offsite page with other event systems Event List, Card, Full TRUE card only: https: //www.dropbox. com/s/ohr99z5q mqrbl5f/events- featured-sketch. jpg?dl=0 TRUE Yes y Official Record State documents covering changes in laws, public policies, or other official announcements. Increasingly seen as deprecated in favor of site-specific content types that do the same thing, more or less. Includes Legislation, Executive Orders, Reports, Letter Rulings, Policy Bulletins, Proclomations, Atty. General Opinions, Regulations, Rules Document, Site Page, Blog, Case List, Full TRUE https://www. dropbox. com/s/wz9cuwd nx7yn7ay/public -record-display. jpg?dl=0 TRUE Yes n Opinion Legal opinions published by the Atty General. y Agency Info Facts about agencies, their services, their staff, etc. Highly structured, aggregated on Georgia.gov for centralized presentation. Organization Your agency and its divisions or departments. Programs and services you provide to the public, or to other agencies. Program or Service Names, numbers, and addresses the public uses to contact you. Contact Agency Communications News, announcements, and records made available the public. Blog posts, site news, and less official updates. News Events open to the public, or official meetings they should informed about. Event State documents covering changes in laws, public policies, or other official announcements. Official Record Media and Microcontent These items may be embedded in “article” style content or listed on “collection” style content. Most should be accessib via the Document Management tools. A single YouTube video, with optional description and settings Video An image with optional title, caption, and rights information Picture An embeddable resource from a third party web site Embed Educational materials, downlodable forms, and more — almost always in PDF format Document Visitor Aids Used to direct new or confused visitors to the right location. These resources are probably organic search and social sharing hot spots. Organizational Tools Core building blocks for the site, including topic pages, special-purpose landing pages, and collections used to organize related items. Guide visitors through a specific task with a checklist or step-by-step instructions. How Do I…? Important deadlines, Important Date Answer common or related questions about a particular topic or service. FAQ List Explain a specific topic or provide details about another topic or service. Topic Page Landing Page Organize topics, resources, documents and more into a "hub" for visitors. Combine related content into a list for easier browsing and reference. Listing Page Gather information from the public with a survey or application form. Web Form A piece of promotiona content with no URL o own that can be place on other pages Call to Action Location Physical locations where the public can interact with your agency. Items in group a may include/ embed items in group b Items in group a explicitly relate to items in group b A list of links with optional rich text descriptions. Link Collection Book Organize collections of pages with an index and page-to-page navigation. Official press releases published by an agen or state official. Press Release Bio Profiles of staff, elected officials, web writers, and other individuals. High-priority messages Alert Platform-wide alert with Emergency Letterhead for Official Records released in a particular timeframe Record Header !88
  89. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + DISPLAY modeling !89
  90. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + CONTENT MODEL start from your !90
  91. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + ‣ Bespoke Pages ‣ Templates ‣ Bespoke Components ‣ Patterns ‣ Flows DISPLAY MODEL !91
  92. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + ATOMIC DESIGN !92 only simpler
  93. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + ATOMIC DESIGN !93 only simpler
  94. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + !94
  95. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + !95
  96. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + !96
  97. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + !97
  98. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + WORKSHOP! time to !98
  99. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + PURPOSE !99
  100. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + PURPOSE !100 PRIORITIES
  101. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + PURPOSE !101 PRIORITIES PROCESS
  102. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + EXERCISE A collaborative !102
  103. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + AIRING OF GRIEVANCES part 1 !103
  104. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + AIRING OF GRIEVANCES part 1 !104
  105. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + !105
  106. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + GROUP & GOALIFY part 2 !106
  107. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + !107
  108. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + PRIORITIZE! part 3 !108
  109. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + !109
  110. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + !110
  111. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + PRIMARY group all the things !111 SECONDARY TERTIARY
  112. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + !112
  113. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + SUCCESS plan for !113
  114. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + SUCCESS plan for !114
  115. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + PROCESS don’t forget !115
  116. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + MODELS IA DIAGRAMS FLOWS WIREFRAMES PROTOTYPES MOCKS !116
  117. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + END PRODUCT discuss !117
  118. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + MODELING governance !118
  119. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + MODELING governance !119 OVER LORD
  120. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + MODELING governance !120 CE NTRA LIZED
  121. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + MODELING governance !121 FED ERATED
  122. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + THAT WAS A LOT! thanks !122
  123. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + THAT WAS A LOT! thanks !123
  124. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + @jponch !124
  125. DE SI G NI NG DES IG N S YS

    T E MS DC AS HEV IL L E 20 1 9 + FOR MORE https://bit.ly/designing-design-systems !125