What is a prototype? Explained with a floor plan before the bricks
A wireframe is a simple sketch of each screen and a prototype is a rough version people can click through, so ideas are tested before real building. Explained with a floor plan before the bricks.
- Author
Umair Mateen- Published
- Updated
- Reading time
- 5 min
- Category
- Design
In one sentence: A wireframe is a simple black-and-white sketch of where things go on each screen, and a prototype is a rough version people can click through, so you can test an idea with real users before paying to build the finished software.
The everyday picture
Imagine you are building a new house. Nobody starts by laying bricks. First, someone draws a floor plan: plain lines showing the rooms, the doors and how you move from one to the next. There are no paint colours or curtains yet.
Next, a builder might make a model you can walk through, like a show home with cardboard walls. You open the doors, stand in the kitchen and notice the fridge blocks the hallway. Moving a cardboard wall takes minutes. Moving a brick wall takes weeks.
A wireframe is the floor plan for an app or website. A prototype is the walk-through model. The bricks are the real software.
An idea becomes a floor plan (wireframe), then a walk-through model (prototype). Real users try it, and only a design that works goes on to be built for real.
How it works, step by step
- Sketch the idea (a rough drawing on a napkin). The team starts with quick pen-and-paper sketches to talk ideas through. The UK government's design guide says sketches suit exploring and discussing basic ideas with colleagues.
- Draw the wireframes (the floor plan). Each screen becomes a simple line drawing showing structure: what goes where and what matters most. US government guidance on Digital.gov advises leaving out fonts and colour, so people focus on layout instead of looks.
- Build the prototype (the walk-through model). The wireframes are linked so buttons lead somewhere. Digital.gov puts the key difference simply: unlike wireframes, prototypes show interaction. A prototype can be paper screens, a clickable mock-up or simple code that looks almost real.
- Let real users try it (future owners walking through the show home). People who will use the product try to complete a task while the team watches. Where they get stuck shows what to change.
- Change it, then build for real (move the cardboard wall, then lay the bricks). The team fixes the design and tests again. Once it works, developers build the real software, which must be secure and reliable.
Try it · Put it in order
From idea to real app. Put it in order.
Tap the steps in the order they happen.
Where the picture stops
- A show home is expensive. A software prototype can take hours, not months. Digital.gov says prototypes should be quick to make and quicker to throw away.
- You can live in a show home. A prototype only looks finished. The UK guide warns: "Do not just copy prototype code into production." It was not built to be secure or to handle many users at once.
- A house plan is drawn once. Teams often make several prototypes, test them side by side and drop the ones that do not work.
Why it matters for your business
- Cheaper mistakes. Finding a confusing screen in a sketch costs a short meeting. Finding it after launch means rebuilding real code.
- Everyone sees the same thing. The UK guide notes prototypes give the whole team a shared understanding of what is being built, so fewer arguments happen late.
- Evidence, not opinions. Watching customers use a prototype shows whether the idea works before you commit your budget.
- Faster decisions. Trying an idea in a prototype is quicker and less risky than changing live software.
An example
Imagine a small chain of three bakeries that wants customers to order cakes online.
The team sketches the order screens on paper, then turns them into plain wireframes: pick a cake, pick a size, choose a collection date, pay. Next they link the screens into a clickable prototype.
Five regular customers try to order a birthday cake on a phone. Several look for a place to add a message on the cake and cannot find one. The team adds that step in an afternoon and tests again. Only then do developers start the real ordering system.
Frequently asked questions
What is the difference between a wireframe and a prototype?
A wireframe is a still picture showing the layout of a screen. A prototype lets people click or tap through screens, so you can see how someone moves through a task.
What does low-fidelity or high-fidelity mean?
Fidelity means how close something is to the finished product. A paper sketch is low-fidelity. A clickable mock-up that looks and behaves almost like the real thing is high-fidelity.
Can the prototype become the final app?
Usually not directly. The idea carries over, but the UK government's guide says prototype code does not need production standards, so the real software is normally built properly afterwards.
Do I need special software to make one?
No. Pen and paper work for early ideas. Design tools or simple code are used when you want something closer to the real experience for user testing.
Related explainers
- What is project discovery? Explained with an architect's brief
- Frontend vs backend, explained with a restaurant
- What is cloud hosting? Explained with a serviced office
The DevDrift tests web and SaaS ideas with clickable prototypes before writing production code: see how.
Sources
Could you explain this to a colleague now?
Mark it and posts that mention it will show a tick. Saved in this browser only.