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
- Usability testingUsability testing is checking an interface with real people: participants from the target audience carry out realistic tasks while thinking aloud, and the team records where they stall, where they go wrong and what they fail to find.
- Design systemA design system is a set of tokens, components and usage rules that exists simultaneously in the design files and in code, fixing colours, typography, spacing and element states so that a new screen is assembled from existing parts rather than reinvented.
- DiscoveryDiscovery is a one to three week pre-project phase that frames the problem, studies users and competitors, describes scenarios and constraints, and produces a prototype, a specification and an estimate with a justified range instead of a number pulled from the air.
- Technical specificationA technical specification is the document that fixes what exactly will be built and on what grounds the work counts as accepted: goals, roles, scenarios, screen-level requirements, integrations, non-functional requirements and an explicit out-of-scope section.
- Responsive designResponsive design is an approach where a single layout reorganises itself to the viewport: grid, typography and block order change at defined breakpoints instead of sending the visitor to a separate mobile version on its own subdomain.
Related services
- UX/UI design for websites and appsWe design interfaces that survive contact with production: research, structure, UI kit and a clean handoff to the developers. Everything lives in Figma as components with real states and real breakpoints, not as a folder of flat mockups. The same process covers landing pages, corporate sites, e-commerce, web apps and mobile.
- Website development, end to endWe build sites that still hold up a year later: from a one-page CMS build to a store or a web application on React and Next.js. One team for design, code, integrations and launch.
Read more
- UX Research Without a Lab Budget: What Actually Produces ResultsMost teams do not need a research department, they need to stop guessing. Methods ranked by cost and payoff, the five-user rule and its important caveat, and how to turn findings into decisions without a sixty-page report nobody reads.
- The Technical Specification: Structure, a Worked Template and the Usual MistakesA specification is not bureaucracy, it is leverage: anything that does not match it gets fixed by the vendor at no charge. Here is the section structure, a filled-in example for a corporate site and how to write acceptance criteria somebody can actually test.
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.