Maisa Korhonen
← Back to glossary

Wireframe

A rough sketch of a page or app: boxes and lines showing what goes where, before any real design happens.

A wireframe is the blueprint stage of an interface. Grey boxes for images, lines for text, rectangles for buttons. No colours, no fonts, no photos. The point is to decide structure (what is on the page, in what order, how prominent) before anyone spends time making it beautiful.

Designers work this way because layout arguments are cheap at the sketch stage and expensive later. It is much easier to move a grey box than a finished design.

Why you keep hearing it

Because it is standard vocabulary in any product or website project ("let's review the wireframes first"), and because AI has changed its role. Tools can now jump from a text description straight to a polished-looking page, which tempts teams to skip the thinking stage. Plenty of designers argue the opposite lesson: when production is instant, deciding what belongs on the page matters more, not less.

What it means for you

If you are ever shown wireframes, know the rules of the game: you are being asked about structure and priority, not colours and style. Comment on what is missing, what dominates, what order things appear in. Save the font opinions for later. Get that right and designers will love working with you.

Updated 12 July 2026