Introduction

Whether you are a developer looking to start a new website design project for a client, or a business that needs to build a new site, a website outline comes in handy to make your work easier, clearer and more organized. Everyone who wants to build a website should think of planning first. Everything from knowing how to target customers the right way, understand their needs, how many pages you need, what the developer needs to build the site, etc In this guide, we explore what your website outline needs to include while keeping your SEO ranking top of mind in your site’s design.

What to Include

Site structure

Lay out your site’s structure before you include it in your site’s outline. Keep it simple. Sketch on paper, in your notepad/notebook, or even a whiteboard. Alternatively, use these tools: Microsoft Visio, whiteboard, Excel, OmniGiraffe, or Google Sheets.

Here is an example of a simple structure:

Image Source: Neil Patel

Here are the considerations when adding your site structure to your outline:

Categorization – Categorize your webpages. Group the features and items that are the same together. When categorizing, keep the categories between 2 and 7. Balance out the subcategories. If each category has 5 subcategories, make sure that all of your categories have 5 subcategories.

Page levels/depth – Go for a shallow page depth. Three levels are ideal. However, if your site needs over three levels, in industries like Ecommerce, go for it. The shallower the depth of the page levels, the easier your site’s navigation is.

Have a global category – this is the only extra category that you need besides the 7. Here is where you put items like privacy policies, logins, and search functionalities. The items here are included as part of your header or footer.

Why your site structure is important

Your site structure determines your user experience, crawling, the sitelinks you are likely to get, and the internal links that your site will have.

A site with a great structure results in better user experiences, resulting in lower bounce rates. All these signals tell Google that your site is high quality, contributing to your site ranking higher in search engine results.

Without the proper site structure, there are pages and URLs that search engine bots will never discover.

Appropriate site structure helps your site to have sitelinks in search engine result pages, like our example:

Sitelinks make it easier for users to choose the page that might be the most relevant. This increases your CTR (Click Through Rate), conversion rate, and even sales. Your site is also likely to rank higher than your competition.

“We only show sitelinks for results when we think they’ll be useful to the user. If the structure of your site doesn’t allow our algorithms to find good sitelinks, or we don’t think the sitelinks for your site are relevant for the user’s query, we won’t show them.”

A site with a great structure results in creating internal links which helps with user navigation. It also makes it easier for search engines to identify related pages, reduces site depth, and helps to pass link equity to other pages.

Website layout

Your site’s structure gives you a skeleton sketch of your site. It helps you know the number of columns you need, for example. You now need to list the items that will form your site’s layout. Begin with your landing page, as it is the first place that your site visitors are likely to visit.

Homepage / landing page

The landing page is what users will use to determine whether they need to spend more time on your site or not. What to keep in mind here is that the layout will help a great deal with making user navigation easy.

When coming up with your landing page’s layout, think about what goes above-the-fold, and what goes below-the-fold. This means what goes before scrolling (above-the-fold) and what comes after scrolling (below-the-fold).

Here is an image to help differentiate between above-the-fold and below-the-fold:

Features

List the features you want to have on your site. Just think about what is your must-haves for your site? To help your customers get the information they need, and act on it? All of the UI/UX, SEO, and so on. These include:

CTA

Blog

FAQs

Forum

Gallery

Security

Newsletter

Comments

Testimonials

Lead magnet

Sign up/login

Shopping cart

Payment processing

Social media – share buttons/links

You may not know where exactly to place these features. This will become clear when you build your wireframe (which is a visual representation of your site outline. It shows your site’s layout, navigation, and content. Learn more about wireframes in this article.

Style Guide

Style guides and pattern are essential to help the web designer maintain the structure and create experiences for our audience for various devices.

The benefits of style guides are many: they create a common language, make testing easier, saves time and effort, and create a useful reference to keep coming back to. These include:

Lists

Buttons

Headers

Paragraphs

Responsiveness

Links – active/inactive/hovering

Background – white/black/brand colors

List the colors you want to use. They should be in line with your brand colors.

In your outline, put the related styles for each item in parentheses.

Resources

The main driver of resources is what you can do for them, what have you done so far, why should they choose, how you can help. Along with the style guide you need to create these messages across different methods that attract your audience the best.

List the resources that you will need to achieve the functionality that you intend. These include:

Icons

Fonts

Videos

Testimonials / Reviews

Illustrations and graphics

Marketing copy – white papers, press releases

Images and their sources – company photos/stock

In your outline, put the related resources for each item in parentheses.

Navigation

Decide the navigation that you want based on your site structure, page layout, and features (both top and below-the-fold). It can be top, bottom, side or center. It can also be fixed (static) – where it does not change position with scrolling – or sticky (moves as the user scrolls).

Here are a few navigation options:

Top navigation

There are several options here.

This is a hamburger menu, that you are likely to find on mobile devices:

Fixed top navigation

Static sidebar navigation

The screenshot below shows the navigation on the left side, and stays in the same place even as the user scrolls.

Image source: Template Toaster

Static bottom navigation

Here, the footer is used as the main navigation. Here is a screenshot:

Image source: Template Toaster

Caveat

You must create an outline for each page. Each page on your site is different. While features like the header and footer remain the same, your landing page and about pages must be different, even though they have the same look and feel for consistency.

Template

Here is a template that summarizes all the above-discussed details. Replace the descriptions between the square brackets with your own company’s information.

In conclusion

When creating a website outline, don’t go into much detail. The outline is a guide that helps you keep your website design on track, structured and clear. Leave room for adaptation and creativity.

Jay Kang

Putting all things SEO under a microscope. I'm an experimentalist, researcher, recording every step of how to rank number 1. Here to help, verify, explain, cross-examine the wonders of search engine.