Wireframe is a simplified visual representation of a web or app screen. It shows where navigation, content blocks, buttons, and forms go — without style, branding, or final copy.
The word comes from English (wire + frame): think of it as the skeleton of a screen. In UX design, the wireframe is the first concrete translation of an idea into structure — often after you’ve mapped a user journey. Before fonts, colors, or code, it answers one question: does this layout make sense for the person who will use it?
They’re usually built in grayscale, with boxes, lines, and placeholder text. That austerity is intentional: it forces the team to look at flow and hierarchy, not aesthetics.
A real-life example of a wireframe
Imagine you’re remodeling a kitchen. Before you pick tiles or wall paint, you draw a floor plan: where the sink goes, the fridge, the clear path to walk. That plan is the wireframe. If the sink ends up too far from the counter, you fix it with a pencil — not a contractor.
On a site or app it’s the same: a low-fidelity wireframe can be a paper sketch; mid-fidelity might be boxes in Figma; high-fidelity gets closer to the design, but it still isn’t an interactive prototype. If the wireframe is the blueprint, the prototype is the mockup where you can already “turn on the taps.”
Building wireframes early improves usability and avoids expensive rework. For a deeper dive, see our blog guide What Is a Wireframe?.