UX5: Sketches, wireframes and forms
Wireframes and visual hierarchy
🎯You'll be able to
Turn a sketch into a wireframe that shows content, order and priority, and explain why each element is where it is.
🏠The everyday picture
A newspaper's front page is planned in blocks before any article is finished: the main story large at the top, smaller stories below. Readers know what matters at a glance.
📘What it really is
- A wireframe is a simple layout of a screen in greys: boxes for images, lines for text, real headings and labels where they matter.
- Low fidelity wireframes are rough; mid fidelity wireframes have real content and accurate layout but no colour or style.
-
Visual hierarchy is the order in which people notice things. It comes from size, position, weight, contrast and space. The most important thing should be noticed first.
-
One main action per screen: a single primary button, with secondary actions less prominent.
- Real content, not lorem ipsum: real clinic names and times show whether things fit and make sense.
- Annotate: notes on the wireframe explain behaviour ("selected slot shows a tick and 'Selected: 10:30'").
📝A worked example
Input: a mid-fidelity wireframe of the "Choose a time" screen.
| Order | Element | Why here |
|---|---|---|
| 1 | Back link "‹ Back to clinics" | Where people look to undo |
| 2 | Heading "Choose a time" | Says what this screen is for |
| 3 | Clinic, doctor and date | Confirms they picked the right clinic |
| 4 | "Free times" and a grid of time buttons | The main task |
| 5 | Status line "Selected: 10:30 on Thursday 5 November 2026" | Visibility of system status |
| 6 | Primary button "Continue" | The single main action |
Expected output: a wireframe and a table like this, where every element has a reason linked to a finding or a heuristic.
🌍Where it's used
- Product teams agree wireframes before visual design starts.
- Agencies use them in client reviews to avoid early arguments about colour.
- Developers can start on structure while visual design continues.
📝Case scenario
A clinic's first design put a large banner photo at the top of the booking screen, pushing the time buttons below the fold on most phones. A grey wireframe with real content made the problem obvious; the photo moved to the clinic's page.
🖱️Try it
Wireframe the details form in grey boxes, with real labels and hints. Success: one primary button, labels above fields, the chosen time visible, and a "Change time" link.
⚠️Common mistakes
- Lorem ipsum. Sign: placeholder text everywhere. Fix: real content from the kit's data.
- Several primary buttons. Sign: three bold buttons fight for attention. Fix: one primary, the rest secondary or links.
- Wireframes that look finished. Sign: colours and photos. Fix: keep to greys so feedback stays on structure.
🛠️For your project
Project 2's prototype has one primary action per screen in the reference design; your wireframes are the plan for it.
✅Quick check
What is visual hierarchy?
Show the answer
The order in which people notice things, created by size, position, weight, contrast and space.
Why use real content in wireframes?
Show the answer
To check that it fits and makes sense, and to avoid surprises later.