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

    View full-size slide

  2. hello there, &
    WELCOME!

    View full-size slide

  3. I’m a
    DESIGNER

    View full-size slide

  4. I’m a
    DEVELOPER

    View full-size slide

  5. I’m a
    UNICORN

    View full-size slide

  6. I’m a
    OTHER

    View full-size slide

  7. L
    LARGE
    L
    XL
    EXTRA LARGE
    XL
    Or

    View full-size slide

  8. L
    LARGE
    L
    XL
    EXTRA LARGE
    XL
    M
    MEDIUM
    M

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. L
    LARGE
    L
    XL
    EXTRA LARGE
    XL

    View full-size slide

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

    View full-size slide

  13. Wait …
    DESIGN SYSTEM?

    View full-size slide

  14. 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 full-size slide

  15. defining
    DESIGN SYSTEMS

    View full-size slide

  16. DESIGN
    SYSTEM
    what is a
    ?

    View full-size slide

  17. DESIGN
    SYSTEM
    what is a
    Style Guide

    View full-size slide

  18. DESIGN
    SYSTEM
    what is a
    Atomic Design
    Style Guide

    View full-size slide

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

    View full-size slide

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

    View full-size slide


  21. — 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 full-size slide

  22. 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 full-size slide

  23. “ 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 full-size slide

  24. when do I need a
    DESIGN SYSTEM?

    View full-size slide

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

    View full-size slide

  26. problems of
    INEFFICIENCY

    View full-size slide

  27. problems of
    INCONSISTENCY

    View full-size slide

  28. problems of
    SCALE

    View full-size slide

  29. INEFFICIENCY
    INCONSISTENCY
    SCALE

    View full-size slide

  30. INEFFICIENCY
    INCONSISTENCY
    SCALE

    View full-size slide

  31. INEFFICIENCY
    INCONSISTENCY
    SCALE

    View full-size slide

  32. design to the
    CHALLENGE

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. where to
    BEGIN

    View full-size slide

  36. DESIGN DEV PRODUCT BIZ CONTENT SALES

    View full-size slide

  37. DESIGN DEV PRODUCT BIZ CONTENT SALES

    View full-size slide

  38. 30 minute
    INDIVIDUAL INTERVIEWS

    View full-size slide

  39. What’s not
    WORKING WELL?

    View full-size slide

  40. What IS
    WORKING WELL?

    View full-size slide

  41. design
    INVENTORY

    View full-size slide

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

    View full-size slide

  43. planning your
    DESIGN SYSTEM

    View full-size slide

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

    View full-size slide

  45. design
    PRINCIPLES

    View full-size slide

  46. “ Organize for outsiders.

    View full-size slide

  47. “ Celebrate the common.

    View full-size slide

  48. design
    CONSTRAINTS

    View full-size slide

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

    View full-size slide

  50. CO NSTR AINTS

    View full-size slide

  51. creating
    MODELS

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  54. repeat
    PROBLEMS

    View full-size slide

  55. greater
    COMPLEXITY

    View full-size slide

  56. greater
    COMPLEXITY
    greater
    INCONSISTENCY
    =

    View full-size slide

  57. modeling from
    CONTENT OUTWARD

    View full-size slide

  58. what are you
    PUBLISHING?

    View full-size slide

  59. what are you
    PUBLISHING?
    HOW OFTEN?

    View full-size slide

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

    View full-size slide

  61. what’s a
    CONTENT MODEL?

    View full-size slide

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

    View full-size slide

  63. Why a content model?
    EVERY PROJECT HAS ONE

    View full-size slide

  64. DUDE, WHERE’S MY
    CONTENT MODEL?

    View full-size slide

  65. Why a content model?
    IT SHAPES WORKFLOWS

    View full-size slide

  66. REDESIGNS
    rely on it

    View full-size slide

  67. how to
    MODEL CONTENT

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  70. 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 full-size slide

  71. modeling
    DISPLAY

    View full-size slide

  72. ATOMIC DESIGN
    only simpler

    View full-size slide

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

    View full-size slide

  74. start from your
    CONTENT MODEL

    View full-size slide

  75. time to
    WORKSHOP!

    View full-size slide

  76. PRIORITIES
    PURPOSE

    View full-size slide

  77. PRIORITIES
    PURPOSE
    PROCESS

    View full-size slide

  78. a collaborative
    EXERCISE

    View full-size slide

  79. part 1
    THE AIRING OF GRIEVANCES

    View full-size slide

  80. part 2
    GROUP & GOALIFY

    View full-size slide

  81. part 3
    PRIORITIZE
    PRIORITIZE
    PRIORITIZE
    PRIORITIZE

    View full-size slide

  82. group all the things
    PRIMARY
    SECONDARY
    TERTIARY

    View full-size slide

  83. don’t forget
    PROCESS

    View full-size slide

  84. MODELS IA DIAGRAMS FLOWS WIREFRAMES PROTOTYPES MOCKS

    View full-size slide

  85. discuss end
    PRODUCT

    View full-size slide

  86. plan for
    SUCCESS

    View full-size slide

  87. Thanks!
    THAT WAS A LOT!

    View full-size slide

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

    View full-size slide