18 min read

Wireframes

Sketch the layout of each page — header, navigation, content and footer — for a computer and a phone.

What Is a Wireframe?

Wireframes for the home page. Crossed boxes stand for images.

Wireframe detail

$Low-fidelity$	$High-fidelity (mock-up)$
$Quick pencil or boxes-only sketch$	$Detailed digital design with real colours, fonts and images$
$Good for trying ideas fast$	$Good for showing the client the final look$
$Paper, whiteboard, Word shapes$	$Figma, Photoshop, Canva$

Practice

Select the regions that should be the same on every page of the tea room site.

Choose all that apply.

What Is a Wireframe?

Wireframes for the home page. Crossed boxes stand for images.

Common Page Regions

Low and High Fidelity

Wireframe detail

$Low-fidelity$	$High-fidelity (mock-up)$
$Quick pencil or boxes-only sketch$	$Detailed digital design with real colours, fonts and images$
$Good for trying ideas fast$	$Good for showing the client the final look$
$Paper, whiteboard, Word shapes$	$Figma, Photoshop, Canva$

Practice

Select the regions that should be the same on every page of the tea room site.

Choose all that apply.