A Wireframe Is a Screen With the Decoration Taken Out
Definition
Wireframe
A stripped back drawing of a screen in grey boxes and plain labels that shows what goes where and how big it is, with no colour, no photos and no final typeface.
Open any app, mentally delete the photos, the colours and the logo, and what is left is the wireframe: boxes, labels and positions.
A wireframe answers three questions and no others: what is on this screen, how big is each part, and where does it sit.
You draw one per screen, so a six screen product needs six wireframes plus the states people forget, such as empty, loading and error.
Wireframing comes after the site map, because the map decides what belongs on a screen and the wireframe only decides where it goes.
Turning the finished wireframe into a working page with HTML and CSS is a separate job covered elsewhere in this unit.
Low Fidelity Buys You Honest Feedback
Fidelity means how finished a design looks, climbing from pencil sketch, to grey boxes, to a screen with real type, real photos and real colour.
Low fidelity is fast, and eight versions of a home screen fit on one A3 sheet in twenty minutes.
High fidelity eats hours, so by the time it exists you are attached to it and quietly unwilling to bin it.
A rough sketch invites a tester to say "that will not work", while a polished mock-up invites "nice, maybe a different blue".
Colour, photographs and the final typeface are left out on purpose, since they are the loudest things on a screen and they drown out every question about structure.
Climb a level of fidelity only once the level below has stopped producing useful arguments.
Common Mistake
Show a coloured mock-up to a tester and the session becomes a discussion about the shade of green.
Hand drawn wireframes attract honest criticism precisely because they obviously took five minutes.
Save colour for the stage where the structure has already been tested and agreed.
Paper Prototyping: the Cheapest Test You Will Ever Run
A paper prototype is your wireframes on paper, handed to a tester who taps the paper with a finger as if it were glass.
One person in your group plays the computer, sliding the next sheet on top whenever the tester taps a button.
Sticky notes make good menus and pop-ups because you can peel one on and off in a second.
It catches the big three: a button nobody spots, a label nobody understands, and a step everybody skips.
Total cost is paper, a pencil and fifteen minutes per tester, which is why you can afford to run it three separate times.
Activity
Draw your three main screens at phone size on separate sheets of A5.
Give a classmate one task, then slide sheets in front of them as they tap and say nothing at all.
Write down every place they paused for more than three seconds, and what they touched first.
Greyboxing Fixes Size and Weight Before Style
Greyboxing means drawing every element as a plain rectangle and using only shades of grey to show what matters most.
A darker or larger box reads as more important, so you are setting the priority order before you have any colour to lean on.
Body text is shown as grey lines of roughly the right length, but every button label and heading stays as real words.
A screen that reads clearly in grey will read clearly in colour, while a screen that only works once colour arrives has a structure doing no work.
Greyboxes carry over neatly into the build, because each rectangle becomes a real region on the finished page.
Clickable Prototypes Turn Screens Into a Journey
A clickable prototype links your wireframes so tapping a button really does move to the next screen.
Figma, Penpot, and even a slideshow with hyperlinked shapes will do this without a line of code.
Link only the screens in the task you plan to test, because a prototype does not need to work everywhere to test one journey.
Build the dead ends on purpose: a wrong password message, an empty search result, a no connection screen.
Film the tester's hands or record the screen, since you will have forgotten the third hesitation by the time you write anything up.
Tip
Name each screen in the prototype file exactly as you named it on the site map.
Duplicate a version before changing it instead of overwriting, so the folder can show the design moving.
Export a numbered image of every version with one line saying what moved and why.
Storyboards Show What Happens Around the Screen
A storyboard is a strip of six to eight drawn frames showing one user's journey, an idea borrowed straight from film.
Frame one happens before the app opens: a student in a corridor with four minutes left, remembering she needs a book.
The middle frames show her using the product, and the final frame shows the result in her life rather than on the screen.
Storyboards catch context problems a wireframe never can: gloves, noise, one hand holding a bag, someone reading over her shoulder.
Stick figures are perfectly acceptable, because the sequence and the situation are what carry the meaning.
One line of caption under each frame holds the detail the drawing cannot, such as the time of day or the battery level.
Active recall
Name two things a wireframe deliberately leaves out, and say why each one is left out.
What is the difference between greyboxing and a clickable prototype?
How do you test a paper prototype without any software?
What does a storyboard show that a set of wireframes cannot?
Why does going to high fidelity too early make feedback less useful?