One-of-a-kind journalistic sites

A great many Web sites exist to tell one story one time; these are great sites to study for how they organize their standard navigation sets. Here are a few:

Sometimes an organization such as PBS will create sites to go along with special programs. The sites will have a unique look, but close inspection will show that they are built on a common template. Compare the PBS site on composer Stephen Foster with its site accompanying Ken Burns’ series on World War II.

Navigation on The War website

The PBS sites have three layers of standing navigation:

All of the navigation on this page from The War site can be created using HTML5 and CSS.

Many students of this class have built informative, attractive sites. Here are a few you might enjoy:

A sketch of a web page

Storyboard your website

If you have an inventory of your content — really, just an outline of your content — you can begin to storyboard your website. This can be a simple sketch of your site structure, such as this one for Fair Trade Coffee, or it can be a detailed schematic of how pages link together.

The main benefit of this exercise is that it helps you determine your standard navigation set.

Your standard navigation should arise naturally from how you divide your content, first into sections, then into individual pages. Go to Fair Trade Coffee to see how this site works.

To help you figure this out, download the Website Planning Form (PDF).


  • Describe how you might go about a content inventory. What sort of things go into the inventory? What categories would you sort them into?
  • What is the long tail of a website? How do most people navigate it?
  • Why is a too-shallow site hierarchy not a good thing? A too-deep one?
  • How does a storyboard of a website translate into files and folders?
  • Where to readers look first on a web page? What is the “F” pattern?
  • What are the four core concepts of wayfinding?How do they translate into principles of navigation design?
  • What is the function of the page header? What goes in the header?
  • What is the function of the page footer? What goes in the footer?
  • What sort of content might you put in a scan column (sidebar)?
  • Why are free-standing pages important? How do you make a page free standing?
  • Name and define the four bad links.
  • Some websites, such as The War, have several layers of standard navigation. Describe these.