Navigation Design

From the Brookfield Zoo, IL  (from Zoo)

Building a Web Site: review  Who is my target audience?  What is the goal of my Web site? –Informational –Instructional –Entertaining –Commercial

Building a Web Site (continued)  Be user friendly, not designer’s show-off  Interface design: –Storyboarding/mapping –Graphics Metaphor  Navigation design –Information/Site structure

Home page  Fit in one screen –  Avoid scrolling  Within 800 x 580 (20 to display the menu bar)

Navigation design  Start with a simple plan  Make a flowchart (Inspiration)  Set up a level of importance: –main objectives Sub-objectives  Group together  Place important information within three clicks  Be consistent –Stockton

Types for Navigation choices  Buttons and Hypertext links  Pull down menu  Index or Sitemap (A to Z)  Frames  Tables  Image map  Search

Guideline about making Links    Position Important Links (information) Higher –Remember users’ different monitor sizes  Show links clearly  Informed choices  Indicate Internal vs. External Links –Open another window for external links  Present tabs effectively  Show used links

For instructional/informational sites  Easy to begin  Provide sources(references)  More information sources  Contact information  Provide printing options for a long document (PDF)

Navigation Examples         

See more examples  eat.html#examples eat.html#examples

Before you start Dreamweaver:  You should be able to: –create a new folder in a place you want –make a folder name and file name appropriate for the Web. no space, lower case index.htm or index.html for the first page –put all the materials in the folder –understand where you are saving your file. –understand “save vs. save as” –understand copying a folder from one place to another place?