Wireframes
Name:
Date:
Class:
A
Quick Questions
Shade in the A or B circle for each question.
1. Which description best fits a wireframe of a login screen?
2. In a wireframe, how is a photo on the screen usually shown?
3. A designer wants to check that a Submit button sits below the form fields. Which tool is best?
4. Which is a low-fidelity wireframe?
5. What is the main difference between a wireframe and a rough sketch?
B
Match the Pairs
Draw a line connecting each item on the left to its match on the right.
| Left column | Right column | |
|---|---|---|
| 1[ X ] | AA placeholder box on a wireframe that marks where an image will go, without using the final picture | |
| 2Low-fidelity wireframe | BA wireframe should not include colour or final graphics. It should use plain placeholder boxes and labels, such as [ Buy ], [ Logo ] and [ image X ]. | |
| 3A wireframe shows where controls and content are placed, but not colour or final graphics | C+---------------------+ | Header | +------+--------------+ | Menu | Content area | +------+--------------+ | |
| 4A wireframe is a structured, neat layout plan, unlike a free-hand sketch of ideas | D[ Logo ] [ Search ______ ] [Go] [ image X ] [ Heading text ] | |
| 5Wireframe: blue Buy button, final logo, brand photo | EA wireframe is only a simple outline of the layout. A finished, full-colour screen is a final design, not a wireframe. | |
| 6Wireframe = a finished, full-colour screen ready to launch | FA basic, quick black-and-white outline with plain boxes and labels and little detail |
C
Definitions
wireframe
D
Fill in the Blanks
Complete each line of code by filling in the missing parts.
1.
.box {
border: 1px solid _____;
}
2.
<______>Login</button>
3.
<_____ type="text" placeholder="Name">
4.
<!-- Low-fidelity: no ______ or graphics -->
5.
<!-- Wireframe: ___-fidelity layout -->
E
Spot the Error
Shade in the letter of the line that contains an 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>
Question 2
A
box {
B
border: 1px solid black;
C
background: white;
D
}
Question 3
A
.box {
B
border: 1px dashed gray;
C
background: red;
D
color: black;
E
}
Question 4
A
<div class="screen">
B
<div class="box">Title</div>
C
<img src="holiday.jpg">
D
<div class="box">Menu</div>
Question 5
A
<div class="wireframe>
B
<div class="box">Menu</div>
C
<div class="box">Text</div>
D
</div>
Answer Key
Wireframes
Section A: Quick Questions
Q1
B — A simple black-and-white outline showing where the controls and content go
Q2
A — A placeholder box, often with an X through it
Q3
A — A wireframe of the screen
Q4
A — Grey boxes and labels such as [Search] and [Image]
Q5
B — A wireframe is more neat and precise about layout, using boxes and labels
Section B: Match the Pairs
Q1
[ X ] → A placeholder box on a wireframe that marks where an image will go, without using the final picture
Q2
Low-fidelity wireframe → A basic, quick black-and-white outline with plain boxes and labels and little detail
Q3
A wireframe shows where controls and content are placed, but not colour or final graphics → [ Logo ] [ Search ______ ] [Go]
[ image X ] [ Heading text ]
Q4
A wireframe is a structured, neat layout plan, unlike a free-hand sketch of ideas → +---------------------+
| Header |
+------+--------------+
| Menu | Content area |
+------+--------------+
Q5
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 ].
Q6
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.
Section C: Definitions
Q1
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.Section D: Fill in the Blanks
Q1
.box {
border: 1px solid black;
}Q2
<button>Login</button>Q3
<input type="text" placeholder="Name">Q4
<!-- Low-fidelity: no colour or graphics -->Q5
<!-- Wireframe: low-fidelity layout -->Section E: Spot the Error
Q1
D — The closing tag is misspelt. A placeholder box must end with </div> so the wireframe layout is not broken.
Q2
A — A class selector needs a dot. It should be .box { so the style applies to the placeholder boxes in the wireframe.
Q3
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.
Q4
C — A wireframe uses a placeholder box instead of final graphics. The photo should be <div class="box">Photo</div>, not a real image.
Q5
A — The closing quote on the class value is missing. It should be <div class="wireframe"> so the outline container is valid.