← QCE Digital Solutions Unit 1

Wireframes

A simple black-and-white outline of a screen showing where controls and content go, using placeholder boxes and no colour or final graphics.

Part of: QCE Digital Solutions Unit 1 — User Experiences and Interfaces — Module 33

Understanding Wireframes in QCE Digital Solutions Unit 1

What it does: The plain boxes and labels show placement only. There is no colour, font styling or final artwork. A wireframe uses tidy, defined boxes in set positions to plan the layout, whereas a sketch is looser and more rough. Placeholder boxes mark where an image will go without needing the real image yet. A wireframe lets you test and change layout quickly before any code is written. Low fidelity means simple and rough, with little detail. High fidelity looks much closer to the finished product. Leaving out colour and graphics keeps attention on where things go and how the screen is organised.

Common mistakes: The closing tag is misspelt. A placeholder box must end with </div> so the wireframe layout is not broken. A class selector needs a dot. It should be .box { so the style applies to the placeholder boxes in the wireframe.

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 82–148) and word search (Modules 82–380).

Take this worksheet further — free with Cloodit

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

Learning

Duo

Which description best fits a wireframe of a login screen?

A simple black-and-white outline showing where the controls and content goA full-colour screen with the final logo, photos and fonts

Matches

Wireframe: blue Buy button, final logo, brand photo

↓

A wireframe should not include colour or final graphics. It should use plain placeholder boxes and labels, such as [ Buy ], [ Logo ] and [ image X ].

Applying

Meanings

Term

wireframe

Meaning

A simple black-and-white outline of a screen showing where controls and content go, using placeholder boxes and no colour or final graphics.

Practice

<style>

Testing

Gaps

border: 1px solid ;

Check Answer

Spots

3 <div class="box">Menu</div>

4 <div class="box">Image</dv>

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

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 description best fits a wireframe of a login screen?

A. A full-colour screen with the final logo, photos and fonts

B. A simple black-and-white outline showing where the controls and content go ✓

A wireframe focuses on placement of controls and content. Colour and final graphics are added later in the design process.

2. In a wireframe, how is a photo on the screen usually shown?

A. A placeholder box, often with an X through it ✓

B. The final photo, in full colour

Placeholder boxes mark where an image will go without needing the real image yet.

3. A designer wants to check that a Submit button sits below the form fields. Which tool is best?

A. A wireframe of the screen ✓

B. A finished tkinter program

A wireframe lets you test and change layout quickly before any code is written.

4. Which is a low-fidelity wireframe?

A. Grey boxes and labels such as [Search] and [Image] ✓

B. A polished mock-up with brand colours and real photos

Low fidelity means simple and rough, with little detail. High fidelity looks much closer to the finished product.

5. What is the main difference between a wireframe and a rough sketch?

A. A wireframe must always be drawn in full colour

B. A wireframe is more neat and precise about layout, using boxes and labels ✓

A sketch is a quick, loose idea. A wireframe is a tidier, more structured layout, but both can be black and white.

Match the Pairs

[ X ] → A placeholder box on a wireframe that marks where an image will go, without using the final picture

Low-fidelity wireframe → A basic, quick black-and-white outline with plain boxes and labels and little detail

A wireframe shows where controls and content are placed, but not colour or final graphics → [ Logo ] [ Search ______ ] [Go] [ image X ] [ Heading text ]

Wireframe: blue Buy button, final logo, brand photo → A wireframe should not include colour or final graphics. It should use plain placeholder boxes and labels, such as [ Buy ], [ Logo ] and [ image X ].

Wireframe = a finished, full-colour screen ready to launch → A wireframe is only a simple outline of the layout. A finished, full-colour screen is a final design, not a wireframe.

Key Term

wireframe

A simple black-and-white outline of a screen showing where controls and content go, using placeholder boxes and no colour or final graphics.

Fill in the Blanks

1. .box { border: 1px solid black; }

Hint: Type the colour used for the outline of a placeholder box in a black-and-white wireframe.

2. <button>Login</button>

Hint: Type the HTML tag for a clickable control that a wireframe would show as a labelled box.

3. <input type="text" placeholder="Name">

Hint: Type the HTML tag that creates a one-line text box.

4.

Hint: Type the visual feature that a wireframe leaves out, along with final graphics.

5.

Hint: Type the word describing how detailed a simple wireframe is, compared with a polished high-fidelity design.

Spot the Error

Question 1

A <div class="wireframe">

B <div class="box">Logo</div>

C <div class="box">Menu</div>

D <div class="box">Image</dv>

E </div>

Line D — The closing tag is misspelt. A placeholder box must end with </div> so the wireframe layout is not broken.

Question 2

A box {

B border: 1px solid black;

C background: white;

D }

Line A — A class selector needs a dot. It should be .box { so the style applies to the placeholder boxes in the wireframe.

Question 3

A .box {

B border: 1px dashed gray;

C background: red;

D color: black;

E }

Line C — A wireframe is black and white with no colour. The background should stay white (or grey) so the focus is on placement, not final design.

Question 4

A <div class="screen">

B <div class="box">Title</div>

C <img src="holiday.jpg">

D <div class="box">Menu</div>

Line C — A wireframe uses a placeholder box instead of final graphics. The photo should be <div class="box">Photo</div>, not a real image.

Question 5

A <div class="wireframe>

B <div class="box">Menu</div>

C <div class="box">Text</div>

D </div>

Line A — The closing quote on the class value is missing. It should be <div class="wireframe"> so the outline container is valid.

Student with a class code? Join your class →