Plan and structure your website with a sitemap made in Milanote

sitemap template

Follow this step-by-step guide to learn the modern process of creating a sitemap in Milanote, a free tool used by top creatives.

sitemap template

How to create a visual sitemap in 8 easy steps

Sitemaps are the perfect way to plan the content and structure of your website. Designers, copywriters and marketers use them to map out website categories before jumping into the design phase. They become an invaluable reference for the whole team.

Traditionally, a sitemap is just a static document, but they can be so much more. Building a sitemap in Milanote allows you to create the perfect combination of content and structure, setting out both the hierarchy of pages and also what will live on those pages.

In this guide, you'll learn the modern approach to creating a rich, visual sitemap to inform a website design project.

1. Brainstorm your website categories

What type of content do you need to include on your website? Get together with your team or client and start adding content ideas. This is the time to get creative—add as many ideas as you can. Consider what's most important to your users as well. Are there insights from recent customer research or surveys you've run?

You may not be sure how many pages you need at this stage. This is fine! It's important to remain open minded, we'll refine it and add some structure in the next few steps.

sitemap guide step01
How to do this in Milanote
  1. Create a new board for your Sitemap.

    Create a new board

    Drag a board out from the toolbar. Give it a name, then double click to open it.

  2. Drag out a board for each category on your website.

    Create a new board

    Drag a board out from the toolbar. Give it a name, then double click to open it.

2. Organize your categories

Once you've added your content ideas, it's time to start organizing them into groups. The easiest way to do this is to visually group similar content together. Just drag and drop content into clusters. Themes will start to emerge naturally. You can also use color to help unify each group of content.

sitemap guide step02
How to do this in Milanote
  1. Drag boards into clusters.

  2. Select a board, then choose the color option in the left toolbar.

3. Add structure & hierarchy

There are a few different ways you can structure your website content, but the most common is the tree structure, which we'll use in this example. Start by moving your homepage to the top of your board. All your content categories will fall below home. Next, move your content categories under home and start to tidy things up.

Lastly, use arrows to show the relationship between content. This is a great way to visually explain the hierarchy of your website content. Now you have the perfect birds-eye view of how your website fits together.

sitemap guide step03
How to do this in Milanote
  1. Drag lines from one board to another to show relationships.

4. Start planning your content

Most traditional sitemaps finish here and remain as just a diagram. But we're going to start adding content into each category of our sitemap and create a much richer plan for our website. Open a board for one of your categories so you can start mapping out the content.

sitemap guide step04
How to do this in Milanote
  1. Double-click a board to open it.

5. Add rough written content

Begin by adding ideas for the written content that might appear on this page. It doesn't have to be the final copy but it will give everyone a feel for what you're aiming to communicate. Think about the key messages you want to communicate, page titles and even SEO keywords you need to include. Don't worry about the structure of it yet—just get it out of your head!

sitemap guide step05
How to do this in Milanote
  1. Add a note to capture your content ideas.

    Drag a note card onto your board

    Start typing then use the formatting tools in the left hand toolbar.

6. Add example images

Next, think about the images that would suit this page. Again, these don't have to be the final images, but they'll help bring it to life. You can use images from the web or open Milanote's built-in image library to quickly find inspiring examples.

sitemap guide step06
How to do this in Milanote
  1. Use the built-in image library to find example imagery.

    Use the built-in image library

    Search over 3 million beautiful, free photos then drag images straight onto your board. Powered by Pexels.

7. Sketch the basic page layout

If you have a picture in your head of head of how the page could be structured, grab a pen and sketch it out. Even if it's just some boxes and arrows, it's a great way to figure out which messages are more important than others. A simple sketch is also a useful reference for the developers who will need to build the website.

sitemap guide step07
How to do this in Milanote
  1. Select the Pen tool to sketch your page layout.

8. Share with your team

Now that your Sitemap is finished, invite your content and development teams to begin adding their ideas and feedback to the boards. Too often, designers and copywriters work separately and see a mismatch in their ideas later in the process. Collaborating early in the project keeps everyone on the same page from day 1.

sitemap guide step08
How to do this in Milanote
  1. Invite others to edit your sitemap.

    Invite editors to your board

    Open the "Share" menu from the title bar of your board. Add email addresses of the people you'd like to collaborate with—they'll receive an invitation via email.

And you're done!

You now have a great plan for the content and structure of your website. But remember, a website is never finished. You can continue to evolve your sitemap over time by experimenting with new ideas in these boards. If you're starting a new website design project right now, use the free template below or read our full guide on How to plan a website design project.

Create a Sitemap

Map out the structure and content for your website in one place.