How to create a visual sitemap

John Pooley, Product Manager
Updated 30th August, 2018

In this guide you'll learn to create a rich, visual sitemap to inform a website design project. Our goal is to create the perfect combination of content and structure, setting out both the hierarchy of pages and also what will live on those pages. This task is usually completed by multiple people, each responsible for different elements of the website. While designers and marketers are thinking about navigation and content, the developers are figuring out how they will finally built it. It's a good idea to invite the rest of your team to help you out. We'll guide you through this process in Milanote - Get started for free.

01.

Start at the top

Our visual sitemap needs to achieve two main objectives. First, to provide a birds-eye view of the website structure, page hierarchy and categorisation. Second, to provide guidance on the content for each page. We're going to produce a visual sitemap that tackles both of these challenges, using Milanote boards to represent each page. Boards work like folders and we'll place content inside them later.

  1. Begin by dragging a new Board in from the toolbar.
  2. Name the Board 'Homepage'.
  3. Milanote will automatically generate an icon for the board, but you can change this if you wish.
02.

Create top level page boards

Next up are the top-level pages. We're going to use boards for these too, and indicate internal linking by connecting them with lines. You may not be sure how many pages you need at this stage. This is fine! It's important to remain open minded and allow the structure to emerge gradually as you discover more about what will exist within the pages.

  1. Create your first top-level page by dragging in a new Board from the toolbar.
  2. Give the Board a name.
  3. Connect your pages by selecting both Boards, right-clicking, and selecting 'Connect with Lines'.
  4. Repeat this for each top-level page you wish to create.
03.

Create sub-pages

Next we're going to create the sub-pages that live deeper within the website. For larger websites, you can group large sections together to be represented by one board.

  1. Drag in new Boards for each sub page.
  2. Connect these with lines as you did previously.
04.

Start adding content

It's time to start thinking about content. This part can take a while, so don't rush! It's helpful to just get your ideas down in the middle of the board first and organise it later. Now that the basic structure is in place, invite your content and development teams to begin adding their content to the boards.

  1. Double-click into the first sub-page Board to work on.
  2. Add your rough ideas to the board using Note cards.
  3. Click on Power-ups and Convert to long form for distraction free editing
  4. Add Image assets for the page.
  5. Drag out a To-do List to keep track of the content development tasks.
  6. Invite your team to the Board to help out.
05.

And you're done!

The next part is up to you! To export your sitemap, select 'Export the current board layout' from the Export menu. But remember, a website is never finished. You can continue to evolve the website over time by experimenting with new ideas in these boards.

Create your own visual sitemap in Milanote today

Free with no time limit.