What is a website sitemap?
A visual sitemap is a tree of every page on a site. Drawing it before you build shows how deep pages sit, which sections are thin and what belongs in the main navigation. This template starts with a home page, five top-level sections and a few sub-pages you can extend.
When to use it
- Planning a new website or reorganising an old one.
- Agreeing navigation and page count with a client before quoting.
- Auditing which pages are more than three clicks from home.
How to make a website sitemap in SketchFlow
- Step 1: Open the sitemap template in SketchFlow.
- Step 2: Rename the top-level sections to match your main navigation.
- Step 3: Add sub-pages by duplicating a box (Ctrl/Cmd+D) and connecting it with an elbow arrow.
- Step 4: Colour pages by status — for example green for done and orange for still to write.
- Step 5: Export the tree as PNG or SVG for your project plan.
Tips for a better result
- Aim for no important page more than three levels below home.
- Keep five to seven items in the main navigation.
- Note the URL under each page name once you have decided it.
Questions about this template
What is a visual sitemap?
It is a diagram of a website's pages arranged as a hierarchy. It is a planning tool, separate from the XML sitemap that search engines read.
How is it different from an XML sitemap?
An XML sitemap is a file listing URLs for crawlers. A visual sitemap is for people: it shows how pages are grouped and linked.
Can I show links between sections?
Yes. Add a dashed arrow between any two pages to show a cross-link that sits outside the main tree.