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.

Transcript

1. designing DESIGN SYSTEMS JARED PONCHOT FRONT-END DESIGN CONFERENCE 2019 //
2. hello there, & WELCOME!
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 / / / /
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
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
37. “ Complex systems that work evolve from simpler systems that work. GALL’S LAW …
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?
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
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 =
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
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
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
96. part 1 THE AIRING OF GRIEVANCES
97. part 2 GROUP & GOALIFY
99. part 3 PRIORITIZE PRIORITIZE PRIORITIZE PRIORITIZE
102. group all the things PRIMARY SECONDARY TERTIARY
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