Structuring the Website — The Site Map

beginner25 min

Learning objectives

  • Plan number of pages, content/features and site navigation
  • Produce a detailed, annotated site map that meets client requirements

Learn

A2 — Planning a site map

A site map is a diagram showing every page in a website and how they connect — it's the blueprint you build everything else from, and it's the main deliverable of PSAB Task 1 alongside your research (A.P2/A.M2).

What a good site map includes

  • Every page the site will need, named clearly (Home, Products, About, Contact, ...)
  • The hierarchy — which pages are top-level, which are nested underneath (e.g. individual product pages under "Products")
  • Navigation paths — how a user gets from one page to another
  • Annotations explaining why each page exists and what content/features it will contain, tied back to your client requirements and research

Worked example — a small eCommerce brief

Home
├── Products
│   ├── Category: T-Shirts
│   └── Category: Accessories
├── About Us
├── Testimonials
├── Contact / Enquiry Form
└── Basket / Checkout

Annotation for "Testimonials": Included to address the client requirement for building trust with first-time buyers, identified in the research stage (Lesson 6) — will display 3–4 real customer quotes with star ratings.

Why annotation matters

A site map with just page names shows structure, but not reasoning. Annotating each page with why it's there — tied to your audience research and client brief — is what separates a basic site map from one that demonstrates real analysis, which is exactly what the higher PSAB grading criteria (A.M2) look for.

Task

Draft a site map for your own chosen brand (from the PSAB brief), using everything you've researched in Lessons 2–6. Get peer feedback before finalising it for PSAB Task 1.

Log in to track this lesson on your progress dashboard.
Log in