User Experience GuideUse a design system
A design system can help your team prototype faster, scale, manage front-end design debt, and apply consistency across your applications. As a project grows, designers and engineers often find themselves managing dozens of variations of the same button, for example, across hundreds of lines of code. This can create duplication that slows down the build process, requiring extra work to ensure consistent styles across all the appropriate states, and adds more things to check as you’re making sure every screen of your application is accessible to all.
The U.S. Web Design System
Digital.gov states that the 21st Century IDEA requires agencies to comply with the website standards created by TTS. The website standards say agencies should use the U.S. Web Design System (USWDS).
Many teams at 18F begin by installing the USWDS package and adding additional components and styles to fit the needs of their application. The USWDS provides installation instructions to get started
Design systems like USWDS are more than buttons; USWDS extends to provide guidance and example code for all kinds of components, so you don’t have to start from scratch.
You may end up using the USWDS to handle a lot of the basic decisions (like USWDS layout grid and USWDS form fields and fields), so you can focus on the components that are specific to your use case (like file upload boxes and progress indicators).
The best place to get started with the USWDS is by heading to designsystem.digital.gov and jumping into the 18F only, #uswds-public Slack channel. There you’ll find instructions on how to use the USWDS no matter what technology stack you’re using, as well as Sketch files provided by the USWDS to work with when you’re not designing in code.
