How to Integrate the Draft U.S. Web Design Standards into Existing Projects

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.

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

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. 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 or email U.S. Web Design Standards directly. You can also contribute code and content to the project on GitHub.

This post was originally published on the 18F blog by Carolyn Dew, Melody Kramer and Maya Benari, 18F team members.