Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Voices That Matter

  • Print
  • + Share This

More than one way to navigate

You can have different kinds of navigation styles on the same page. The content of the site and how you want to present the information will help determine how you approach the navigation design, as well as the overall design of the site.

When designing the Santa Fe Stages site (shown in Figure 9), the client wanted all the current productions to be prominently displayed on the first page so anyone visiting the site would have access to every production without digging any deeper into the site. And, naturally, they wanted a way to navigate to all main sections. So, you can get to the page of productions by clicking the "SHOWS" button in the main navigation bar on the top of the home page; you can also click on any title listed on the left side of the home page, and it will take you to that title's exact position on the long, scrolling productions page. It's not always necessary to provide multiple ways to navigate to the same information, but in this case, the client's request led to this solution.

Repeating a navigation bar such as the stage lights on subsequent pages doesn't add to the download time of those pages. Once the graphic files are loaded the first time, they are then stored in your browser's memory (referred to as the "cache"). Each time you go to a page with the same navigation bar, the browser displays its cached version instead of down-loading the graphic all over again.

The Home Sweet Home Page site uses five kinds of navigation:

  1. The home page's main graphic is an image map—different areas of the large illustration are linked to different pages (see Figure 10).

  2. There are text links that duplicate the links in the image map and act as simple links in body copy (see Figure 10).

  3. Throughout the site, graphic icons act as buttons to link to other pages (see Figure 11).

  4. In addition, there is an index page that offers links to every section (see Figure 12).

  5. And on every page is a consistent navigation bar that takes you to every other section in the site (see Figure 13).

  • + Share This
  • 🔖 Save To Your Account

Related Resources

There are currently no related titles. Please check back later.