Veltos.Tech

Design

Wireframe

Also known as: lo-fi prototype, interface skeleton, page schematic

Definition

A wireframe is a rough screen schematic without colour, typography or imagery: it fixes which blocks exist, their priority and the transitions between screens, so the interface logic is agreed before expensive visual design starts.

The absence of visual styling in a wireframe is a tool, not a saving. Grey boxes and placeholder text deliberately remove any opening for "I do not like that shade" and force the conversation onto what this stage decides: which blocks are needed, in what order the user reads them, what happens on tap, what shows when there is no data and what shows when there is far too much. A structural mistake caught on a wireframe costs an hour; the same mistake caught on a built screen costs days.

Fidelity comes in levels. A low-fidelity wireframe is a block sketch, good for discussing the concept. A mid-fidelity one carries real labels, real field names and validation rules, and that is the version that feeds the technical specification and the estimate. A clickable prototype links screens with transitions and lets someone walk a whole journey, which is where usability testing becomes possible and where the client sees behaviour instead of a picture. For a commercial project mid fidelity plus clickable flows for two or three key journeys is usually enough.

The effect on the estimate is underrated. Wireframes turn a vague "we need a customer portal" into a list of screens and states, and a list of screens is something you can price in hours. The trap is treating wireframing as a formality and skipping it for speed: all the structural arguments then move into the design stage, where each iteration costs several times more, and some of them into development, where rework touches the code as well.

Related terms

Related services

Read more

Need this done, not just defined?

We do this work, not only write about it. Describe the task and we will scope it and send a staged estimate.