Website Planner: Site Map and Wireframes

Start with the sample site or a blank one, then add pages, rename them and change their order with the arrow buttons. Nest a page under another to build the site map. For each page, tick the sections it needs and a simple wireframe appears. Export the plan as text, JSON or a printable sheet.

What the planner gives you
PartWhat you doWhat you get
Site mapAdd, rename, nest and reorder pagesA tree of every page and its parent
Page sectionsTick blocks such as hero, pricing or contact formA grey-box wireframe per page
ExportChoose outline, JSON or printA plan to share with a designer, client or builder

Updated

Most planning templates are static pictures or paid diagram apps. This one is a working planner in the page. Your plan is kept in this browser so it is still here when you come back, and it is never sent to us unless you choose to continue into the builder at the end.

Plan your site

Your plan is kept in this browser only.

Site map

  • Home
  • Services
  • About
  • Contact

Build this site with We.Inc

Your outline becomes the brief. Review and edit it before anything is built.

The JSON format

The download keeps every page with its parent and sections, so another tool or a developer can rebuild the tree.

website-plan.json

A page with a parent of null sits at the top level. Section ids match the blocks in the picker.

{
  "pages": [
    { "id": "p1", "name": "Home", "parent": null, "sections": ["hero", "features", "testimonials", "cta"] },
    { "id": "p2", "name": "Services", "parent": "p1", "sections": ["hero", "services", "pricing", "faq"] },
    { "id": "p4", "name": "Contact", "parent": "p1", "sections": ["form", "map"] }
  ]
}

Common sections and when to use them

Section blocks in the planner
BlockUse it when
HeroEvery landing page: one headline and one main action
Features or servicesVisitors compare what you offer
TestimonialsTrust matters before someone gets in touch
Pricing tablePrices are fixed enough to publish
FAQThe same questions reach you by email
Contact formYou want enquiries without showing an email address

From site map to wireframes

Work top down: list pages, nest them, then decide sections. Doing sections first tends to produce long single pages that try to say everything at once.

Once the outline is settled, a user flow diagram for the main goal, such as booking a call, shows whether the pages and sections actually lead there.

How it works

  1. Rename the sample pages or press New blank plan. Add top-level pages or child pages under the one you have selected.
  2. Use the up and down buttons to reorder pages among their siblings, and the indent buttons to nest a page under the one above or lift it out.
  3. Select a page and tick the sections it should have. The wireframe shows them top to bottom; reorder sections with their arrow buttons.
  4. Export the outline or JSON, print the plan, or take it straight into the builder as a brief.

Tips

  • Keep the top level to the pages that belong in the main menu, usually five to seven.
  • Every page should have one job. If a page needs two heroes, it is probably two pages.
  • Plan the contact path first: which pages end with a form, a phone number or a booking button.
  • Write page names the way visitors search, such as Pricing rather than Our investment options.

Frequently asked questions

What is a website site map?

A plan of every page on a site and how they nest, usually drawn as a tree from the home page down. It is different from sitemap.xml, the machine-readable file that lists URLs for search engines.

What is a wireframe?

A low-detail sketch of a page that shows the order and size of its sections without colours, fonts or real images. It lets people agree on structure before anyone designs the look.

Is my plan saved?

It is saved in this browser's local storage when the browser allows it, so it survives a reload on this device. Private windows and cleared site data lose it, so export a copy you want to keep.

Can I turn the plan into a real site?

Yes. The button at the end carries the outline into We.Inc as a build brief you can review and edit first. Opening it does not start a build or use credits by itself.

Related: User flows and wireframes, Mermaid live editor, XML sitemap generator, Website templates.

Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.

More in Free Tools

Product

Who It's For

Features

Resources

Company

View Sitemap