Design Elements

Navigation is how the viewer moves from page to page in a web site.

Prior to starting work on inserting content into web pages, the developer and the owner should agree on a web site map. The web site map is a layout of how the various content subjects are related and is the basis for the navigation structure of the web site.

Site Map Example

Click thumbnail for a larger version.

The initial web site map should include the primary pages of a web site. The web site map should also include a representation of basic subsidiary pages. The example web site map above is an illustration of a good start-up web site map that includes the following:

Top Layer: The Top Layer normally represents the navigation "buttons" displayed across the top of a page. The Top Layer should include basic pages which the viewer can access at any time from any page in the website. In the example, these pages are:

Home Page (required)
Privacy Page (optional, but highly recommended))
Contents Page (optional)
Contact Page (optional)
Feedback Page (optional, but highly recommended)
Search Page (optional)

Each of the above pages is discussed below. And, you will note that a Top Layer page may have one or more subsidiary pages. In the example below, the Feedback Page has a subsidiary page called Confirmation Page. More on the Top Layer.
Subject Layer: The Subject Layer lies just below the Top Layer. The navigation "buttons" for the Subject Layer are normally put on the left side of a web page. As a viewer moves down thewebsitetree (deeper into a subject) the navigation buttons will change to provide navigation within the subsidiary level(s) of a particular subject. In the example, these pages are:

FAQ Page
Subject 1 Page
Subject 2 Page

Of course, there could be many additional subjects.
Subsidiary Layer: The Subsidiary Layer includes pages which supplement a specific subject page. In the example above, these pages are:

FAQ Page
     FAQ Subject 1
     FAQ Subject 2
         More on FAQ Subject 2
Subject 1 Page
     Content Index
         Text
         Pictures
Subject 1 Page
     Content Index
         Order Form
             Confirmation

Design Elements: HTML, CSS, JavaScript and ASP.