$30 off During Our Annual Pro Sale. View Details »

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. designing
    DESIGN SYSTEMS
    JARED PONCHOT FRONT-END DESIGN CONFERENCE 2019
    //

    View Slide

  2. hello there, &
    WELCOME!

    View Slide

  3. View Slide

  4. I’m a
    DESIGNER

    View Slide

  5. I’m a
    DEVELOPER

    View Slide

  6. I’m a
    UNICORN

    View Slide

  7. I’m a
    OTHER

    View Slide

  8. L
    LARGE
    L
    XL
    EXTRA LARGE
    XL
    Or

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  12. L
    LARGE
    L
    XL
    EXTRA LARGE
    XL

    View Slide

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

    View Slide

  14. View Slide

  15. Wait …
    DESIGN SYSTEM?

    View Slide

  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

    View Slide

  17. defining
    DESIGN SYSTEMS

    View Slide

  18. DESIGN
    SYSTEM
    what is a
    ?

    View Slide

  19. DESIGN
    SYSTEM
    what is a
    Style Guide

    View Slide

  20. DESIGN
    SYSTEM
    what is a
    Atomic Design
    Style Guide

    View Slide

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

    View Slide

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

    View Slide


  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.

    View Slide

  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

    View Slide

  25. View Slide

  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 …

    View Slide

  27. when do I need a
    DESIGN SYSTEM?

    View Slide

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

    View Slide

  29. problems of
    INEFFICIENCY

    View Slide

  30. problems of
    INCONSISTENCY

    View Slide

  31. problems of
    SCALE

    View Slide

  32. INEFFICIENCY
    INCONSISTENCY
    SCALE

    View Slide

  33. INEFFICIENCY
    INCONSISTENCY
    SCALE

    View Slide

  34. INEFFICIENCY
    INCONSISTENCY
    SCALE

    View Slide

  35. design to the
    CHALLENGE

    View Slide

  36. View Slide

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

    View Slide

  38. View Slide

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

    View Slide

  40. where to
    BEGIN

    View Slide

  41. DESIGN DEV PRODUCT BIZ CONTENT SALES

    View Slide

  42. DESIGN DEV PRODUCT BIZ CONTENT SALES

    View Slide

  43. 30 minute
    INDIVIDUAL INTERVIEWS

    View Slide

  44. What’s not
    WORKING WELL?

    View Slide

  45. What IS
    WORKING WELL?

    View Slide

  46. View Slide

  47. design
    INVENTORY

    View Slide

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

    View Slide

  49. planning your
    DESIGN SYSTEM

    View Slide

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

    View Slide

  51. View Slide

  52. View Slide

  53. design
    PRINCIPLES

    View Slide

  54. “ Organize for outsiders.

    View Slide

  55. “ Celebrate the common.

    View Slide

  56. design
    CONSTRAINTS

    View Slide

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

    View Slide

  58. CO NSTR AINTS

    View Slide

  59. creating
    MODELS

    View Slide

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

    View Slide

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

    View Slide

  62. repeat
    PROBLEMS

    View Slide

  63. greater
    COMPLEXITY

    View Slide

  64. greater
    COMPLEXITY
    greater
    INCONSISTENCY
    =

    View Slide

  65. View Slide

  66. View Slide

  67. modeling from
    CONTENT OUTWARD

    View Slide

  68. what are you
    PUBLISHING?

    View Slide

  69. what are you
    PUBLISHING?
    HOW OFTEN?

    View Slide

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

    View Slide

  71. what’s a
    CONTENT MODEL?

    View Slide

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

    View Slide

  73. View Slide

  74. Why a content model?
    EVERY PROJECT HAS ONE

    View Slide

  75. DUDE, WHERE’S MY
    CONTENT MODEL?

    View Slide

  76. Why a content model?
    IT SHAPES WORKFLOWS

    View Slide

  77. REDESIGNS
    rely on it

    View Slide

  78. how to
    MODEL CONTENT

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  82. View Slide

  83. View Slide

  84. View Slide

  85. View Slide

  86. modeling
    DISPLAY

    View Slide

  87. ATOMIC DESIGN
    only simpler

    View Slide

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

    View Slide

  89. start from your
    CONTENT MODEL

    View Slide

  90. time to
    WORKSHOP!

    View Slide

  91. PURPOSE

    View Slide

  92. PRIORITIES
    PURPOSE

    View Slide

  93. PRIORITIES
    PURPOSE
    PROCESS

    View Slide

  94. a collaborative
    EXERCISE

    View Slide

  95. View Slide

  96. part 1
    THE AIRING OF GRIEVANCES

    View Slide

  97. part 2
    GROUP & GOALIFY

    View Slide

  98. View Slide

  99. part 3
    PRIORITIZE
    PRIORITIZE
    PRIORITIZE
    PRIORITIZE

    View Slide

  100. View Slide

  101. View Slide

  102. group all the things
    PRIMARY
    SECONDARY
    TERTIARY

    View Slide

  103. View Slide

  104. don’t forget
    PROCESS

    View Slide

  105. MODELS IA DIAGRAMS FLOWS WIREFRAMES PROTOTYPES MOCKS

    View Slide

  106. discuss end
    PRODUCT

    View Slide

  107. plan for
    SUCCESS

    View Slide

  108. Thanks!
    THAT WAS A LOT!

    View Slide

  109. @JPONCH

    View Slide

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

    View Slide