Library / Layout & visual design / Wireframe
No. 026·noun·also called mockup, sketch, low-fi design

Wireframe

A rough, boxes-and-labels sketch of a screen's layout, without colors or real content.

SPECIMEN · DIAGRAM · ANATOMY
Top bar
Stat
Stat
Stat
Chart1
Activity
1Boxes and labels, no styling yet
Definition

What it is

A wireframe is a simple outline of a screen: grey boxes for images, lines for text, labeled rectangles for buttons. It shows what goes where before anyone worries about colors or fonts.

Wireframes are cheap to change, so they're the right place to argue about layout. Sharing a sketch, even a photo of one drawn on paper, with a coding agent is one of the fastest ways to get the layout you have in mind.

A mockup usually means a polished, full-color version. A prototype is clickable.

Say it like a builder

How to ask for it

Vague

“Build me a dashboard that looks good.”

Precise

“Build the dashboard from the attached wireframe: a top bar with search, four stat cards in a row, a large chart below on the left two-thirds, and a recent activity list on the right third.”

Why it works

"Looks good" leaves layout to chance; a wireframe, described or attached, pins down what goes where.

In the wild

You've seen this in

  • BBalsamiq sketches
  • EFigma files in early stages
  • PNapkin drawings in product meetings
Usage note

Often confused with

Design systemA design system defines shared styles; a wireframe sketches one screen's structure.SpecA spec describes what the app does; a wireframe shows how one screen is arranged.