Wireframes

Why it matters

A wireframe is a simple drawing of a screen that shows what goes where: content, controls and their priority, without colour, images or polish. Wireframes let you test structure and content cheaply. When something looks rough, people comment on whether it works ("I can't find the total") instead of how it looks ("I don't like that blue"). That is exactly the feedback you need at this stage.

The core idea: fidelity matches the question

Fidelity is how close a design is to the final product.

Start low. You should be able to throw a low-fidelity wireframe away without regret. Move up only when the questions you are asking need it.

What goes into a wireframe

• Real content, or close to it. Write the actual heading, button label and an example amount. "Lorem ipsum" hides problems, such as labels that are too long or a missing total.
• Priority. Make the most important element obvious (larger, higher or bolder), as you learned in Visual Design Fundamentals.
• Standard placeholders. A box with a cross for an image, horizontal lines for body text, rounded rectangles for buttons.
• States that matter: an empty list, an error message, a loading state, where the flow needs them.
• Annotations: short notes in the margin for behaviour you cannot draw, such as "pre-filled with equal split" or "only shows if a housemate owes money".

Worked example: three screens for the bill flow

From the user flow in the last lesson, the three key screens are Bill detail, Split and Confirmation.

Bill detail

+--------------------------------+
| <  Internet - October          |
|                                |
|   $60.00                       |  <- largest element
|   Due 28 Oct  ·  Paid by Sam   |
|                                |
|  [ Split this bill ]           |  <- primary button
|                                |
|  View PDF                      |  <- secondary link
+--------------------------------+

Split

+--------------------------------+
| <  Split $60.00                |
|  Split equally  (o) yes ( ) no |
|  Sam (you)        $15.00       |
|  Priya            $15.00       |
|  Leo              $15.00       |
|  Jordan           $15.00       |
|  Total            $60.00  ok   |  <- turns red if totals differ
|  [ Send requests ]             |
+--------------------------------+
Note: housemates who left before the bill date are not listed.

Confirmation

+--------------------------------+
|        (tick)                  |
|   Requests sent to 3 people    |
|   We'll remind them in 3 days. |
|   [ Back to the house ]        |
+--------------------------------+

Notice the decisions made on paper: the amount is the hero on Bill detail; the total check is visible on Split so the error from the flow has a home; the confirmation reassures Sam that the app, not Sam, will do the chasing, which addresses the "nagging" pain point.

Crazy 8s for options

Before settling on one layout, sketch options fast. In Crazy 8s you fold a sheet into eight panels and sketch eight versions of one screen in eight minutes. Most will be bad. One or two will contain an idea you would never have reached by polishing your first attempt.

Paper or Figma?

Both work. Paper is fastest for exploring. Figma's free plan is good once you want to rearrange, duplicate and later link screens into a prototype (next lesson). In Figma, use a phone-sized frame, grey rectangles and plain text; avoid colour for now. Free wireframe kits are available in the Figma Community.

Common mistakes

• Starting in high fidelity. You will defend pixels instead of testing ideas.
• Placeholder text everywhere. Real words reveal real problems.
• No hierarchy. Every element the same size and weight; nothing reads first.
• Designing one perfect option. Sketch several before choosing.
• Forgetting states. The empty, error and loading versions are part of the design.
• Decoration. Shadows, gradients and icons distract from structure at this stage.

Quick recap

• Wireframes show layout, content and priority without visual polish.
• Match fidelity to the question; start low.
• Use real content, clear priority, standard placeholders and short annotations.
• Explore several options (for example with Crazy 8s) before refining one.

Try it

On the Do tab you will sketch options and then wireframe the three key screens of your flow.