How To Design A Content Outline For Web Projects

This page may contain links from our sponsors. Here’s how we make money.

When it comes to the web, content is key; it’s the meat and potatoes of every site (assuming you like meat and potatoes), and ultimately, it’s why users come to your site in the first place. Alternatively, if your site has garbage content, visitors probably won’t stick around for very long.

And poor content isn’t the only thing that will deter users. If your site is poorly organized, visitors will probably bounce just as quickly.

While great content is vital, so is a great user experience for consuming that content. You can make this happen with tools like website builders and with a strong content outline, simply by planning how you want your site to operate and how visitors should navigate your links.

In this post, I’ll share advice for writers and webmasters on how to structure a clean content strategy.

Designing a Content Outline for Websites

Website content will differ based on the type of website (ecommerce, blog, personal, etc) but the creative process generally remains the same.

Architecture First

Every great site should begin with solid content architecture. This process looks different for every site, but it all boils down to structuring pages and outlining your content strategy before ever writing a word of copy.

You should organize all your ideas for pages, sub-pages, and navigation structure to help clarify user behaviors. Which pages would users visit most? Would they browse your site like a blog or like a static content site?

Make time to answer these questions because your site architecture can make all the difference in a great content strategy. If you don’t plan ahead then you’ll be flailing wildly looking for solutions.

content user flow

A sitemap can help you plan content visually, so you can actually see how all your pages connect. This isn’t always viable for a large site, but it’s still a good place to start.

If you’re running a blog, it’s a good idea to organize categories and subcategories. Think about which topics you want to cover and how deep you’ll go into each category. With a structured architecture of categories, you’ll have an easier time writing content and placing post ideas into their respective categories.

At this stage, you should try to be as loose as possible. Scribble notes, cross out ideas, and make tons of different drafts for your content.

If you’re a perfectionist, then you might be hesitant to create pages without drafting a navigation.

But you’ll have a much freer creative process if you can think of page structures without forcing pages into definite yes or no categories.

site mapping exercise

Use this first step to brainstorm absolutely everything. Take full creative liberty, and be willing to add/remove ideas at will.

Research is also crucial at this stage, so be willing to hit Google and find out what your users really want. Check out your competition, and study their website architecture. Which pages draw your attention the most? How did they label their pages in the site navigation?

The tips in this Smashing Magazine post should answer all your major questions when first architecting a new site’s content.

Pre-Plan Content Ideas

Once you have some basic scaffolding for your site, you can start planning the content ideas. What sort of content would your visitors be looking for? What topics are most important, and how should they be structured comparatively?

Before doing any writing, it’s helpful to plan your ideas, so as not to waste any time. Even if you plan 10-30 ideas, you’ll have a much clearer approach for your site’s initial content, whether you’re creating blog posts or static pages.

I like to organize a small list of ideas and work through those ideas one at a time. I’ll take down a few related keywords or brief sentences about each topic. This makes organizing the content a lot easier, and the list can always be used as a reference point.

Working with the site architecture lets you organize a blueprint and make headlines that much easier.

But at this stage you should still be pretty loose with your ideas. Try to fit pages into your site architecture, but be willing to change their topics and headlines as needed.

Organize Content Flow

Once you have some ideas, it’s good to plan what type of content styles fit into your pages & blog posts.

Will you need slideshows or image galleries? What about embedded video players? Tabbed widgets or special boxes, like a table of contents?

If you understand how your content should look in its final form, you’ll have a much easier time eventually crafting the content. You can also make individual post outlines with notes for headings and sub-headings.

This should be the very last step in your outline before sitting down to write.

There is no right or wrong way to do this. But each site will have its own content strategy that caters towards that particular audience.

Organization is the key to success with content writing, and fortune favors the prepared mind.

Content Wireframing Tools

Now that you have a workflow, let’s look into some different tools you can use for the job.

When you’re architecting the site, I recommend first using pencil and paper. You can jot down ideas quickly and move through them without a clunky mouse & keyboard. But designing a sitemap and wireframing a page layout can be much more complex.

visual sitemap

When it comes time to list specific pages and headlines, this is where you might want a wireframing tool. There are so many wireframing tools to choose from, but here are some of the best for beginners.


gliffy tool

Online diagramming is surprisingly popular, and Gliffy is one of the best tools for the job. It’s mostly used for charts and flows, but this is a great tool for creating content wireframes as well.

Since it’s all digital, you can link ideas from an Excel sheet or a Word doc and create a single, unified content outline. This can save lots of time on each project, and Gliffy makes designing new websites a breeze.


writemaps outline tool

The sitemap-specific web service, WriteMaps, should be the only choice for web designers. Most new projects already need a sitemap designed, so why not use a tool that does all of this?

With WriteMaps, you can actually write content and organize your pages together in an interactive sitemap. All the content is accessible online, so you can share it with clients and collaborate on new ideas. Pages can be color-coded based on topics, relevancy, or completion, and you can export everything into a PDF for sharing offline.

Lucidchart Wireframing

lucidchart wireframing

Lastly, I want to mention Lucidchart’s wireframing tool. This tool is more helpful when structuring your content layouts rather than your outlines, but it’s still a handy tool if you prefer to design content visually.

You really just need one tool that can get the job done, so there’s no need to pick up a bunch. If you’re okay with Adobe Illustrator, why not use it? Or if you simply prefer pencil & paper, that’s fine, too.

Just use tools that you like, and stick with them. Nobody needs to see your content outline process, so you should do whatever works best for you.

Moving Forward

The most important part of this entire process is freedom to plan and try new ideas. Once you settle into a content outline, it can be tough to change, and if you scrap your outline to start over, it can be discouraging.

But if you follow the strategies in this post, you’ll have a much easier time planning content for any new web project. And these tips work for any site, from an ecommerce shop to a blog, or even a corporate website. Over time you’ll become accustomed to the process, so you can spruce it up with your own finishing touches.

And if you want related articles on writing great content, check out our other posts:

Get the Free Resources Bundle