index.md

layout	title	body-style	layout-style
grid-container	Home	bg-primary-darker text-accent-warm-lighter line-height-body-4 padding-bottom-9

Rapid Web Prototyping Workshop

{: .font-body-3xl .line-height-body-2}

{% include content/banner.html %}

Learn how to make rapid web prototypes — responsive as code, easy as paper — and get real feedback real fast. {: .font-body-lg}

{% include components/button.html link="agenda.html" label="Go to course content" style="usa-button usa-button--big bg-accent-warm-light text-ink hover:bg-accent-warm-dark margin-bottom-2" %} {: .text-ink}

Why rapid web prototyping

{: .font-body-xl .line-height-body-2}

Get down with Markdown and go content-first.

{: .text-accent-warm-light .text-uppercase}

{% include content/emoji.html character="🕺" %}

The most important thing people interact with on your page is the content. This is why they’re there — either to get information or get something done. So let go of lorem ipsum and start testing your content first. Markdown makes it easy to format your text without messy HTML tags. {: .font-body-md .tablet:margin-left-9}

{: .text-center}

Goodbye hotspot. Hello hyperlink.

{: .text-accent-warm-light .text-uppercase}

{% include content/emoji.html character="👋" %}

Hotspot-based prototype tools are nice, but there’s nothing like interacting with a real website on a real device for seeing how users actually respond to your hypothesis. And as easy as it is to build in the browser, you’ll spend less time futzing around in Figma and more time validating your ideas. {: .font-body-md .tablet:margin-left-9}

{: .text-center}

Stop annotating and start iterating.

{: .text-accent-warm-light .text-uppercase}

{% include content/emoji.html character="♼" %}

Working with an accessibility-aware, mobile-friendly design system allows you to focus more on collaboration with developers and less on communicating design details. The U.S. Web Design System includes a robust set of well-documented components that work out of the box. Even if you’re already using a design system, this approach covers the basics so you can concentrate on what makes your design unique. {: .font-body-md .tablet:margin-left-9}

{: .text-center}

What you’ll learn

{: .font-body-xl .line-height-body-2}

Use the Trap Kit template to build working prototypes in the browser with the human-friendliest tech stack around: Markdown for content, USWDS for components, and GitHub Pages for hosting. All free and open-source. {: .font-body-md}

1. Create content and link it together with GitHub-flavored Markdown.
2. Add U.S. Web Design System components to your pages with a line of human-readable, plain-text.
3. Go live with GitHub Pages and get feedback from real people on real devices. {: .font-body-md}

{% include components/button.html link="agenda.html" label="Go to course content" style="usa-button usa-button--big bg-accent-warm-light text-ink hover:bg-accent-warm-dark margin-bottom-2" %} {: .text-ink .text-center}

Made with Trap Kit{: .text-accent-warm-light .hover:text-accent-warm} and available on GitHub{: .text-accent-warm-light .hover:text-accent-warm}. {: .text-center}

Illustration by Illustrations.co{: .text-accent-warm-light .hover:text-accent-warm} {: .text-center}