Wireframes

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

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

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

3. Which colour choice is typical in a wireframe?

A The brand's full colour palette

B Greys, black and white

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

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

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

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

Definitions

Wireframe

Fill in the Blanks

Complete each line of code by filling in the missing parts.

.placeholder { background: ____; }

<__>Page title</h1>

.placeholder { border: 1px _____ #999; }

.layout { display: ____; }

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

A .wire-box {

B border: 1px solid #888;

C background: #ff0000;

D height: 80px;

E }

Question 2

A <img src="logo.png">

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

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

D <p>Lorem ipsum</p>

Question 3

A /* Wireframe hierarchy */

B .title { font-size: 32px; }

C .subhead { font-size: 20px; }

D .body { font-size: 48px; }

Question 4

A .page { display: flex; }

B .nav { width: 20%; }

C .main { width: 80%; }

D .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>

Answer Key

Wireframes

Section A: Quick Questions

A — A simple, mostly greyscale layout showing where content and controls sit

B — A placeholder for an image

B — Greys, black and white

A — Larger boxes and higher positions for more important items

A — A wireframe is a tidier, more precise layout than a rough sketch

Section B: 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.

Section C: Definitions

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.

Section D: Fill in the Blanks

.placeholder { background: grey; }

<h1>Page title</h1>

.placeholder { border: 1px solid #999; }

.layout { display: grid; }

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

Section E: Spot the Error

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.

A — A wireframe uses a placeholder box instead of a real image. Line 1 should be <div class="box">LOGO</div>.

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.

D — The CSS declaration is missing the colon after background. It should be .footer { background: #ccc; }.

C — The closing tag does not match the opening tag. A <div> must be closed with </div>.