Web Design Principles

1. Web Design Principles Screen DesignNavigationRubrics

2. Screen Design Principles • Most sites continue to use tables to control the page layout. In the future, CSS layers will be used, but at the moment, tables are the best practice. • Be consistent in the use of page elements from screen to screen. Style sheets and templates help maintain this consistency.

3. Backgrounds • Backgrounds must be chosen judiciously so they do not detract from the readability of foreground text. • An excellent example is the Macromedia site. Notice how the backgrounds never interfere with the readability of the text.

4. Text • Research has shown that the Arial font is more readable onscreen than Times Roman. • Do not center prose. When you center prose, the left margin becomes jagged, making the text more arduous to read.

5. Navigation • Navigation should be clear and intuitive. • Navigation bars can be placed on the side, near the top, or near the bottom of the page. Place them consistently, rather than moving them around. • Provide links to return to the previous page, the previous menu, and the front page.

6. Navigational Icons • Some Web pages contain navigational icons that give the user the option to page forward or backward, go to a menu, or return to a home page. • Lined them up in the same region of the screen instead of scattering the icons about the screen. • Position the icons in a logical order. Here is a suggested sequence of icons that gives the user the option to page back, return to the menu, go to a home page, or page forward:

7. Hypermedia Design Patterns • Linear List. Enables the user to move back and forth through a serial sequence of pages, moving forward to new materials or backward to review. • Menu. Permits the user to select one from a number of choices listed onscreen. • Hierarchy. Presents the user with a menu of menus. • Network. Multiply linked items that provide the richest kind of navigation.

8. Linear List • The linear list lets the user move forward to see new pages or backward to review. • This paradigm is appropriate for sequences of Web pages that you want the user to view in a slideshow manner. • If the sequence is long, however, you will also want to provide a link to the menu so there is a way to jump out of the slideshow if the user loses interest.

9. Menu • The menu design presents the user with a set of choices. • In this example, the menu lets the user begin one of three possible sequences of Web pages.

10. Hierarchy • The hierarchy presents the user with a menu of menus. • If you have a large Web site with dozens or hundreds of pages, the hierarchy enables you to design pathways through which the user can drill down to the desired page.

11. Network • The network paradigm contains multiply linked items that provide the richest kind of navigation. • You should use this kind of a design whenever you need to provide alternate pathways through a complex web.

12. Hybrid Hybrid designs employ linear lists, menus, hierarchies, and networks where appropriate. If you think about the World Wide Web as a whole, its design represents the ultimate in hybrid hypermedia construction.

13. Rubrics • Web page rubric from the University of Wisconsin―Stout. • Web site design rubric from rubistar.