Information Architecture

Genius Stack: Your Outline

{documentation: information architecture}

Your Website Outline

“Information Architecture”, as termed by web planners and developers to make it sound fancier than it is.

In order to help plan your website we recommend creating an Information Architecture document. That is just a fancy word for outline. This is going to help you (and us) build out the structure of your website. No need to get too heady about this, it really is just an outline, though sometimes we like to draw them out with boxes. Don’t be shy, you can literally draw this out and take a picture if you want or use a free tool, like Google Drive Drawing.

Determine the Structure of your Website

The structure is the hierarchy of your pages. For example under “Our Services” you may have a page for each of your three services. Keep this simple at first. You can always add content later, you can add unlimited pages. However we recommend that you focus on the core information at first with the goal of getting the site up and running and then add to it over time.

We recommend that you keep your site structure simple and note that it is considered best practice to only have 2 levels to your content unless you absolutely need to have more. This aids in easy mobile navigation as well as overall usability.

  • Level 1
    • Level 2
      • Level 3 (only if you absolutely must)

website information architecture example

Determine What Content Will Go on Each Page

Now that you have your site structure in mind, it’s time to figure out what content will go on each page. We recommend first doing this in outline form and the using MS Word, Google Docs or whatever to gather and refine your content. Images can be put into the document or simply referenced. Either way we are going to want to receive each image separately because sometimes we lose quality when taking them out of such word processors.

Example Information Architecture / Outline

  • Home Page
    • Slider highlighting services
    • Welcome text
    • Short service descriptions with link to service pages
    • CTA: Link to contact us
    • Links to latest 3 news/blog posts
  • About Us
    • Our Company
      • Mission statement
      • Overview of services with link to services page
      • Overview of our team and philosophy with link to team page
    • Our Team
      • Photo and short biography for each team member
    • Our Clients
      • Logos, descriptions of services provided and testimonials
  • Our Services
      • Service A
        • Service description
        • CTA: Link to contact us
      • Service B
        • Service description
        • CTA: Link to contact us
      • Service C
        • Service description
        • CTA: Link to contact us
  • News/Blog
    • Paged archive of all blog/news entries
  • Contact Us
    • Contact us form with confirmation message

COLORED TEXT: Content areas within page (not unique pages)
CTA: Call to Action (button or link)

Click here to download an example MS Word file.

Once you have the structure of your site ready and then your content – we are ready to begin loading everything up on your website and bring this thing alive!