← VCE Innovative Solutions

Design Tool - Sitemap

A diagram showing the structure of a website or app, displaying pages and how they connect to one another

Part of: VCE Applied Computing - U2O1 - Innovative Solutions — Module 14, 9-10 Digital Technologies: Designing user interfaces and experiences — Module 16, QCE Digital Solutions Unit 1 — User Experiences and Interfaces — Module 35, QCE Digital Solutions Unit 3 — Innovative Digital Solutions — Module 14

Understanding Design Tool - Sitemap in VCE Innovative Solutions

What it does: This description matches a sitemap, used to plan structure ahead of building. A link on a sitemap is shown as a connecting line between page boxes. A sitemap displays pages and how they connect, showing the overall structure. Lines or arrows on a sitemap represent connections and links between pages. Reviewing a sitemap can reveal gaps or missing pages before development begins. Sitemaps are a visual structure diagram, distinct from written functional requirements. Hierarchy shows how pages are organised, with related pages branching from higher-level ones. Sitemaps can be revised as the planned structure of a site changes over time.

Common mistakes: A sitemap's main purpose is to show how pages link together, not to hide those connections. Sitemaps are usually created early, before development, not only after launch.

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 Design Tool - Sitemap to a class →

This module's key terms are also in a printable crossword (Part 2 of 2) and word search (All modules).

Take this worksheet further — free with Cloodit

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

Learning
Duo
Does a sitemap show the structure of a website or app?
TrueFalse
Matches
The team built the website first, then tried to map its structure
↓
A sitemap should be planned before development, not after
Applying
Meanings
Term
Sitemap
Meaning
A diagram showing the structure of a website or app, displaying pages and how they connect to one another
Practice
1. Pages
Testing
Gaps
1.
Check Answer
Spots
2Pages are shown, often connected by lines.
3A sitemap can never show how pages link together.

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

The 'African Wild Dog' badge — Savannah Streak, one of Cloodit's 106 collectible badges
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. Does a sitemap show the structure of a website or app?
A. False
B. True ✓
A sitemap displays pages and how they connect, showing the overall structure.
2. Are sitemaps usually created before or after development begins?
A. Before ✓
B. After
Sitemaps are created early to plan structure and navigation before building starts.
3. Do sitemaps typically show links between pages?
A. False
B. True ✓
Lines or arrows on a sitemap represent connections and links between pages.
4. Can a sitemap help identify missing pages in a plan?
A. Yes ✓
B. No
Reviewing a sitemap can reveal gaps or missing pages before development begins.
5. Are sitemaps the same as functional requirements?
A. False ✓
B. True
Sitemaps are a visual structure diagram, distinct from written functional requirements.

Match the Pairs

Boxes representing pages, connected by lines showing links → Sitemap
A homepage box with several sub-pages branching beneath it → Hierarchy
A diagram used to plan website structure before development → Sitemap
A line connecting two pages to show they are linked → Link
The team built the website first, then tried to map its structure → A sitemap should be planned before development, not after
A sitemap was drawn with no lines connecting any of the pages → Sitemaps should show links between pages to represent navigation

Key Term

Sitemap
A diagram showing the structure of a website or app, displaying pages and how they connect to one another

Fill in the Blanks

1. 1. Pages 2. Links 3. Hierarchy
Hint: Type the word for the individual screens shown on a sitemap
2. 1. Pages 2. Links 3. Hierarchy
Hint: Type the word for connections between pages
3. 1. Pages 2. Links 3. Hierarchy
Hint: Type the word for how pages are ranked or ordered by importance
4. A sitemap shows the structure of a website
Hint: Type the word for the overall organisation being shown
5. Sitemaps help plan navigation before development
Hint: Type the word for how users move between pages

Spot the Error

Question 1
A A sitemap shows the structure of a website.
B Pages are shown, often connected by lines.
C A sitemap can never show how pages link together.
D It helps plan navigation before development begins.
Line C — A sitemap's main purpose is to show how pages link together, not to hide those connections.
Question 2
A Sitemaps are usually created early in a project.
B Sitemaps are only ever created after launch.
C They help teams agree on site structure in advance.
D This planning reduces confusion during development.
Line B — Sitemaps are usually created early, before development, not only after launch.
Question 3
A A homepage is often shown at the top of a sitemap.
B Other pages branch out below it.
C This shows the hierarchy of the site.
D A sitemap must always be drawn as a single straight line.
Line D — Sitemaps are usually drawn as branching diagrams, not as a single straight line.
Question 4
A Sitemaps can help identify missing pages early.
B They also show which pages link to which.
C This can reveal gaps in planned navigation.
D Sitemaps have no relevance to website navigation at all.
Line D — Sitemaps are directly relevant to navigation, since they show how pages connect and how users move between them.
Question 5
A A sitemap can be drawn as a simple diagram.
B It typically uses boxes to represent pages.
C Boxes are usually connected with lines showing links.
D Sitemaps can only be created using expensive software.
Line D — Sitemaps can be sketched by hand or created with free tools — they don't require expensive software.

Student with a class code? Join your class →