Wireframe

Rédigé par David Brulin, co-fondateur de Quai des Balises

Wireframe is a low-fidelity, schematic blueprint of a digital interface that maps layout, content placement, hierarchy and navigation before any visual design is applied. Drawn in greyscale with boxes, placeholder text and simple shapes, it defines structure and function rather than colors, typography or final imagery.

What a wireframe does and why you start with it

A wireframe answers structural questions before they become expensive to change. It locates where each element lives on a screen, how content is prioritised, and how a user moves from one view to the next. Because it deliberately strips out color, branding and pixel-perfect styling, stakeholders react to the logic of the interface instead of debating aesthetics.

In a software or web project, wireframing typically sits between requirements gathering and visual design. Starting here delivers concrete benefits:

Cheap iteration: moving a block on a wireframe takes minutes; reworking a coded screen takes days.
Shared understanding: product owners, designers and developers align on scope and screen inventory early.
Content-first thinking: the wireframe forces decisions about what information each screen must carry and how it ranks.
Flow validation: navigation, states (empty, loading, error) and edge cases surface before development.

Wireframes range from hand-drawn sketches to structured low-fidelity files built in tools such as Figma, Balsamiq or Axure. Fidelity stays intentionally low so the conversation remains about structure.

Wireframe vs mockup vs prototype

These three artefacts are often confused, yet they answer different questions at different stages. A wireframe defines structure, a mockup defines appearance, and a prototype defines behaviour. They are sequential rather than interchangeable.

Criterion	Wireframe	Mockup	Prototype
Fidelity	Low	High (static)	High (interactive)
Primary question	Where does everything go?	What does it look like?	How does it behave?
Visual design	Greyscale, placeholders	Final colors, typography, imagery	Visual design plus interaction
Interactivity	None	None	Clickable flows and states
Typical stage	Early structure	Visual design phase	Validation before build
Main purpose	Layout and hierarchy	Look and feel	Usability testing

In practice the same screen evolves through all three: the wireframe is dressed into a mockup, and the mockup is wired together into a prototype. Skipping the wireframe usually means structural problems are only discovered once expensive visual work is already in place.

Questions fréquentes

A wireframe is a low-fidelity, greyscale schematic that defines layout, hierarchy and content placement without any styling. A mockup is a high-fidelity static representation that adds the final visual design: colors, typography, imagery and branding. The wireframe answers where elements go; the mockup answers what they look like.

No. A wireframe is a static, non-interactive structural blueprint. A prototype is interactive: users can click through screens, trigger states and follow real flows, which makes it suitable for usability testing. A prototype usually comes later in the process, after wireframes and mockups.

Wireframes let teams validate structure, content priority and navigation cheaply, when changes cost minutes rather than days. Resolving layout and flow issues before applying visual design or writing code reduces rework and keeps stakeholder feedback focused on function rather than aesthetics.

Wireframes can be hand-drawn on paper or built digitally in tools such as Figma, Balsamiq, Axure or Sketch. Low-fidelity tools intentionally favor simple boxes, placeholder text and greyscale to keep the focus on structure rather than polished visuals.

Need a custom tool accessible anywhere, without installation? We build bespoke web applications.

See our web application expertise

Définitions liées

← Retour au glossaire