Plan your website content in one place with Milanote

Website content plan example

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

Website content plan example

How to plan website content in 8 easy steps

A great content plan is the most important step in creating an engaging website. It's where you map out the copy, imagery and structure you need so your team knows what to design and build.

But often, the planning is done in isolation. The copy is written in a Google Doc, the images are stored in a Dropbox folder and the Sitemap resides in a spreadsheet. It's hard for anyone on the team to see how it all fits together. A visual content plan solves all this and lets you plan everything in one place so your team and client have a clear vision for your new website.

In this guide, you'll learn the modern approach to planning content for your website using Milanote. Remember, the creative process is non-linear, so you may find yourself moving back and forth between the steps as you go.

1. Define the purpose of the page

We're going to tackle the content plan one page at a time. So pick a page on your website and try to define its purpose. Why does this page exist? What problem is it solving? What does it need to communicate? This simple exercise will lay the foundation for the content, tone and imagery on this page.

website content plan guide 01
How to do this in Milanote
  1. Create a new board for your first webpage plan.

    Create a new board

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

  2. Add a note to describe the purpose of the page.

    Drag a note card onto your board

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

2. Draft your headline & introduction

Now that you have a clear goal for the page, start putting it into words. Create an engaging headline and introduction that helps your readers know they're in the right place. This will set the scene for all the content and imagery on this page.

website content plan guide 02
How to do this in Milanote
  1. Add a note to explore ideas for the introduction.

    Drag a note card onto your board

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

3. Write the body copy

Next, begin 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, sub-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!

website content plan guide 03
How to do this in Milanote
  1. Add a note to explore content ideas.

    Drag a note card onto your board

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

4. Sketch the rough 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.

website content plan guide 04
How to do this in Milanote
  1. Click the Pen tool and sketch a rough page layout.

5. Add images and video

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.

website content plan guide step04
How to do this in Milanote
  1. Choose example images from the image library.

    Use the built-in image library

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

  2. Embed video from Youtube.

    Embed Youtube videos or audio tracks in a board

    Copy the share link from Youtube, Vimeo, Soundcloud or many other services. Drag a link card onto your board, paste your link and press enter.

6. Add examples of animation

Animation is a great way to communicate how users could interact with your website. For example, if you're planning to include an image gallery that cycles from left to right, it's much easier to show it in action rather than trying to explain it in text. Grab some animated GIFs from Giphy or a video from YouTube or to help explain how the interactions could behave.

CleanShot 2022 06 22 at 11.11.53
How to do this in Milanote
  1. Upload animated gifs.

    Upload a file or document

    Click the "Upload" button or just drag a file onto your board. You can add images, logos, documents, videos, audio and much more.

7. Collaborate and build on your ideas

Whether you're working on a client project or collaborating with a team it can be helpful to bounce ideas off other people. As writer Louisa May Alcott said, "It takes two flints to make a fire."

A collaborative content plan is especially helpful for this step as you can easily connect and work together online. Bringing everyone onto the same page (figuratively and literally!) in real-time allows you to collaborate on copy, images and layout allowing you to create a coherent and engaging website.

website content plan guide 07
How to do this in Milanote
  1. Invite someone else to edit to your board.

    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.

  2. Start a comment thread.

    Start a comment thread

    Drag out a comment from the toolbar on the left and place it on your board. Other editors can reply to your comment.

8. Repeat this process for each page

When you're happy with the content for your first page, take a step back and look at the overall structure of your website by making a Sitemap. This lets you organize the content for your entire website in one place. You can learn more about this process in our guide How to create a Sitemap.

sitemap guide step03
How to do this in Milanote
  1. Use the Sitemap template to structure the pages of your website.

And you're done!

Now that website content plan is complete, everyone on your team has a clear vision for how your website will fit together. And remember, you can continue to refine your content plan over time as your website grows. 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.

Plan your website

Plan your content, imagery and website structure in one place.