{
    "version" : "https://jsonfeed.org/version/1",
    "content" : "news",
    "type" : "single",
    "title" : "Why Your Team Needs Its Own Style Guide and Where to Start |Digital.gov",
    "description": "Why Your Team Needs Its Own Style Guide and Where to Start",
    "home_page_url" : "/preview/gsa/digitalgov.gov/cm-topics-button-component/","feed_url" : "/preview/gsa/digitalgov.gov/cm-topics-button-component/2018/02/13/why-your-team-needs-its-own-style-guide-where-start/index.json","item" : [
    {"title" :"Why Your Team Needs Its Own Style Guide and Where to Start","summary" : "Learn how creating your own style guide can help facilitate development for agency websites. Review best practices, lessons learned, and examples from the U.S. Web Design System, Consumer Financial Protection Bureau, and the United States Patent and Trademark Office.","date" : "2018-02-13T10:00:00-05:00","date_modified" : "2024-04-02T09:45:13-04:00","authors" : {"meghan-lazier" : "Meghan Lazier"},"topics" : {
        
            "accessibility" : "Accessibility",
            "accessibility" : "Accessibility",
            "content-strategy" : "Content Strategy",
            "design" : "Design",
            "mobile" : "Mobile",
            "user-experience" : "User Experience"
            },"featured_image" : { "uid" :
  "cfpb-secondary-color-palette-swatches-featured", "alt" :
  "CFPB Design Manual: Secondary Colors Palette." },"branch" : "cm-topics-button-component",
      "filename" :"2018-02-13-why-your-team-needs-its-own-style-guide-where-start.md",
      
      "filepath" :"news/2018/02/2018-02-13-why-your-team-needs-its-own-style-guide-where-start.md",
      "filepathURL" :"https://github.com/GSA/digitalgov.gov/blob/cm-topics-button-component/content/news/2018/02/2018-02-13-why-your-team-needs-its-own-style-guide-where-start.md",
      "editpathURL" :"https://github.com/GSA/digitalgov.gov/edit/cm-topics-button-component/content/news/2018/02/2018-02-13-why-your-team-needs-its-own-style-guide-where-start.md","slug" : "why-your-team-needs-its-own-style-guide-where-start","url" : "/preview/gsa/digitalgov.gov/cm-topics-button-component/2018/02/13/why-your-team-needs-its-own-style-guide-where-start/","content" :"\u003cp\u003eMy team at the Federal Reserve is about to launch our first style guide and now that we have gone through the process and created this valuable resource, I can’t imagine creating another app or website without it. Here’s why your team needs a style guide and lessons learned from our experience.\u003c/p\u003e\n\u003cdiv\n  class=\"image\"\n\u003e\u003cimg\n      src=\"https://s3.amazonaws.com/digitalgov/cfpb-design-manual-page-components-50-50-image-and-text_w800.png\"\n      \n        alt=\"CFPB Design Manual, Page Components: A pair of 50/50 image and text components, as seen on a landing page template.\"\n        srcset=\"https://s3.amazonaws.com/digitalgov/cfpb-design-manual-page-components-50-50-image-and-text_bu.jpg 48w,https://s3.amazonaws.com/digitalgov/cfpb-design-manual-page-components-50-50-image-and-text_w1200.png 1200w,https://s3.amazonaws.com/digitalgov/cfpb-design-manual-page-components-50-50-image-and-text_w800.png 800w,https://s3.amazonaws.com/digitalgov/cfpb-design-manual-page-components-50-50-image-and-text_w600.png 600w,https://s3.amazonaws.com/digitalgov/cfpb-design-manual-page-components-50-50-image-and-text_w400.png 400w,https://s3.amazonaws.com/digitalgov/cfpb-design-manual-page-components-50-50-image-and-text_w200.png 200w\"\n\n      sizes=\"(max-width: 800px) 100vw, 800px\"\n    /\u003e\u003cp\u003eCFPB Design Manual, Page Components: A pair of \u003ca href=\"https://cfpb.github.io/design-manual/page-components/50-50.html\"\u003e50/50 image and text components\u003c/a\u003e, as seen on a landing page template.\u003c/p\u003e\u003c/div\u003e\n\n\n\u003ch2 id=\"what-is-a-style-guide\"\u003eWhat Is a Style Guide?\u003c/h2\u003e\n\u003cp\u003eLet’s start with the basics. A style guide is a reference document that can consist of styles, interactions, and user experience patterns and solutions that solve common and recurring design problems. Here’s what our guide consists of:\u003c/p\u003e\n\u003cp\u003eOur guide has three different sections:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eDesign Elements\u003c/strong\u003e: This section describes stylistic choices our team is committed to, including typography, color palette, logos and icons.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003ePatterns and Interactions\u003c/strong\u003e: This section contains best practices for solving coming design problems and tensions, from alerts to error messages and tags to tables. Design elements can typically be applied to the content in this section.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eAssets\u003c/strong\u003e: This section contains other downloadable design resources we’ve created, like PowerPoint presentation templates and SharePoint layouts, that don’t fit into other sections of the guide.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eWithin every section of our style guide, we answer the following questions about each topic:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eWhat does it (the design element, pattern or interaction, or asset) do?\u003c/li\u003e\n\u003cli\u003eWhy use it?\u003c/li\u003e\n\u003cli\u003eHow to implement it?\u003c/li\u003e\n\u003cli\u003eWhen to avoid it?\u003c/li\u003e\n\u003cli\u003eBest Practices for Accessibility?\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eLike other style guides created for the web, we’ve also included code snippets where applicable to each topic we cover.\u003c/p\u003e\n\u003ch2 id=\"make-it-your-own\"\u003eMake It Your Own\u003c/h2\u003e\n\u003cp\u003eConsider your team’s needs, preferences and context to create a style guide that works for you. Here are some tips:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003eLead with Language\u003c/strong\u003e: While the three sections of our style guide – design elements, patterns and interactions and assets – might seem simple, it took many iterations to find clarity. Our team plowed through examples of \u003ca href=\"http://styleguides.io/examples.html\"\u003eexisting style guides\u003c/a\u003e to better understand how to organize relevant content and material. Some style guides were too complex for our needs or laced with unfamiliar jargon our team doesn’t use. We wanted everyone on our team to know where to go to find the answer to their problem – no middleman required. Simply copying and pasting using other people’s information architecture and labels didn’t work for our team, and it likely won’t work for you.\u003c/p\u003e\n\u003cp\u003eAfter pursuing other style guides for structural ideas, pause and think about your team. How does your team communicate? Do you have a shared language around design and development topics? Does any part of your process, whether agile, learn or otherwise, need to be considered in the structure? Information architecture should be your first step, and don’t expect to get it right the first time.\u003c/p\u003e\n\u003cp\u003eYou can also think about user testing your style guide, or particular sections, to confirm that your team is aligned with other departments. Would agency communications or public affairs be interested in editing or contributing? Is your guide easily accessible as judged by its copy?\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003eProvide a Design Education\u003c/strong\u003e: Design can appear confusing and complicated – and even pretentious – for those that haven’t studied it. Your style guide is an opportunity to show how a streamlined design system can create clarity and showcase just how far design decisions can reach. If you reframe the project as a way to educate about design, how would your approach change?\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003eIntegrate Other Design Related Resources\u003c/strong\u003e: Has your team hashed out its own set of design or experience principles? Does your agency have a writing guidelines or guidance on grammar? Where do you store your current assets – like photography and icons? Does everyone know where these files live? Think about other useful and existing resources to incorporate into your style guide.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003eReduce, Reuse, Remix\u003c/strong\u003e: Our team has a set of user experience principles that explain what we do and how we approach our work. One of our tenants, “reduce, reuse and remix,” is easily my favorite. It’s not always necessary to build from scratch, and if we can reuse code, design or copy from existing places, we encourage each other to do so. Fortunately, there are incredible existing pattern libraries that take into account the needs and challenges of designers in federal government. The \u003ca href=\"https://designsystem.digital.gov/\"\u003eU.S. Web Design System\u003c/a\u003e, the \u003ca href=\"https://uspto.github.io/designpatterns/\"\u003eUSPTO UI Design Gallery\u003c/a\u003e and the \u003ca href=\"https://cfpb.github.io/design-manual/\"\u003eCFPB’s Design Manual\u003c/a\u003e all helped us follow patterns where it made sense, but allowed us to get creative in solving design problems unique to our organization.\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003cdiv\n  class=\"image\"\n\u003e\u003cimg\n      src=\"https://s3.amazonaws.com/digitalgov/uspto-primary-ui-color-swatches_w800.jpg\"\n      \n        alt=\"USPTO UI Design Library: 10 Primary UI colors\"\n        srcset=\"https://s3.amazonaws.com/digitalgov/uspto-primary-ui-color-swatches_bu.jpg 48w,https://s3.amazonaws.com/digitalgov/uspto-primary-ui-color-swatches_w600.jpg 600w,https://s3.amazonaws.com/digitalgov/uspto-primary-ui-color-swatches_w400.jpg 400w,https://s3.amazonaws.com/digitalgov/uspto-primary-ui-color-swatches_w200.jpg 200w\"\n\n      sizes=\"(max-width: 800px) 100vw, 800px\"\n    /\u003e\u003cp\u003eUSPTO UI Design Library: \u003ca href=\"https://uspto.github.io/designpatterns/1.x/docs/foundation/colors.html\"\u003e10 Primary UI colors\u003c/a\u003e\u003c/p\u003e\u003c/div\u003e\n\n\n\u003ch2 id=\"instant-impact\"\u003eInstant Impact\u003c/h2\u003e\n\u003cp\u003eEven though our style guide isn’t fully launched (yet!), I’ve already seen changes in our team’s productivity and communication. Why? Because at its heart, a style guide is a tool to better communicate. When communication is clear, productivity improves.\u003c/p\u003e\n\u003cp\u003eResources, including your time, can also be used more effectively the launch of a style guide. Instead of spelling out every single design decision, it’s possible for teammates to reference the same guidelines. When you don’t have to delve into side conversations about when to use a radio button and when to use a checkbox, larger conversations about design can happen.\u003c/p\u003e\n\u003cp\u003eOnce you have a style guide, it’s much easier to scale. You have a foundation to make products in a modular way, if you choose. Your style guide will help you build whatever is next.\u003c/p\u003e\n\u003chr\u003e\n\u003cp\u003e\u003cem\u003eHas your team created a style guide? \u003ca href=\"mailto:digitalgov@gsa.gov\"\u003eSend it to DigitalGov\u003c/a\u003e so we can include it on our \u003ca href=\"https://www.digitalgov.gov/resources/style-guides-by-government-agencies/\"\u003eStyle Guides by Government Agencies\u003c/a\u003e page in the \u003ca href=\"https://www.digitalgov.gov/resources/\"\u003eResources\u003c/a\u003e section.\u003c/em\u003e\u003c/p\u003e\n"}
  ]
}