Lo-fi Wireframing

What is a Wireframe?

A wireframe is a simple, structural sketch of a screen. It shows what goes where: headings, images, buttons, inputs and navigation. It deliberately leaves out colour, fonts, real images and polish.

Think of it as the architect's floor plan before the interior designer arrives. You would not choose curtains before deciding where the walls go.

---

Lo-fi vs Mid-fi vs Hi-fi

This lesson focuses on lo-fi, the stage most beginners skip and most senior designers rely on.

---

Why Sketch on Paper?

1. Speed. You can sketch ten versions of a screen in the time it takes to set up one Figma frame.
2. Low attachment. Nobody feels precious about a pen sketch, so it is easy to throw away bad ideas.
3. Better feedback. Show stakeholders a polished design and they comment on the shade of green. Show them a sketch and they talk about whether the flow makes sense, which is what you need at this stage.
4. Anyone can join. PMs, engineers and even users can pick up a pen. Some of the best ideas in a design sprint come from non-designers.

---

Sketching Techniques

• Boxes with an X mean images.
• Wavy lines mean body text. Thick lines mean headings.
• Rounded rectangles mean buttons. Write the actual label: "Send ₦5,000", not "Button".
• Arrows between screens show the flow.
• Draw at phone size. Most Nigerian users are mobile-first, so start with a mobile frame. A sticky note is roughly the right size.

Crazy 8s

Fold an A4 sheet into eight panels. Set a timer for eight minutes. Sketch one idea per panel, one minute each. The pressure stops you overthinking and forces variety.

---

Paper Prototypes

A paper prototype is a set of sketched screens you can test with a user. You play the computer: when the user "taps" a button, you swap in the next sheet of paper.

It sounds basic, but it works. Teams at Google, Airbnb and many Lagos startups use paper prototypes to test flows in hours, not weeks. A market trader in Balogun can react to a paper sketch just as well as to a Figma file, and you did not need data or a charged laptop.

---

When to Go Digital

Move to Figma (mid-fi) when:

• You have explored several directions and picked one or two to pursue.
• The flow is roughly agreed and you now need precise layout.
• You need to share remotely with a distributed team.
• You want to run tests that need realistic interaction, like scrolling or typing.

Do not go digital just because paper feels "unprofessional". The goal is learning, not looking busy.

---

What Makes a Good Wireframe

• One primary action per screen, clearly the most prominent.
• Real content, not lorem ipsum. "Send money to Mum" tells you far more than placeholder text.
• Content hierarchy: the most important thing is at the top.
• Thumb-friendly: key actions sit in the lower half of a phone screen, where thumbs reach.

---

Try It in the Lab

Build a lo-fi wireframe of a "Buy airtime" screen. Add blocks from the palette, reorder them and delete what you do not need. The Critique button reviews your wireframe against the principles above, just like a design lead would.