| Barupa's Website Design Tutorial | ||
|
|
||
|
On a well-planned website it's quick and easy to find and navigate to information. Plan navigation before pages are created. A website may start small, but imagine the complexity when every school, every library, every teacher has webpages for all their various programs, activities, organizations, instructional needs, and student projects. Establish a navigation plan now to ensure that viewers quickly get what they need and that new pages of content can be quickly inserted and located. About ten links on a homepage is the most we can expect people to comprehend at a time, so grouping information is essential. (NOTE) Provide efficient travel throughout your website--the real test of navigation is what happens below the homepage. First, define groups of pages as determined by the customer needs assessment from Step 2 and create a site map of these initial pages. Use MS Word to create a simple outline, then, use it, change it, add to it as ideas are generated for new pages. (If you choose, save the outline as HTML and a site map page is ready for linking and publishing.) Second, choose a template for the homepage based on the arrangement of lower-level pages in the hierarchy. Choose sub-page templates for similarity of layout, differing only in content, to increase the viewer's sense of place on the website, and their ability to navigate easily. One arrangement is for each group of subpages to have a unique template so that each group has its own distinctive identity. This works well with a broad site having several links off the homepage but just a few links off each 2nd-level page. Use the same template, background, text and link colors, for the 2nd-level page and the sub-level pages in that same group so visitors know what area of the site they're in (for example, school-related pages are in school colors with the mascot, all teacher pages are red with pencils, all student pages are blue with birds, PTA or parent-related pages have yellow stars, events pages are green, school clubs are purple). Another option is to have a unique homepage, the same template for all 2nd-level pages, and 2 or 3 different templates for various sub-level pages. This option works well for a deep site with a few links off the homepage to 2nd-level pages, and numerous sub-level support pages linked off each 2nd-level group. Use the same template for all same-level pages so visitors sense how far down into the site they are (for example, the homepage is in school colors with the mascot, all 2nd-level pages are red with pencils, 3rd-level pages are blue with birds or green with flowers, 3rd-level pages are yellow with suns or purple with stars). Third, provide links back to intermediate pages as well as the homepage. Don't expect viewers to return to the homepage and then re-click through the same pages to view related information. They won't; they will leave the website. Consider a header or footer in the same place on every page showing a chain of navigation: Homepage-->2nd level-->3rd level-->this page, with each one a link back through the chain. Bigger sites like Netscape and Microsoft do this to maximize access. Even if everything else on the page is entirely different, the header or footer provides consistent identity and ease of navigation. Fourth, consistently use specific icons for homepage links, each identifying teacher homepage, library homepage, school homepage, or district homepage. Individual teacher pages should have a link back to the school page that their page is linked from and to the district's main page. Integration is especially challenging the larger a website becomes. Coordinating district pages, department pages, school pages, library pages, and teacher pages calls for use of headers, footers and icons to make our navigation schemes apparent and easy to use. Once navigation is established and links are
created on your templates, addition of content will go very quickly. The
time taken to plan navigation cannot be overemphasized. The greatest frustration
of web designers is spending time redoing pages of a poorly planned website.
Viewers don't tolerate frustration--they simply leave the site and do not
return.
NOTE: There are some exceptions to this, like websites that are devoted to searching, news, or large amounts of topical information. These "technical" sites can provide more links since their customers want to scan the full range of information provided to find a very specific piece. |
||
|
Barbara Paciotti 2004
|
||
Intro | 1-Identity | 2-Customer | 3-Navigation | 4-Layout | 5-Content | 6-Graphics | Back to HOMEPAGE