What is a wireframe?

What a wireframe shows

According to Kelley Gordon of NN/g, a wireframe can make four things visible: the user’s path, the page layout, the information hierarchy and the interactions. The level of detail (fidelity) also ranges widely. A quick pencil sketch is a wireframe, and so is a detailed drawing close to the finished design.

When I say “wireframe”, I usually mean the low-fi kind. Low-fi means a rough drawing that looks little like the finished product: grey boxes and a few labels. If the arrangement of menus and pages has been discussed beforehand, meaning the information architecture is settled, you draw the screens much faster.

Why it helps

A rough drawing steers the discussion to the right place. According to Kara Pernice (NN/g), a rough design looks unfinished, so users criticise it more freely. Stakeholders see that the work isn’t finished, and the designer isn’t as attached to a sketch as to a polished screen.

Throwing it away is cheap too. In a wireframe, you delete a box and draw it again. In a coded screen, the same change needs a new development round.

In practice, it is a common deliverable. In Page Laubheimer’s 2015 NN/g survey of 86 UX practitioners, 71% of respondents said they create static wireframes “frequently”. That made it the most frequently created deliverable in the survey.

Example: the wireframe of a product page

The drawing language is simple. According to Gordon, an image is a rectangle with an X inside, a heading is a thick line and body text a thin one. A dropdown is a rectangle with an arrow, and a selected radio button a filled circle.

The navigation menu is a rectangle where it will sit on the screen. The link to the current page is underlined or boxed.

The questions I ask about this screen aren’t about looks. Should the user choose the size before the button? Does the shipping option belong on this page or in the cart? In a wireframe, that is discussed in a few minutes.

One of the most common problems in my audits starts here: the screen is beautiful, but the order of the elements is wrong. Once colour is in, nobody questions the order any more. The wireframe is the cheapest way to ask this question before colour.

Drawing one in four steps

Gordon’s order:

1. Decide the screen format, and draw the browser or phone frame too.
2. Place the navigation menu and search field.
3. Add the largest elements: headings, banners, images.
4. Fill in the remaining details: buttons, dropdowns, checkboxes, text fields, lines for body text.

Gordon recommends thick pens and time boxing; for her, a messy result is completely fine and expected. Do the first round on paper. A thick pen keeps you from getting lost in details.

For a more detailed wireframe, Gordon recommends starting with fixed screen sizes. For the web, she gives 1024x768 and 1920x1080 pixels as examples. On mobile, I take the phone size most common among the product’s users.

Often confused: mockup and prototype

According to Pernice, fidelity varies on three axes: visual, content and interactivity. A wireframe is low on all three. A mockup is the same screen with colour, type and real images, but not clickable.

The prototype adds interactivity. It can be a clickable file, or a model where someone changes the screens by hand. This is the stage for usability testing.