Website Architecture Basics

When building a new website, or redesigning an existing website, it is crucial to start with a review of the content architecture. The success of your website is heavily dependent upon how easy it is to find content and how it is organized.

As part of our series on Website Redesign principles, we’d like to share our methods for how to start what can seem like an overwhelming exercise. And the larger the website, the more daunting this can feel. We have 4 methods we use – 2 are good old pen/paper and the other 2 are digital.

Large Scale Paper & Post It Notes

For the visual thinker, this method is ideal and can easily be used for small as well as larger sites where you need to have an easy process for moving content around. The idea is to use a large sheet of paper for each section of the website. Then put each page title on a sticky note. With the spectrum of colors now available with sticky notes, you can easily color code types of content (i.e. secured content could be identified as a specific color, etc). You now have an easy way to see how your content is structured and if the balance between your sections is logical.

For deeper navigation, you can create sub-levels if needed (note the “Underwriting” section is separated out here):

Notecards

Notecards can be used in a similar way to the post it notes, but can also be helpful for identifying key information on each card such as image ideas, key information, functionality notes, etc. Cards are also ideal when splitting up the project with a team where different team members are managing full sections of the website.

Visual Hierarchy

While there are several software programs for this type of visual hierarchy charting, PowerPoint is one of our favorite go-to applications for familiarity and ease of use. Creating a deeper level navigation structure is easily accommodated with this method as well. The options for notating variations and characteristics are endless using these digital tools. Just be sure to create a coding system that is easy to follow (for example, putting the secured pages in a different color box).

Here’s an example:

Worksheet Content Listing

Regardless of whether or not we use one of the above methods, we always setup a worksheet content listing eventually. While this method is more challenging for visual people to really get a sense of the website layout, it provides a means to record the crucial details. As we build the website pages, we will highlight which pages are completed and ready for our clients to review. Other notes such as whether the page is secured or if there are notes about specific layouts or content are also added.

Here’s an example: