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.

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 Boilerplate

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

Examples:

• USWDS Page Templates

Screener prototyping tool template

• Custom questions with Markdown
• Simple logic flow with light jQuery
• Linked resources
• Step indicator
• Good for prototyping simple form content and interactions

Examples:

• Live site

Next steps and resources

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