Visual sitemap maker

This is the diagram kind of sitemap, meant for people. It is not the XML file search engines read, which is a different thing with the same name.

Drawing the sitemap

1. Put the home page at the top.
2. Add the top-level sections below it, in the order they will appear in the navigation.
3. Nest sub-pages under their parent, keeping each depth on its own line.
4. Colour pages by type: landing pages, articles, forms, legal.
5. Mark the pages that already exist differently from the ones still to write.
6. Export a PNG for the proposal, or a PDF for the client.

Keeping a sitemap useful

Three clicks is a guide, not a law

Depth matters less than whether the label makes the next click obvious.

Name pages as they will be titled

Using the real page title, not a code name, means the diagram stays true after the build.

Templates, not every page

For a shop, draw one product page and note how many there are, rather than drawing four hundred.

Show what is not in the menu

Legal pages, thank-you pages and search results exist even when nothing links to them from the navigation.

A worked example: a small shop

Home at the top. Beneath it, four sections: Shop, About, Help and Account. Under Shop, one page per category and, beneath each, a single box marked Product pages rather than every product. Under Help, Delivery, Returns and Contact; under Account, Orders and Details.

The whole site fits on one screen in about fifteen boxes, which is the point: a visual sitemap is for seeing the structure, not for listing every URL. If a section needs its own page of boxes to fit, that is a sign it may need its own navigation too.

When a visual sitemap helps

• Agreeing the structure of a site before design starts
• Auditing a site that has grown without a plan
• Working out navigation and what belongs in the main menu
• Planning a migration, page by page

Sitemap diagram questions