Create a rich, visual sitemap for your next website project in Milanote

Milanote lets you create a rich, visual sitemap in minutes.

The following step-by-step guide will lead you through the process of creating your own sitemap in Milanote, for free.

Sign up for free

Milanote is a tool for planning creative projects. The easy-to-use drag-and-drop interface allows you to arrange images, notes, links, files, videos and tasks, side-by-side on an infinite virtual canvas. The things that you add stay exactly where you put them—there’s no snapping in place to a predefined layout. If you like, you can add organisation and structure using lines, arrows and whitespace. It's just like working on a wall in a creative studio. This flexibility means you can arrange inspiration images into a beautiful moodboard, add notes explaining your ideas, get feedback from a client and map out tasks on a project—all in one place. Milanote is used by top creative teams at companies like Apple, Uber, Sony, Nike and more. Sign up for a free account to begin.

How to create a visual sitemap

John Pooley, Product Manager
Updated 22nd October, 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.

circle image

Create your own visual sitemap in Milanote today

Free with no time limit.