1 / 13
Télécharger la présentation

Web Design Principles

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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.

More Related