18F/18f.gsa.gov

View on GitHub
_posts/2016-03-23-how-to-integrate-the-draft-us-web-design-standards-into-existing-projects.md

Summary

Maintainability
Test Coverage
---
title: "How to integrate the Draft U.S. Web Design Standards into existing projects"
date: "2016-03-23 09:00 EDT"
authors:
  - carolyn
  - melody
  - maya
tags:
  - web design system
  - design
excerpt: "One of the most common questions we receive is: Should I integrate the
Draft U.S. Web Design Standards into my existing project? The answer is: it depends."
description: "One of the most common questions we receive is: Should I integrate the
Draft U.S. Web Design Standards into my existing project? The answer is: it depends."
image: /assets/blog/web-design-standards/home.png
---

One of the most common questions we receive is: Should I integrate the
Draft U.S. Web Design Standards into my existing project?

The answer is: it depends.

A lot of design research supports the notion that many people who use
government websites or services may benefit from consistency across
interactions, user experiences, and behavior across those websites. A
consistent look and feel with common design elements will feel familiar,
trustworthy, and secure — and users will be able to navigate government
websites more easily because of a common palette and design.

The Draft Standards offer a single visual style that can be flexibly
applied to a broad range of government digital platforms, but is not
required. These standards are primarily about creating consistency in
interactions, user experience, and behavior; they also provide default
color and typography guidance for teams who specifically need visual
look and feel direction. The styling of the standards can also be
customized to comply with an agency’s existing brand guidelines, so that
agencies can retain their own established identities.

But integrating the Draft Standards, which are still being developed,
largely depends on how far along you are with a project.

**If you’re just starting out**, you can use the whole thing: visual style
and UI components. Find out [how to get
started](https://github.com/18F/web-design-standards/blob/18f-pages-staging/README.md).

**If you’re in the middle of the project**, it might be best to think
how you can fold parts of the standards into your project. For example,
maybe you want to just add in [our fonts and
colors](https://standards.usa.gov/visual-style/) and
leave the rest of your system as is.

**If you have an existing site already**, it may not make sense to
integrate the complete Draft Standards given your agency's current
needs. A good way to incorporate the Draft Standards in this case is to
implement components that are on every one of your webpages if they fit
in with your existing design. For example, you can bring in the Draft
Standards form fields or [side
navigation](https://standards.usa.gov/sidenav/).

Many federal websites are made with Drupal or another CMS that uses
templating. If your site is made with Drupal, there's a good chance it
uses templating for those elements, making them relatively easy to
change site wide. Perhaps the guidelines can inform parts of your
project or process, like [how to design
forms](https://standards.usa.gov/form-templates/). We
would be happy to provide guidance to you if you implement this
framework on your next project.

We’re talking with teams across the federal government who are testing
the Draft Standards out on a number of sites, and we’re beginning
conversations about the next steps for the Draft Standards. We welcome
the feedback and input of the broader government digital community —
both to help make any recommendations for standards usage and for
improving the guidelines themselves.

Want to know more?
------------------

We’re happy to share more information about the Web Design Standards. If
you have additional questions, open an issue on
[GitHub](https://github.com/18F/web-design-standards/issues) or email
us directly at
[uswebdesignstandards@gsa.gov](mailto:uswebdesignstandards@gsa.gov).
You can also contribute code and content to the project on GitHub.