Wireframe, mockup and prototype get used as if they mean the same thing, but they sit at different stages of a design and answer different questions. Knowing which is which saves arguments and a lot of wasted effort.
Wireframe: where does everything go?
A wireframe is a low-fidelity layout. Boxes for blocks, a few words for labels, no real colour or copy. Its only job is to settle structure: what goes where, what is most important, how screens connect. Because it looks unfinished, people give feedback on the layout instead of the paint, which is exactly what you want this early.
Mockup: what does it look like?
A mockup takes the agreed wireframe and dresses it up. Real colours, fonts, spacing, images and copy. It is static, so nothing clicks, but it shows the finished look of a screen. This is the stage where you decide on visual style and brand, once the bones underneath are already settled.
Prototype: how does it behave?
A prototype makes the design interactive. Buttons link to screens, menus open, a flow runs end to end. The point is to feel how the product works before anyone builds it, so you can catch a confusing step while it is still cheap to fix. A prototype can be high-fidelity or rough, depending on what you are testing.
How they fit together
Think of it as increasing commitment. The wireframe is fast and throwaway, so you can try ten layouts in an afternoon. The mockup is slower because it is detailed, so you make fewer and choose carefully. The prototype is the closest thing to the real product without writing the code. Each stage builds on the one before, and skipping a stage tends to push its cost downstream rather than removing it.
Start with the wireframe
Most of the value lives in getting the structure right first, and that is the cheapest stage to change. Open the wireframe tool, block out your screens with simple boxes and text, and link them with arrows to show the flow. Keep it deliberately rough so feedback stays on the layout. Everything runs in your browser and nothing is uploaded, so early work stays private until you choose to share it.
