Design Tool - Mock-ups

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Is a mock-up interactive and functional?

A False

B True

2. Does a mock-up show layout, colours, and text placement?

A True

B False

3. Are mock-ups usually created before or after development begins?

A After

B Before

4. Can mock-ups be revised based on feedback?

A No

B Yes

5. Do mock-ups usually include working buttons and links?

A False

B True

Match the Pairs

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

Left column		Right column
1A static image showing the layout and design of an interface		AMock-up
2A sketch showing where buttons, text, and images will appear		BMock-up
3A design used to gather feedback before development begins		CMock-ups are static and don't include working, functional buttons
4A visual representation focused on layout, not functionality		DMock-up
5The team clicked through a mock-up expecting the buttons to work		EMock-ups usually use placeholder text and images instead of real data
6A mock-up was created with fully accurate, real customer data		FMock-up

Definitions

Mock-up

Fill in the Blanks

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

1. ______ 2. Colours 3. Text placement

1. Layout 2. _______ 3. Text placement

1. Layout 2. Colours 3. ____ placement

A mock-up is a ______ representation of a design

Mock-ups help gather ________ before building

Spot the Error

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

Question 1

A A mock-up is fully interactive and functional.

B It shows what the final interface might look like.

C It focuses on layout, colours, and text placement.

D Mock-ups are usually created before development begins.

Question 2

A Mock-ups show a visual representation of a solution.

B They are used to gather feedback on design choices.

C Feedback gathered can be ignored completely.

D Mock-ups can be revised based on that feedback.

Question 3

A Mock-ups are often created using design software.

B They can also be sketched by hand.

C They show how the finished interface should look.

D Mock-ups must always include working buttons and links.

Question 4

A Mock-ups always come after the product is finished.

B A mock-up focuses on visual design, not functionality.

C Layout choices are shown clearly in a mock-up.

D Colour schemes can also be tested using mock-ups.

Question 5

A Mock-ups help visualise how content will be arranged.

B Mock-ups let users click through working screens.

C Text placement can be planned using a mock-up.

D They give a clear sense of the final visual design.

Answer Key

Design Tool - Mock-ups

Section A: Quick Questions

A — False

A — True

B — Before

B — Yes

A — False

Section B: Match the Pairs

A static image showing the layout and design of an interface → Mock-up

A sketch showing where buttons, text, and images will appear → Mock-up

A design used to gather feedback before development begins → Mock-up

A visual representation focused on layout, not functionality → Mock-up

The team clicked through a mock-up expecting the buttons to work → Mock-ups are static and don't include working, functional buttons

A mock-up was created with fully accurate, real customer data → Mock-ups usually use placeholder text and images instead of real data

Section C: Definitions

Mock-up — A static visual representation of a solution's interface, showing layout and design before development begins

Section D: Fill in the Blanks

1. Layout
2. Colours
3. Text placement

1. Layout
2. Colours
3. Text placement

1. Layout
2. Colours
3. Text placement

A mock-up is a static
 representation of a design

Mock-ups help gather feedback before building

Section E: Spot the Error

A — A mock-up is static, not interactive or functional — that describes a prototype instead.

C — Feedback gathered from a mock-up should inform design decisions, not be ignored completely.

D — Mock-ups do not include working buttons or links, since they are static, not interactive.

A — Mock-ups are created before development, not after the product is finished.

B — Clicking through working screens describes a prototype, not a static mock-up.