Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Jared Ponchot

April 25, 2019
Tweet

More Decks by Jared Ponchot

Other Decks in Design

Transcript

  1. L LARGE L XL EXTRA LARGE XL M MEDIUM M

    XXM EXTRA EXTRA MEDIUM XXM
  2. 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
  3. “ — 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.
  4. 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
  5. “ 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 …
  6. ‣ Audience ‣ Voice & Tone ‣ Typography ‣ Spacing

    & Rhythm CO NSTR AINTS ‣ Color ‣ Imagery ‣ Behaviors & Motion
  7. Hero Cards / Grid List Calls to Action (Marketing Promo)

    Advertisements Calls to Action (Marketing Promo) Newsletter Signup
  8. 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