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. For example, if you need to build a website for a federal agency, you could use some pre-built components or styles from a design system to make your job easier.
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. For example, an official banner can identify a reliable U.S. website.
- Accessible — If you’re using a 508-tested and UX (User Experience) tested design system, you can trust that you’ll be creating accessible websites, because the creators of the system have already done the testing for you.
- Compliant — The 21st Century Integrated Digital Experience Act requires the use of the U.S. Web Design System (USWDS), which was created to meet the needs of federal agencies that provide digital resources.
- 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 adopt a web design system:
- Investigate. Ask your supervisor if there is one already required and available within your organization. If you manage a federal website, you must comply with the website standards. The standards require you to use the USWDS maturity model to deliver a great digital experience. You don’t need to adopt the design system all at once. While most agencies use USWDS code, some have developed their own design systems. For example, the VA uses the VA.gov design system.
- Communicate. Talk with your design team about options and what you’d need to get started. Make a list and compare your options against it.
- Connect. Reach out to your agency’s Federal Web Council representative or digital services director. 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. For example, does your agency require a standardized footer? Many agencies use the USWDS Identifier component, which includes the required links that all federal websites need to have.
- Evaluate. Make sure the design system meets federal standards for accessibility and your agency’s usability requirements. Look for an accessibility statement or ask about accessibility testing standards.
- Collaborate. Work with your designers, engineers, web 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.
Connect with others interested in design systems
Want to learn more? Join Digital.gov’s User Experience Community, or sign up to receive the U.S. Web Design System’s newsletter. You can also join the USWDS community.