Web Design Principles
Screen Design
Navigation
Rubrics
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.
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.
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.
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.
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:
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.
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.
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.
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.
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.
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.
Rubrics
Web page rubric from the University
of Wisconsin―Stout.
Web site design rubric from rubistar.