Wireframe tool

The roughness is the point. Something that looks unfinished gets honest feedback, where something that looks designed gets polite agreement.

What a wireframe is for

• Agreeing a layout before anyone opens a design tool
• Sketching a page in a meeting while people are still talking
• Showing a developer the structure and the order of a page
• Comparing two layouts side by side

Drawing the wireframe

1. Open the template, which has a navigation bar, a hero, a headline and a row of cards.
2. Resize the outer frame to the width you are designing for.
3. Use dashed grey rectangles for images and blocks you have not decided about yet.
4. Put real headline text in, because placeholder text hides how long real copy is.
5. Label anything ambiguous rather than trying to draw it.
6. Export a PNG and attach it to the ticket.

Keeping a wireframe honest

Greyscale only

One accent colour at most, for the primary action. Colour decisions belong later.

Real text where it matters

Headlines and buttons should say what they will really say. Body copy can stay as blocks.

Draw the mobile one too

Most visitors are on a phone. A layout that only works at desktop width is half a design.

Show the empty state

What the page looks like with no results is the screen most often forgotten.

Wireframe or mockup?

A wireframe shows what is on a screen and where: the blocks, their order, and which is most important. A mockup shows what it will look like: the colours, the type, the images. Drawing a wireframe first means the layout gets argued about before anyone is attached to a colour.

That is why a wireframe should look unfinished. Grey boxes, stand-in labels and one typeface keep the conversation on structure. The moment a wireframe starts to look like a finished design, people begin reviewing the design and stop questioning the layout.

Wireframe questions