What is a sitemap in web design? It’s a plan of every page on your website and how those pages link together.
A wireframe then sketches the layout of one page in plain gray boxes. A mockup shows that same page in full color, with real fonts, images and brand styling.
Put simply, the sitemap decides which pages exist. The wireframe decides what goes where on each page. The mockup decides how it all looks.
| Sitemap | Wireframe | Mockup | |
|---|---|---|---|
| What it plans | Which pages exist and how they connect | What goes where on one page | How one page will look when built |
| What it looks like | A tree or flowchart of page names | Gray boxes, lines and placeholder text | A finished-looking screen with color, fonts and images |
| The question it answers | Can buyers find what they need? | Is the most important thing easy to spot? | Does this look like our business at its best? |
| Clickable? | No | Usually not | No (a prototype is the clickable version) |
| When it happens | First, before any layout work | After the sitemap is agreed | After the wireframes are agreed, before the build |
Most founders only ever get shown the mockup. That’s a problem, because by then the big decisions are already made. If the page list was wrong or the layout buried your call to action, a beautiful design just makes the mistake look expensive.
free audit
H2
Lorem ipsum dolor sit amet consectetur. Orci nec in mauris porttitor sapien enim. Est in auctor eget tincidunt ipsum hendrerit facilisis.
This guide explains each deliverable in plain language. It also gives you a short checklist for approving each one, so you know what you’re signing off.
What Is a Sitemap in Web Design?
A design sitemap is a diagram of your whole website, drawn before anything is designed. It lists every page, groups related pages together and shows which pages sit under which.
Think of it as the floor plan of a house, drawn before anyone picks paint colors.
A typical sitemap for a service business shows:
- The homepage at the top
- Main sections such as Services, About, Work and Contact
- Individual service pages grouped under Services
- Supporting pages like pricing, FAQs or case studies
- Where the page that turns visitors into leads sits, such as a booking or contact page
What a sitemap is used for
A sitemap is used to agree on the structure of a site before anyone spends time on layout or design. In practice, it helps you:
- Spot missing pages early, like a service you sell but never mention
- Cut pages that only exist because a template came with them
- Plan a main menu that gets buyers to important pages quickly
- Give each important service its own page, which also helps search visibility
- Scope the project, since the number of pages affects time and cost
UX researchers treat structure as something to test, not guess. The Nielsen Norman Group describes a method called tree testing. It lets a team refine a site’s navigation before any content, design or code exists.
A small business site rarely needs a formal study. The principle still holds: fix the structure while it’s cheap to change.
A design sitemap is not the XML sitemap Google reads
Plenty of articles blur these two, so it’s worth separating them.
An XML sitemap is a technical file that lists your URLs so search engines can crawl your site more efficiently. Google’s documentation on sitemaps notes that a CMS such as WordPress has often created one for you already.
Google’s Search Console help page on sitemaps goes further: a well-linked site of about 500 pages or fewer probably doesn’t need one submitted at all.
A design sitemap is a planning document for people, not a file for search engines. Every new website or redesign benefits from one, however small, because it’s where the page decisions get made.
What a Wireframe Adds
Once the page list is agreed, a wireframe plans the layout of each key page. It’s usually grayscale on purpose. With no colors or photos to react to, everyone focuses on order and priority.
A website wireframe typically shows:
- The order of sections from top to bottom
- Where the main headline and call to action sit
- Space for proof, such as reviews, client logos or results
- Where forms, images and navigation go
- How the page stacks on a phone screen
This is where conversion decisions start. If your “Book a call” button sits below four sections of company history, no color palette will fix it. Our guide to what a wireframe is in web design covers this stage in more depth.
How Is a Mockup Different From a Wireframe?
A mockup is a static, high-detail picture of how a page will look once it’s built. The wireframe answers “what goes where.” The mockup answers “what will people actually see.”
Compared with a wireframe, a website mockup adds:
- Your brand colors, fonts and logo
- Real or close-to-final copy instead of placeholder text
- Photos, icons and illustrations
- Finished button styles, spacing and visual emphasis
- Separate desktop and mobile versions
That’s why mockups are the easiest stage to give feedback on, and the easiest to get distracted by.
It’s tempting to comment on a shade of blue and miss that the pricing link has vanished from the menu. Keep the approved sitemap and wireframes open next to the mockup when you review it.
Where prototypes fit
A prototype is a clickable version of the mockups. You can tap through menus and move between pages as if the site were live, even though nothing has been coded yet.
Not every project needs one. For a simple service website, approved mockups are often enough. For a multi-step booking journey or a SaaS sign-up flow, a prototype helps you catch confusing steps before development starts.
What Comes First: Sitemap or Wireframe?
The sitemap comes first. You can’t lay out a page until you know which pages exist and what job each one does. The usual order looks like this:
- Sitemap: agree on the pages and how they connect
- Wireframes: plan the layout of each key page
- Mockups: apply the visual design to those layouts
- Prototype (optional): link the mockups into a clickable demo
- Build: develop the approved design into a working website
Each step locks in decisions for the next one. Moving a page on a sitemap takes minutes. Moving it after launch can mean new navigation, new internal links and pages that need redesigning.
The wider project world has numbers on this. A Project Management Institute survey of more than 2,000 practitioners found that nearly half of unsuccessful projects missed their goals because of poor requirements management.
That study covered projects of every kind, not just websites. Sitemaps and wireframes are how a web project writes its requirements down in a form you can actually see.
Can you skip a stage?
Sometimes, yes. On a five-page website, the sitemap might be a simple list. A skilled team may also move quickly from rough wireframes to mockups. What you shouldn’t skip is the thinking each stage stands for.
This is where template-first thinking causes trouble. When a project starts from a pre-made theme, the template has already decided the pages and the layout. Your buyer’s questions get squeezed into boxes built for someone else’s business.
If you’re weighing that route, our comparison of custom web design vs templates covers the trade-offs.
What to Check Before You Approve Each One
Few agencies tell clients what to look for at each stage. Use these checklists when each deliverable lands in your inbox.
Before you approve the sitemap
- Does every service you sell have its own page?
- Can a first-time visitor reach your contact or booking page from the homepage in one or two clicks?
- Are the menu labels in your buyer’s words rather than internal jargon?
- Is anything missing that prospects ask about on sales calls, like pricing, process or results?
Before you approve the wireframes
- Is the main call to action visible without a long scroll?
- Does the section order follow the questions a buyer asks, in the order they ask them?
- Is proof placed close to the ask, not buried at the bottom?
- Is there a mobile layout as well as a desktop one?
- Do the headlines read like real copy, or is it placeholder text everywhere?
Before you approve the mockups
- Does each page still match the wireframe you approved?
- Would you be proud, not embarrassed, to send a prospect to this page?
- Have you seen every key page on both desktop and mobile?
- Do buttons and links clearly look clickable?
- Is the copy close enough to final that you’re judging the real page?
If an agency can’t show you a sitemap or wireframes, ask how the page structure and layout decisions were made. It’s a useful question to add to your list when you’re working out how to choose a web design company.
Where These Stages Sit in a Gramup Project
Every Gramup website follows the CONVERT Framework, a seven-step system built around buyer psychology, SEO and conversion. Structure comes early. In the Navigate step, we define the user journey and the conversion flow for each key page.
The visual stage is Validate. You get a full custom Figma design, desktop and mobile, within two weeks of brief approval. Nothing gets built until you approve it. You can see how the whole system runs on our website design and development page.
Getting structure right before design shows up in results. For Leverage with Media PR, the project included a full information architecture rebuild and a custom Figma design for every key page. The WordPress build and on-page SEO followed.
Afterwards, qualified leads tripled per month and the redesigned landing pages converted 85% better.
FAQ
Who should create the sitemap, me or the agency?
The agency should draft it, and you should challenge it. A good team builds the first version from your goals and buyer research.
You bring what they can’t know. That means which services earn the most, what prospects ask on calls and which pages nobody will maintain.
Is a website mockup the same as a brand mockup?
No. A website mockup shows how a web page will look before it’s built. A brand mockup shows your logo on things like business cards, social posts or proposals.
Doing brand identity work alongside a new site? Then the brand direction should feed into the website mockups so the two match.
Can I change the sitemap after the mockups are approved?
Yes, but expect a ripple. A new page usually means a new wireframe, a new mockup, menu changes and fresh copy. Small tweaks are normal. A major restructure this late often means discovery was rushed, so ask why the gap wasn’t caught sooner.
What’s the difference between a sitemap and a user flow?
A sitemap shows every page and where it sits on the site. A user flow follows one visitor’s path to one goal, like going from a Google search to a service page to a booking form.
The sitemap is the whole map. The user flow is one route through it.
Should a sitemap be planned around SEO keywords?
Partly. Each service people search for separately usually deserves its own page, and the sitemap is where that gets decided. Labels and grouping still need to make sense to a human first. A keyword-only structure can confuse the buyers you want to convert.
What tools are used to make sitemaps, wireframes and mockups?
A sitemap can start as a spreadsheet or whiteboard sketch. Tools like Slickplan or Octopus.do turn it into a diagram. Wireframes and mockups are usually made in design tools such as Figma, which Gramup uses.
As a client, the tool matters less than getting a shareable link you can comment on.
See the Plan Before You Pay for the Build
You shouldn’t have to wait until launch day to find out whether your website works for your buyers. When you see the structure and design first, your feedback shapes the site while changes are still simple.
