By the end of this lesson you can
- Explain what wireframes are and what each level of fidelity is for.
- Create low- and mid-fidelity wireframes with realistic content.
- Choose the right fidelity for the question you need to answer.
The idea
A wireframe is a simplified drawing of a screen that shows structure, content and functionality without visual styling. It answers "what goes where and why" before anyone discusses colour or fonts.
Levels of fidelity
- Low fidelity: rough boxes and lines, often on paper or a whiteboard. Fast and disposable, good for exploring layouts and flows.
- Mid fidelity: digital, greyscale, with real headings, realistic content and proper spacing. Good for testing structure and content with users and for discussing details with developers.
- High fidelity: close to the final design, with visual style. Covered later in visual design.
Use real content
"Lorem ipsum" hides problems. A product name that is 40 characters long, an error message, a price with a discount: real or realistic content shows whether a layout actually works.
Greyscale on purpose
Keeping wireframes grey keeps discussion on structure and content. As soon as colour appears, conversations shift to taste.
Why it matters in real projects
Wireframes are where most structural decisions get made. They are quick to change, easy to test and clear enough for developers to estimate. Choosing the right fidelity saves time: too high too early wastes effort on details that will change; too low for too long leaves important questions unanswered.
A realistic example
A designer working on a holiday rental listing page starts with paper wireframes of three layouts. A quick review chooses one with photos at the top, key facts (guests, bedrooms, price) next, then availability.
The mid-fidelity version in Figma uses a real listing: a long cottage name, 23 photos, a cancellation policy and a minimum-stay rule. This reveals that the price area needs room for "from £120 per night, minimum 3 nights", which the paper version had ignored. Five usability sessions with the mid-fi prototype confirm people find availability easily but miss the cancellation policy, which moves higher.
Step by step
Start from sketches
Choose the strongest sketched direction.
Draw lo-fi variants
Quickly try two or three layouts of the key screen.
Gather real content
Collect realistic text, data and edge cases.
Build mid-fi
Create a greyscale digital wireframe with real content and consistent spacing.
Annotate
Explain behaviour, rules and data sources.
Review and test
Walk through with developers and test with a few users.
Common mistakes
Mistake Using placeholder text everywhere.
Instead Use real or realistic content, including long and short examples.
Mistake Adding colour and styling too early.
Instead Keep wireframes greyscale until structure is settled.
Mistake Jumping straight to high fidelity.
Instead Match fidelity to the question you are trying to answer.
Check your understanding
Choose an answer, then check it. There is an explanation either way.
Practice exercise
Exercise · about 1 h
Lo-fi to mid-fi
Wireframe a product detail page for an online bike shop.
Steps
- Sketch three lo-fi layouts.
- Collect real content for one real bike.
- Build a mid-fi greyscale wireframe of the best layout.
- Annotate behaviour and add one edge case, such as out of stock.
Deliverable
Three lo-fi sketches and one annotated mid-fi wireframe.
Self-assessment
Tick each item when it is true of your exercise. Be honest; this is for you.
4 items
Summary
- Wireframes show structure without styling.
- Lo-fi is for exploring; mid-fi is for testing and detailing.
- Use realistic content.
- Match fidelity to the question.
Further reading
Third-party sources, chosen for reliability. They open in a new tab.
- Wireflows: a UX deliverable for workflows and apps (opens in a new tab)Nielsen Norman Group
- UX prototypes: low fidelity vs. high fidelity (opens in a new tab)Nielsen Norman Group
Your notes
Marking complete updates your course and roadmap progress.