# Build low-fidelity prototypes

> Turn static wireframes into a clickable flow, run paper prototypes, and learn from cheap failures before you invest in polish.

Source: https://uxspot.io/low-fidelity-prototypes

<section id="what-is-lofi">
<h2>What makes a prototype low-fidelity?</h2>
<p class="blockquote">A low-fidelity prototype is a simple, interactive model of your product that shows how users move through a flow, without visual polish or real content.</p>
<p>You already have <a href="/wireframes" class="redirect">wireframes</a>: rough screens that show what goes where. A prototype adds the missing ingredient, which is interaction. When someone taps a button in a prototype, something happens. That single difference turns a pile of sketches into something you can actually watch a person use.</p>
<p>"Low-fidelity" means the prototype is deliberately unfinished. Grey boxes instead of images, placeholder text instead of copy, no colors, no branding. <strong class="highlight">The point of a low-fidelity prototype is to test whether the flow makes sense, not whether the screens look good.</strong> Polish comes later, once you know the structure works.</p>
<ul>
<span>keywords</span>
<li>#Prototype</li>
<li>#LowFidelity</li>
<li>#Interaction</li>
</ul>
</section>
<section id="clickable-flow">
<h2>From wireframes to a clickable flow</h2>
<img src="/images/low-fidelity-prototype.webp" width="2400" height="1330" alt="Low-fidelity prototype — three wireframe screens connected by arrows, with highlighted tap hotspots wiring them into a clickable flow" title="Low-fidelity prototype">
<p>The fastest way to build a low-fidelity prototype is to connect the wireframes you already have. Take <a href="/user-flows" class="redirect">the user flow</a> you mapped earlier, then link each screen to the next along that path. In most design tools this means drawing a connection from a tappable element, like a "Continue" button, to the screen it should open.</p>
<p>Work through one flow at a time. For a booking app, that might be: search for a class, pick a time slot, confirm, see a success screen. Connect exactly those screens in exactly that order, and you have a prototype someone can click through from start to finish.</p>
<p><strong class="highlight">Prototype the journey, not the screens. A prototype is only useful if it follows a path a real user would actually take.</strong> If you find yourself connecting screens that don't belong to any flow, stop and go back to your flow diagram.</p>
<p>Add the obvious return paths too. Users tap "back" constantly, and if your prototype dead-ends every time they do, your test sessions will stall on the prototype instead of the design.</p>
<ul>
<span>keywords</span>
<li>#ClickableFlow</li>
<li>#UserFlow</li>
<li>#Wireframes</li>
</ul>
</section>
<section id="paper-prototyping">
<h2>Paper prototyping</h2>
<p>You don't need software at all. In a paper prototype, each screen is a sheet of paper, and a person plays the role of the computer. The user "taps" a drawn button with their finger, and the human computer swaps in the next sheet, slides a drawn menu over the page, or places a small cut-out dialog on top.</p>
<p><strong class="highlight">Paper prototyping works because it removes every excuse not to test: no tools to learn, no files to set up, nothing too precious to throw away.</strong> You can sketch five screens in ten minutes and be testing in eleven.</p>
<p>It's also surprisingly effective in a room. Because the sketches are clearly rough, people critique the idea instead of the pixels, and they suggest changes freely. Someone might grab a pen and redraw a screen mid-session. That's a win, not an interruption.</p>
<ul>
<span>keywords</span>
<li>#PaperPrototype</li>
<li>#Sketching</li>
<li>#HumanComputer</li>
</ul>
</section>
<section id="wire-vs-fake">
<h2>What to wire and what to fake</h2>
<p>You don't have to make everything work. Wire up the primary flow you want to learn about, and fake or skip everything else. A search field doesn't need to search; tapping it can simply jump to a pre-made results screen. A login screen doesn't need real validation; any tap on "Sign in" can succeed.</p>
<p class="blockquote">Dead ends are fine in a prototype, as long as they're labeled.</p>
<p>If a user taps something you haven't built, show a simple placeholder that says the area isn't part of this test, rather than letting the prototype silently do nothing. Silence reads as a bug and derails the session. A labeled dead end keeps trust intact and nudges the person back onto the path you're studying.</p>
<p><strong class="highlight">Every hour spent wiring an edge case is an hour not spent testing the main flow, so fake ruthlessly.</strong></p>
<ul>
<span>keywords</span>
<li>#Scope</li>
<li>#DeadEnds</li>
<li>#FakeIt</li>
</ul>
</section>
<section id="test-early">
<h2>Test early, with anyone</h2>
<p>A low-fidelity prototype earns its keep the moment someone else uses it. Long before a formal study, hand it to a colleague, a friend, or anyone passing your desk. Give them one task, like "book a yoga class for Saturday", then stay quiet and watch where they hesitate, mis-tap, or ask what a label means.</p>
<p>This kind of hallway feedback is imperfect. Colleagues know too much and won't catch everything a real user would. But at this stage you're hunting for big, structural problems, and those show up fast with almost anyone.</p>
<p>Capture what broke. Keep a running list of every point of confusion: which screen it happened on, what the person expected, and what happened instead. <strong class="highlight">A prototype test without notes is just a demo; the list of what broke is the actual deliverable.</strong> Fix the worst items, reconnect the screens, and test again, often the same day.</p>
<ul>
<span>keywords</span>
<li>#HallwayTesting</li>
<li>#Feedback</li>
<li>#Iteration</li>
</ul>
</section>
<section id="lofi-mindset">
<h2>The low-fi mindset</h2>
<p class="blockquote">Low-fidelity prototypes exist to be wrong cheaply.</p>
<p>Every flaw you uncover in a stack of grey boxes is a flaw you won't have to unpick from polished visuals, written copy, or shipped code. That's the whole trade: minutes of sketching now against days of rework later.</p>
<p>So resist the urge to make it pretty. When a prototype looks finished, people hesitate to criticize it, and you hesitate to change it. Keep it rough, break it often, and treat every broken flow as money saved. When the structure finally survives a few rounds of testing, you've earned the right to <a href="/mockups" class="redirect">add polish</a>.</p>
<ul>
<span>keywords</span>
<li>#FailCheap</li>
<li>#Iteration</li>
<li>#Mindset</li>
</ul>
</section>