1. Navigation Design

2. From the Brookfield Zoo, IL  (from Zoo)

3. Building a Web Site: review  Who is my target audience?  What is the goal of my Web site? –Informational –Instructional –Entertaining –Commercial http://www.benetton.com/ http://www.levi.com

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

5. Home page  Fit in one screen –http://www.piggin.net/http://www.piggin.net/  Avoid scrolling  Within 800 x 580 (20 to display the menu bar)

6. 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

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

8. Guideline about making Links  http://usability.gov/guidelines/ http://usability.gov/guidelines/  http://usableweb.com/ http://usableweb.com/  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

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

10. Navigation Examples  http://www.sarahmclachlan.com/index2.html http://www.sarahmclachlan.com/index2.html  http://www.nationalgeographic.com http://www.nationalgeographic.com  http://www.donbarnett.com/ http://www.donbarnett.com/  http://www.amazon.com/ http://www.amazon.com/  http://www.5tigers.org/index.htm http://www.5tigers.org/index.htm  http://www.monkey.com/lobby_flash.htm http://www.monkey.com/lobby_flash.htm  http://www.marc.com/ http://www.marc.com/  http://www.artcenter.edu/ http://www.artcenter.edu/  http://www.christschool.org/index2.htm http://www.christschool.org/index2.htm

11. See more examples  http://www.fixingyourwebsite.com/mysterym eat.html#examples http://www.fixingyourwebsite.com/mysterym eat.html#examples

12. 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?