← QCE Digital Solutions Unit 3

Wireframes

A simple, mostly greyscale layout of a screen showing where content and controls sit, using placeholder boxes and no colour, images or final styling.

Part of: QCE Digital Solutions Unit 3 — Innovative Digital Solutions — Module 15

Understanding Wireframes in QCE Digital Solutions Unit 3

What it does: Lorem ipsum in a box is a placeholder that reserves space for content without writing the final wording. Size and position show hierarchy in a wireframe, so the main heading appears first and biggest, with less important content below it. A wireframe focuses on layout, not final styling. Colour, images and fonts come later in a mock-up or the finished product. Placeholders mark where content will go without choosing the actual image. The real image is added later. Wireframes are mostly greyscale so that attention stays on layout and hierarchy, not on colour. Sketches are fast and rough for exploring ideas. Wireframes are cleaner and more precise, with boxes and labels placed deliberately.

Common mistakes: A wireframe is mostly greyscale, so a placeholder box should use a grey such as #ccc. Red adds colour and styling that belong in a later design stage. A wireframe uses a placeholder box instead of a real image. Line 1 should be <div class="box">LOGO</div>.

Class: _____________________  ·  Name: _____________________  ·  Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add Wireframes to a class →

This module's key terms are also in a printable crossword (Modules 251–337) and word search (Modules 194–337).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning
Duo
Which best describes a wireframe?
A finished, full-colour screen with final images and fontsA simple, mostly greyscale layout showing where content and controls sit
Matches
[ Button: bright red, rounded, shadow ]
↓
A wireframe is mostly greyscale and has no final styling, so colour, rounded corners and shadows do not belong in it.
Applying
Meanings
Term
Wireframe
Meaning
A simple, mostly greyscale layout of a screen showing where content and controls sit, using placeholder boxes and no colour, images or final styling.
Practice
<style>
Testing
Gaps
.placeholder { background: ; }
Check Answer
Spots
2 border: 1px solid #888;
3 background: #ff0000;

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

The 'Firefly' badge — Night Coder, one of Cloodit's 106 collectible badges
Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy
Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games
Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print
Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. Which best describes a wireframe?
A. A simple, mostly greyscale layout showing where content and controls sit ✓
B. A finished, full-colour screen with final images and fonts
A wireframe focuses on layout, not final styling. Colour, images and fonts come later in a mock-up or the finished product.
2. In a wireframe, a box with a cross through it usually stands for...
A. The final photo to be used
B. A placeholder for an image ✓
Placeholders mark where content will go without choosing the actual image. The real image is added later.
3. Which colour choice is typical in a wireframe?
A. The brand's full colour palette
B. Greys, black and white ✓
Wireframes are mostly greyscale so that attention stays on layout and hierarchy, not on colour.
4. How is hierarchy usually shown in a wireframe?
A. Larger boxes and higher positions for more important items ✓
B. Bright colours and animations on important items
Wireframes show hierarchy through size and position. Colour and animation are not used at this stage.
5. Which statement about wireframes and sketches is correct?
A. A wireframe is a tidier, more precise layout than a rough sketch ✓
B. A wireframe is a quick, rough doodle drawn in seconds
Sketches are fast and rough for exploring ideas. Wireframes are cleaner and more precise, with boxes and labels placed deliberately.

Match the Pairs

[ IMAGE ] → A placeholder box showing where a picture will go, without using the real image yet.
[ Search ______ ] [ Go ] → A text box and a button drawn as simple outlines to show where the user types and clicks.
Placeholders for content: dummy text marks where real text will be added later → [ Lorem ipsum text goes here ]
Layout and hierarchy: the most important item sits at the top and is drawn largest → TOP: [ HEADING - large ] BELOW: [ text ]
[ Button: bright red, rounded, shadow ] → A wireframe is mostly greyscale and has no final styling, so colour, rounded corners and shadows do not belong in it.
[ photo_of_school_oval.jpg ] → A wireframe uses a placeholder box instead of a real image, so including the actual photo goes beyond the purpose of a wireframe.

Key Term

Wireframe
A simple, mostly greyscale layout of a screen showing where content and controls sit, using placeholder boxes and no colour, images or final styling.

Fill in the Blanks

1. .placeholder { background: grey; }
Hint: Type the colour name that keeps a wireframe greyscale, with no final colours.
2. <h1>Page title</h1>
Hint: Type the tag for the top-level heading, which shows the most important item in the hierarchy.
3. .placeholder { border: 1px solid #999; }
Hint: Type the border style keyword that draws a plain continuous outline around a placeholder box.
4. .layout { display: grid; }
Hint: Type the display value that arranges boxes into rows and columns to show the screen layout.
5. <input type="text" placeholder="Name">
Hint: Type the attribute name that shows temporary guide text inside an empty field.

Spot the Error

Question 1
A .wire-box {
B border: 1px solid #888;
C background: #ff0000;
D height: 80px;
E }
Line C — A wireframe is mostly greyscale, so a placeholder box should use a grey such as #ccc. Red adds colour and styling that belong in a later design stage.
Question 2
A <img src="logo.png">
B <div class="box">MENU</div>
C <div class="box">IMAGE</div>
D <p>Lorem ipsum</p>
Line A — A wireframe uses a placeholder box instead of a real image. Line 1 should be <div class="box">LOGO</div>.
Question 3
A /* Wireframe hierarchy */
B .title { font-size: 32px; }
C .subhead { font-size: 20px; }
D .body { font-size: 48px; }
Line D — Hierarchy means the most important content looks biggest. Body text at 48px is larger than the title and subhead, so it breaks the hierarchy. It should be 16px.
Question 4
A .page { display: flex; }
B .nav { width: 20%; }
C .main { width: 80%; }
D .footer { background #ccc; }
Line D — The CSS declaration is missing the colon after background. It should be .footer { background: #ccc; }.
Question 5
A <h1>PAGE TITLE</h1>
B <p>Lorem ipsum dolor sit amet</p>
C <div class="box">IMAGE</box>
D <button>Button</button>
Line C — The closing tag does not match the opening tag. A <div> must be closed with </div>.

Student with a class code? Join your class →