Wireframes and User Flows

Introduction

Once you know what people need, you start shaping solutions. The cheapest way to test an idea is not to build it, but to draw it. Wireframes and flows let you explore many ideas in an afternoon, and change them with an eraser.

The simple explanation

A wireframe is a plain sketch of a screen showing what goes where. A user flow shows the path a person takes to finish a task.

Wireframes

A wireframe shows structure and priority, not colours or images. Use boxes, lines and labels.

For a recipe search screen you might sketch:

+----------------------------------+
| Logo               [ Menu ]      |
+----------------------------------+
| [ Search for a recipe...  ] (Go) |
|                                  |
| Quick filters: [Under 20 min]    |
|                [Vegetarian]      |
|                                  |
| [ image ]  Pasta with tomatoes   |
|            15 min   Easy         |
| [ image ]  Veg soup              |
|            20 min   Easy         |
+----------------------------------+

Tips:

• Start on paper. Sketch several different ideas, not just one.
• Show real content where you can, instead of "lorem ipsum" filler, because real words reveal layout problems.
• Decide what is most important on each screen, and make it prominent.
• Think mobile first: if it works on a small screen, you have focused on what matters.
• Label every element clearly.

User flows

A user flow maps the steps from a starting point to a goal, including decisions and errors.

Example: "Save a recipe":

Search results → Open recipe → Want to save?
    → Yes → Signed in?
          → Yes → Saved (confirmation)
          → No → Sign in or create account → Saved (confirmation)
    → No → Back to results

Use a box for each step, and a diamond for each decision. Flows help you:

• Find missing steps and dead ends
• Count the steps and clicks, and remove unnecessary ones
• Plan error and edge cases: what if the network fails, or the search finds nothing?
• Talk with developers about what must be built

Prototypes

A prototype is a simulation people can try. A low-fidelity prototype can be paper sketches you swap as the user "taps". A clickable prototype links screens in a design tool.

Free tools to explore:

• Penpot: free and open source, runs in the browser
• Figma: has a free plan with limits
• Paper, pens and sticky notes: quick and still excellent
• Presentation software also works for simple click-through mock-ups

Check each tool's current free plan, and keep copies of your work.

Keep fidelity matched to the question

• To test whether the idea makes sense, use rough sketches.
• To test where people look and click, use a clickable wireframe.
• To test look and feel, use a polished design.

Spending days on polish before checking the basics wastes effort.

Get feedback early

Show your sketches to others. Ask them to do a task with them rather than say whether they like them. Note where they hesitate. Do not defend your design. Listen.

Try it yourself

Pick a simple task, such as ordering a coffee online. Sketch two different wireframes for the main screen on paper, and draw the user flow with at least one decision and one error case. Show them to someone and note where they hesitated.

Summary

• Wireframes sketch layout and priority without visual polish, so many ideas can be explored cheaply.
• User flows map steps, decisions and errors from start to goal, revealing gaps.
• Use free tools or paper, match fidelity to the question, and show your work to others early.