The University of Texas at Austin- What Starts Here Changes the World
Services Navigation

Site Structure

"Redesigning a website is like remodeling a kitchen - you must figure out what features and capabilities you need and how you will use them before you design your layout, place appliances and plugs, and select tiles, curtains and countertops." -- Web Redesign 2.0

Good web design requires a solid site architecture based on the site's goals and target audience established in the project brief. The deliverables from this phase are:

  1. Content Outline
  2. Site Diagram
  3. Page Description Diagrams
  4. Wireframes

These four deliverables are dependent on each other and need to be completed sequentially.

Content Outline

Working closely with your clients, create a list of all existing content. Brainstorm content that needs to be created for the site. Review the list of content, trimming anything that does not match the goals or audience needs as stated in the project brief. Take time to think about the future and how the site content might need to grow. Make sure you leave room for growth. Next group your content into categories. As you categorize your content, considering getting user feedback through a card sort. Once your categories are established, create an outline of your content and review it with your clients for accuracy.

Site Diagram

Take your final content outline and create a sitemap or site diagram. A site diagram is just a visual representation of your content outline and site structure. You can use Excel, Visio or Omnigraffle to create your site diagram. Refer to the The Lazy IA's Guide to Making Sitemaps article at Boxes and Arrows for a step-by-step example.

graphic of a site map example

Page Description Diagrams

Many Information Architects are now recommending the use of Page Description Diagrams (PDD)as a step before wireframes or even as a replacement to wireframes. The focus of a PDD is two-fold:

  1. What content belongs on this page
  2. What ist he priority of each chunk of content

Page Description Diagram

A common layout for the PDD is to use the horizontal access for priority. For example, a PDD for any give page might have three columns. The first column would list the high priority content. The second column would list the medium priority content. The third column would list the lowest priority content.

The advantages of the PDD over the wireframe include:

Further reading on Page Description Diagrams:

Wireframes

A wireframe is a non-graphical layout of a web page. It is a simple drawing of the chunks of information and functionality for each page in your site. You will want to create a wireframe for the home page, each unique second level page and any other significantly different page on the site.

Wireframes include the containers for all the major elements of the page. Elements include navigation, images, content, functional elements (like search) and footer.

graphic of a wireframe drawing


  Updated 2009 November 20
  Comments to TeamWeb