Wireframes: low fidelity on purpose

A wireframe is a question you're asking someone. Fidelity decides which question they answer. Show a rough grey sketch and people talk about structure: is this the right content, in the right order, with the right actions? Show a polished mock-up and they talk about the blue, the font and the icon. Both conversations are useful, but at different times. Use the lowest fidelity that can answer the question you have right now.

Question                                  Fidelity
────────────────────────────────────────  ─────────────────────────────
Which of three approaches is right?       Sketches, 5 minutes each
What goes on this screen, in what order?  Grey boxes, real headings
Can people complete the task?             Clickable wireframes
Does it feel trustworthy and on-brand?    High-fidelity mock-up

Explore before you refine. The first idea is rarely the best one, and once it's drawn neatly it's hard to let go. A common exercise is Crazy 8s: fold a sheet into eight panels and sketch eight different versions in eight minutes. Most will be bad. One will have something the first idea didn't.

Use real content, never lorem ipsum. Placeholder text is always the perfect length. Real content is a 60-character product name, a customer called “Dr Siobhán Ní Bhriain-Okonkwo”, a price with four digits, an empty list on day one. Designing with real (or realistic) content is how you find out the layout breaks before an engineer does.

Annotate what the picture can't show: what happens on click, what's sorted and by what, what's required, what the limits are, and which states exist. A wireframe of a list is really five screens: loading, empty, a few items, hundreds of items, and failed to load. Draw or note each one, or someone will improvise them later.

Loading your workspace…