Designing Design Systems (FEDC 2019)

Designing Design Systems (FEDC 2019)

This was a talk at FEDC 2019 about design systems; what they are, how to know when you need one, and how to effectively plan and model a design system.

7653c7c449918ff6542880a8c284f5e7?s=128

Jared Ponchot

April 25, 2019
Tweet

Transcript

  1. designing DESIGN SYSTEMS JARED PONCHOT FRONT-END DESIGN CONFERENCE 2019 //

  2. hello there, & WELCOME!

  3. None
  4. I’m a DESIGNER

  5. I’m a DEVELOPER

  6. I’m a UNICORN

  7. I’m a OTHER

  8. L LARGE L XL EXTRA LARGE XL Or

  9. L LARGE L XL EXTRA LARGE XL M MEDIUM M

  10. L LARGE L XL EXTRA LARGE XL M MEDIUM M

    XXM EXTRA EXTRA MEDIUM XXM
  11. L LARGE L XL EXTRA LARGE XL M MEDIUM M

    S SMALL S
  12. L LARGE L XL EXTRA LARGE XL

  13. STR ATEGY D ESI GN D E VE LO P

    ME N T / / / /
  14. None
  15. Wait … DESIGN SYSTEM?

  16. WELCOME 1 AUDIENCE DEFINITION 2 WHO AM I? 3 DESIGN

    SYSTEM? 4 DO I NEED ONE? 5 HOW TO DESIGN ONE 6 YOU ARE HERE
  17. defining DESIGN SYSTEMS

  18. DESIGN SYSTEM what is a ?

  19. DESIGN SYSTEM what is a Style Guide

  20. DESIGN SYSTEM what is a Atomic Design Style Guide

  21. DESIGN SYSTEM what is a Pattern Library Atomic Design Style

    Guide
  22. DESIGN SYSTEM what is a Slick, expensive portal Pattern Library

    Atomic Design Style Guide
  23. “ — ALL A KHOLMATOVA, “ DESIGN SYSTE MS” 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.
  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
  25. None
  26. “ a set of principles, constraints, patterns, and documentation that

    empower disparate teams to create, maintain and extend a design efficiently and consistently. A DES IGN SYSTEM IS …
  27. when do I need a DESIGN SYSTEM?

  28. PHOTO BY ANDREW LIPOVSKY, NBC/ GETT Y name your VILLAIN

  29. problems of INEFFICIENCY

  30. problems of INCONSISTENCY

  31. problems of SCALE

  32. INEFFICIENCY INCONSISTENCY SCALE

  33. INEFFICIENCY INCONSISTENCY SCALE

  34. INEFFICIENCY INCONSISTENCY SCALE

  35. design to the CHALLENGE

  36. None
  37. “ Complex systems that work evolve from simpler systems that

    work. GALL’S LAW …
  38. None
  39. WHAT D O WE NEE D? Principles Constraints Patterns Documentation

  40. where to BEGIN

  41. DESIGN DEV PRODUCT BIZ CONTENT SALES

  42. DESIGN DEV PRODUCT BIZ CONTENT SALES

  43. 30 minute INDIVIDUAL INTERVIEWS

  44. What’s not WORKING WELL?

  45. What IS WORKING WELL?

  46. None
  47. design INVENTORY

  48. IMAGE BY BRAD FROST HTTPS://BRADFROST.COM/BLOG/POST/INTERFACE-INVENTORY/

  49. planning your DESIGN SYSTEM

  50. WHAT D O WE NEE D? Principles Constraints Patterns Documentation

  51. None
  52. None
  53. design PRINCIPLES

  54. “ Organize for outsiders.

  55. “ Celebrate the common.

  56. design CONSTRAINTS

  57. ‣ Audience ‣ Voice & Tone ‣ Typography ‣ Spacing

    & Rhythm CO NSTR AINTS ‣ Color ‣ Imagery ‣ Behaviors & Motion
  58. CO NSTR AINTS

  59. creating MODELS

  60. PHOTO FROM HTTPS://BIT.LY/2VJADIU PHOTO FROM HTTPS://BIT.LY/2HD7YAD PHOTO FROM HTTPS://BIT.LY/2XEHVBD

  61. Hero Cards / Grid List Calls to Action (Marketing Promo)

    Advertisements Calls to Action (Marketing Promo) Newsletter Signup
  62. repeat PROBLEMS

  63. greater COMPLEXITY

  64. greater COMPLEXITY greater INCONSISTENCY =

  65. None
  66. None
  67. modeling from CONTENT OUTWARD

  68. what are you PUBLISHING?

  69. what are you PUBLISHING? HOW OFTEN?

  70. what are you PUBLISHING? HOW OFTEN? WHAT’S THE PROCESS?

  71. what’s a CONTENT MODEL?

  72. ‣ Types of Content ‣ Attributes ‣ Relationships CO NTENT

    M OD E L
  73. None
  74. Why a content model? EVERY PROJECT HAS ONE

  75. DUDE, WHERE’S MY CONTENT MODEL?

  76. Why a content model? IT SHAPES WORKFLOWS

  77. REDESIGNS rely on it

  78. how to MODEL CONTENT

  79. ‣ Asset ‣ Structural ‣ Micro-content ‣ Presentational THE T

    YP ES OF T YPES
  80. EVENT CATEGORY ARTICLE Asset Structural Asset PROMO Presentational QUOTE Micro-content

  81. 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
  82. None
  83. None
  84. None
  85. None
  86. modeling DISPLAY

  87. ATOMIC DESIGN only simpler

  88. ‣ Bespoke Pages ‣ Templates ‣ Bespoke Components ‣ Patterns

    ‣ Flows DISPLAY MODE L
  89. start from your CONTENT MODEL

  90. time to WORKSHOP!

  91. PURPOSE

  92. PRIORITIES PURPOSE

  93. PRIORITIES PURPOSE PROCESS

  94. a collaborative EXERCISE

  95. None
  96. part 1 THE AIRING OF GRIEVANCES

  97. part 2 GROUP & GOALIFY

  98. None
  99. part 3 PRIORITIZE PRIORITIZE PRIORITIZE PRIORITIZE

  100. None
  101. None
  102. group all the things PRIMARY SECONDARY TERTIARY

  103. None
  104. don’t forget PROCESS

  105. MODELS IA DIAGRAMS FLOWS WIREFRAMES PROTOTYPES MOCKS

  106. discuss end PRODUCT

  107. plan for SUCCESS

  108. Thanks! THAT WAS A LOT!

  109. @JPONCH

  110. more HTTPS://BIT.LY/DESIGNING-DESIGN-SYSTEMS