Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

hello there, & WELCOME!

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

I’m a DESIGNER

Slide 5

Slide 5 text

I’m a DEVELOPER

Slide 6

Slide 6 text

I’m a UNICORN

Slide 7

Slide 7 text

I’m a OTHER

Slide 8

Slide 8 text

L LARGE L XL EXTRA LARGE XL Or

Slide 9

Slide 9 text

L LARGE L XL EXTRA LARGE XL M MEDIUM M

Slide 10

Slide 10 text

L LARGE L XL EXTRA LARGE XL M MEDIUM M XXM EXTRA EXTRA MEDIUM XXM

Slide 11

Slide 11 text

L LARGE L XL EXTRA LARGE XL M MEDIUM M S SMALL S

Slide 12

Slide 12 text

L LARGE L XL EXTRA LARGE XL

Slide 13

Slide 13 text

STR ATEGY D ESI GN D E VE LO P ME N T / / / /

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

Wait … DESIGN SYSTEM?

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

defining DESIGN SYSTEMS

Slide 18

Slide 18 text

DESIGN SYSTEM what is a ?

Slide 19

Slide 19 text

DESIGN SYSTEM what is a Style Guide

Slide 20

Slide 20 text

DESIGN SYSTEM what is a Atomic Design Style Guide

Slide 21

Slide 21 text

DESIGN SYSTEM what is a Pattern Library Atomic Design Style Guide

Slide 22

Slide 22 text

DESIGN SYSTEM what is a Slick, expensive portal Pattern Library Atomic Design Style Guide

Slide 23

Slide 23 text

“ — 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.

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

“ 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 …

Slide 27

Slide 27 text

when do I need a DESIGN SYSTEM?

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

problems of INEFFICIENCY

Slide 30

Slide 30 text

problems of INCONSISTENCY

Slide 31

Slide 31 text

problems of SCALE

Slide 32

Slide 32 text

INEFFICIENCY INCONSISTENCY SCALE

Slide 33

Slide 33 text

INEFFICIENCY INCONSISTENCY SCALE

Slide 34

Slide 34 text

INEFFICIENCY INCONSISTENCY SCALE

Slide 35

Slide 35 text

design to the CHALLENGE

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

“ Complex systems that work evolve from simpler systems that work. GALL’S LAW …

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

WHAT D O WE NEE D? Principles Constraints Patterns Documentation

Slide 40

Slide 40 text

where to BEGIN

Slide 41

Slide 41 text

DESIGN DEV PRODUCT BIZ CONTENT SALES

Slide 42

Slide 42 text

DESIGN DEV PRODUCT BIZ CONTENT SALES

Slide 43

Slide 43 text

30 minute INDIVIDUAL INTERVIEWS

Slide 44

Slide 44 text

What’s not WORKING WELL?

Slide 45

Slide 45 text

What IS WORKING WELL?

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

design INVENTORY

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

planning your DESIGN SYSTEM

Slide 50

Slide 50 text

WHAT D O WE NEE D? Principles Constraints Patterns Documentation

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

design PRINCIPLES

Slide 54

Slide 54 text

“ Organize for outsiders.

Slide 55

Slide 55 text

“ Celebrate the common.

Slide 56

Slide 56 text

design CONSTRAINTS

Slide 57

Slide 57 text

‣ Audience ‣ Voice & Tone ‣ Typography ‣ Spacing & Rhythm CO NSTR AINTS ‣ Color ‣ Imagery ‣ Behaviors & Motion

Slide 58

Slide 58 text

CO NSTR AINTS

Slide 59

Slide 59 text

creating MODELS

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

Hero Cards / Grid List Calls to Action (Marketing Promo) Advertisements Calls to Action (Marketing Promo) Newsletter Signup

Slide 62

Slide 62 text

repeat PROBLEMS

Slide 63

Slide 63 text

greater COMPLEXITY

Slide 64

Slide 64 text

greater COMPLEXITY greater INCONSISTENCY =

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

modeling from CONTENT OUTWARD

Slide 68

Slide 68 text

what are you PUBLISHING?

Slide 69

Slide 69 text

what are you PUBLISHING? HOW OFTEN?

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

what’s a CONTENT MODEL?

Slide 72

Slide 72 text

‣ Types of Content ‣ Attributes ‣ Relationships CO NTENT M OD E L

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

Why a content model? EVERY PROJECT HAS ONE

Slide 75

Slide 75 text

DUDE, WHERE’S MY CONTENT MODEL?

Slide 76

Slide 76 text

Why a content model? IT SHAPES WORKFLOWS

Slide 77

Slide 77 text

REDESIGNS rely on it

Slide 78

Slide 78 text

how to MODEL CONTENT

Slide 79

Slide 79 text

‣ Asset ‣ Structural ‣ Micro-content ‣ Presentational THE T YP ES OF T YPES

Slide 80

Slide 80 text

EVENT CATEGORY ARTICLE Asset Structural Asset PROMO Presentational QUOTE Micro-content

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

modeling DISPLAY

Slide 87

Slide 87 text

ATOMIC DESIGN only simpler

Slide 88

Slide 88 text

‣ Bespoke Pages ‣ Templates ‣ Bespoke Components ‣ Patterns ‣ Flows DISPLAY MODE L

Slide 89

Slide 89 text

start from your CONTENT MODEL

Slide 90

Slide 90 text

time to WORKSHOP!

Slide 91

Slide 91 text

PURPOSE

Slide 92

Slide 92 text

PRIORITIES PURPOSE

Slide 93

Slide 93 text

PRIORITIES PURPOSE PROCESS

Slide 94

Slide 94 text

a collaborative EXERCISE

Slide 95

Slide 95 text

No content

Slide 96

Slide 96 text

part 1 THE AIRING OF GRIEVANCES

Slide 97

Slide 97 text

part 2 GROUP & GOALIFY

Slide 98

Slide 98 text

No content

Slide 99

Slide 99 text

part 3 PRIORITIZE PRIORITIZE PRIORITIZE PRIORITIZE

Slide 100

Slide 100 text

No content

Slide 101

Slide 101 text

No content

Slide 102

Slide 102 text

group all the things PRIMARY SECONDARY TERTIARY

Slide 103

Slide 103 text

No content

Slide 104

Slide 104 text

don’t forget PROCESS

Slide 105

Slide 105 text

MODELS IA DIAGRAMS FLOWS WIREFRAMES PROTOTYPES MOCKS

Slide 106

Slide 106 text

discuss end PRODUCT

Slide 107

Slide 107 text

plan for SUCCESS

Slide 108

Slide 108 text

Thanks! THAT WAS A LOT!

Slide 109

Slide 109 text

@JPONCH

Slide 110

Slide 110 text

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