A visual sitemap looks like an upside-down tree or org chart: the home page at the top, main sections branching below it, and individual pages below those. Each box is a page; each line is a parent-child link mirrored by the site's navigation. An XML sitemap, by contrast, looks like nothing you'd want to read: a machine-formatted list of URLs for search engines.

A visual sitemap is a planning diagram for people: designers, stakeholders, and writers use it to agree on a site's structure before building. An XML sitemap is a file for machines: it lives at /sitemap.xml and tells search engines which URLs to crawl. They share a name and nothing else. This template is the visual kind; your CMS or framework usually generates the XML kind automatically.

Every page a visitor can reach: the home page, the main sections that become your navigation, their subpages, and the utility pages (contact, privacy, terms) that live in the footer. For redesigns, include current pages you plan to remove, marked as such, so nothing disappears by accident. Most sites fit in three levels; if a page needs four clicks, the structure is asking questions.

A sitemap is the macro view: which pages exist and how they're organized. A wireframe is the micro view: the layout of one page, its sections, content blocks, and controls. They come in that order; you can't wireframe a page you haven't decided to have. Teams often keep both on adjacent boards, with each sitemap node linking to its wireframe.

Three levels handles most sites: home, sections, and pages. Big content sites stretch to four. Past that, important pages get buried, and both visitors and search crawlers struggle to reach them. The old three-click rule isn't a law, but it's a useful smell test: if a page that matters takes four or more clicks from home, promote it or restructure the branch it's in.