---
title: "Prototype in the medium you ship"
description: "When a static mockup hides too much, and what we build in code before we build for real."
canonical: "https://goodtogrid.com/blog/prototype-in-the-medium"
updated: "2026-09-01"
---

# Prototype in the medium you ship

> When a static mockup hides too much, and what we build in code before we build for real.

URL: https://goodtogrid.com/blog/prototype-in-the-medium · Published: 2026-09-01 · Topic: Engineering · 5 min read · By goodtogrid studio

## Key takeaways

- A static mockup hides how a list feels with forty items, a slow connection and whether a transition helps.
- Build anything with motion, real data or input in code first: search, filters, forms, onboarding.
- Keep early layouts, type and colour on the design canvas, where exploration is faster.
- A prototype that runs on real devices leaves fewer surprises and fewer arguments at handover.

## What a mockup hides
A static mockup can hide a lot: how a list feels with forty items instead of four, what happens on a slow connection, whether a transition helps or just makes people wait.

So where it matters, we prototype in the medium we’ll ship. A web prototype for web products. A real build on a real phone for apps.

## What we build in code
Anything with motion, real data or input: search, filters, forms, onboarding. The parts people touch most are the parts where a picture lies the most, so they’re the first parts we make real.

## What stays on the canvas
Exploration. Early layouts, type and colour are faster to push around on a design canvas, and nobody should get attached to code in week one.

> “The best review question we know: can I try it on my phone?”
>
> — Asked in every design review

The payoff comes at handover. A prototype that already runs on real devices leaves far fewer surprises for the build, and far fewer arguments about what the design meant.

Keywords: prototyping, product design, mobile app prototype, web prototype, design handover

## Related notes

- [Designing on an 8px grid](https://goodtogrid.com/blog/eight-pixel-grid) — Design · 5 min read. Why every size on this site is a multiple of eight, and what that one rule buys a client at handover.
- [From slide deck to website](https://goodtogrid.com/blog/deck-to-website) — Studio · 6 min read. What we learned turning a preschool’s curriculum presentation into a site parents actually browse.
- [Dark interfaces without the mud](https://goodtogrid.com/blog/dark-without-mud) — Design · 4 min read. Three surface steps, one accent, and borders that do the work: the rules we follow for dark UI.

More notes: [all notes](https://goodtogrid.com/blog) · [RSS](https://goodtogrid.com/rss.xml)