Lesson 8: Storyboard/Navigation

Once you have determined your Web site’s purpose, you can draw a rough diagram of the pages with the navigation scheme you will need.

In the early days of web design, designers often created the individual web pages that they needed, then linked them together. As sites became larger and more complex, they often became disorganized and difficult to navigate. Web Designers soon realized that they needed to plan the structure and the relationships among the pages before building the site.

They designed their plan using a navigation scheme that determined how web pages will relate to each other and a visual representation of the Web site using a storyboard. A storyboard is a planning tool to help designers determine what they need for each page. It has a brief summary of each of the page’s contents. The advantages of story boarding are:

helps you visualize the basic structure of the web site

graphically illustrates the links between individual web pages

provides an overall look at the contents of each web page

helps you see whether your ideas will work well before you begin creating the actual pages.

Story boarding saves time and results in a high quality website. Before you start designing web pages with a web editor you should always storyboard. Before you create the storyboard collect the information you want to put on the web site and organize the information into topics. Lay out the topics using a storyboard template.

Plan how people will navigate within your website. Every webpage should have a link to the main menu page of the website. When choosing a navigation scheme, think about how visitors will interact with your site. Will your visitors go directly to specific topics or will they access the pages sequentially? Viewing your site from an audience’s perspective can help you develop a site visitors will enjoy.

There are three types of navigation schemes.

Hierarchical navigation is used in the majority of Web sites. Pages are arranged in levels from top to bottom. A site can contain multiple page levels depending on its content. Pages at lower levels typically contain specific information about the Web site’s topic.

At the top level is the web site’s home page. the home page is often referred to as a top-level page because it is at the highest level in the structure.

The home page contains links to the second level pages below it. Pages that are all on the same level are often referred to as same-level pages.

The second level pages contain links to third-level pages. You can access any of the second level pages from the home page. However, you can only access third-level pages from a second level page.

The advantages of the hierarchical site navigation scheme is that visitors can get a site overview quickly by examining the home page, go directly to the pages that interest them and skip the pages that do not interest them, “click around”, and keep track of where they are on the site.

A linear navigation scheme has all the pages at the same level. Each web page in this scheme is accessed from the previous page and then is linked to the next page. A visitor navigates a linear site by moving through a line of page one after another--the same way you read a book. To go to the previous page, a visitor must use the back button on the browser.

A linear scheme is useful in sites that step visitors through a process. Many web sites use a combination of both hierarchical and linear navigation schemes.

In a random access navigation scheme the pages are not organized in any particular order, but are linked randomly to each other. this scheme makes it difficult for visitors to locate what they need quickly, or at all. This type of navigation scheme is almost never used.

• Use the Storyboard template below to show the design of the web pages you created in the Dreamweaver Lessons; index, Lesson 1, Lesson 2, and Lesson 3.