Rapid web prototyping with the U.S. Web Design System

How can designers and developers work together to design in code? How can prototypes help answer critical design questions? How can USWDS help you build faster than you might have thought possible?

Join the USWDS team for our December call, as we look at rapid prototyping with USWDS.

Note: This handout includes links to non-government sources. We’ve included these links for education purposes only, and we do not endorse the information on any linked non-government site, nor the organization hosting the information.

Why rapid web prototyping?

Rapid prototyping accelerates learning, reduces risk, and improves outcomes.

• Doing it in the browser with realistic content generates meaningful feedback early in the process.
• Using USWDS aligns design and development around a common language to build shared artifacts.
• Involves the whole team and creates a shared understanding of what you’re building toward.

How to do it

• Compiled CSS and JS with CDNJS
• Instant rendering with CodePen
• Hosted sites with GitHub Pages (or Federalist)
• Accessible content with Markdown

Getting started

CodePen templates

USWDS Blank Slate

• Default CSS and JS only
• No preset layout
• Markdown preprocessing (no classes)
• Good for experimenting with components

Examples:

• Prototyping breadcrumb component

USWDS Boilerplate

• Default CSS and JS
• Header and footer
• Grid container
• usa-prose
• No preprocessing (design tokens and utility classes)
• Good for realistic page layouts

Examples:

• Mocking up card layout
• Content prototype exploration for this content intake form🔒

USWDS User Flows

• Basic styling
• Focused on content (what’s on the page) and actions (what you can do there)
• Markdown preprocessing
• Light jQuery to simplify content and keep it all on one page
• Good for quickly prototyping sequential interactions

Examples:

• Prototyping user flow for app experiment

GitHub templates

USWDS Sandbox

• GitHub version of CodePen template
• Better separation of content and layout (Jekyll)
• Better collaboration and version control
• Hosting with Federalist, but takes more time to view results unless running locally
• Good for better tracking of iterations and more complex content

Next steps and resources

• Review this handout!
• Fork CodePen templates.
• Check out USWDS Sandbox.
• Get familiar with Markdown.
• Reach out on USWDS Slack with questions or feedback (or use CodePen and GitHub for template-specific feedback).