An introduction to design systems
What is a design system?
A design system is a pre-built set of visual styles, features, and functions for a website, so that web designers and developers don’t have to build a site from scratch and can easily ensure quality. For example, if you need to build a website for a federal agency, you could use some pre-built components or styles from the U.S. Web Design System (USWDS) to make your job easier and improve the user experience of your agency’s website.
Why use a design system?
There are a lot of good reasons to use a design system. Many organizations use them to unify different brands with distinct but unified aesthetics. Using a design system can take the guesswork out of making your site:
- Trustworthy — Your users can easily trust that your site is the one they need if you are using recognizable, standardized designs and features.
- Accessible — If you’re using an accessibility-tested design system, you can trust that you have the tools to build accessible websites, because the creators of the system have already done much of the testing for you.
- Compliant — The website standards say that agencies should use the U.S. Web Design System (USWDS), which was created to meet the unique needs of federal websites and digital services.
- Efficient — Well-maintained design systems are usually tested for speed, efficiency, and compatibility with recent technology. You can usually find statistics and information about a design system’s size and performance on their website.
How to start using a design system
Although using a design system can take a lot of guesswork out of building the best site possible, you will need to make sure you’re choosing the right one before you get started. Here are some things to do before you start using a design system:
Investigate. Ask your supervisor if a design system is already required and available within your organization. For example, if you manage a federal website, check out the U.S. Web Design System or your agency’s design system, such as the VA.gov Design System.
Communicate. Talk with your designers, engineers, and content managers about options and what you need from a design system. Make a list and compare your options against it.
Connect. Reach out to your agency’s Federal Web Council representative and digital experience delivery lead. Have a discussion about your design needs. Ask about what support they can provide.
Plan. Consider planning incremental (or paced) adoption of the design system so that you are not overwhelmed with all of the choices at once.
Prioritize. Focus on the most important or required elements you’ll need. Find out if you can incorporate those priority elements first.
Evaluate. Make sure the design system meets accessibility standards and your agency’s usability requirements, such as publishing an accessibility statement.
Collaborate. Work with your designers, engineers, and content managers to implement the design system or system elements you’ve chosen. It’s a team effort to make sure that the elements you’re using from the design system work together and work well.
Integrate. Make a plan to update your design regularly in case the design system changes or requirements are updated, and incorporate that plan into your organization’s roadmap.
Making these important decisions and communicating ahead of adopting a design system are key. This upfront planning will save time and effort in the long run and offer tremendous return on investment.
What can I do next?
If you manage a federal website, be sure you understand the requirements for delivering a digital-first public experience.Also, learn how to use the U.S. Web Design System. For example, at GSA, many web teams get started by using the Design System’s Banner and Identifier components to identify their site as an official government site.
