Rapid Web Prototyping Workshop

Illustration of a laptop, clipboard with checklist, and a smiling cup of coffee. By Vijay Verma
Turn plain-jane text into fancy-schmancy prototypes.

Learn how to make rapid web prototypes — responsive as code, easy as paper — and get real feedback real fast.

Go to course content

Why rapid web prototyping

Get down with Markdown and go content-first.

🕺

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.

add-address

👋

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.

excitement-level

Stop annotating and start iterating.

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.

components

What you’ll learn

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.

  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.

Go to course content

Made with Trap Kit and available on GitHub.

Illustration by Illustrations.co