Web Design practices

Part: 1

How users access different web-pages within the same Web-site can be organized by three different design types.

  1. Hierarchical
    This type of design is the common way to organize web-pages. It is characterized by a single "Home-page" which has hyperlinks to multiple other web-pages. When drawn out, a Hierarchical design is similar to that of a tree; where the homepage is a single root, from which extends multiple layers of branches. Care needs to be taken to not create too many separate pages, or otherwise create too much depth in the layers. A common rule of thumb is to not create more than three layers of pages.
  2. Linear
    A linear web-site is one where web-pages are designed in such a way that each page should be viewed sequentially, users are discouraged or otherwise prevented from skipping too far ahead and in some cases backward. This type of site organization is useful in step-by-step tutorials. Often a Linear organization will be used in small portions of other types of websites, such as hierarchical.
  3. Random
    Randomly organized web-sites are rare as they can be very confusing. They are characterized as having no clear or consistent path throughout the web-site. Those who utilize this type of website design are often individuals trying to be "different", humorous, or otherwise artistic.

Part: 2

Methods used to navigate within websites include:

  1. Navigation Bars
    Text- or graphically-based objects which are designed and placed in such a way to make it obvious to the user that they can be used to navigate between important sections of the website, in addition to providing a way for users to easily determine where they are currently located. They are usually placed near the top of the web-site and can be oriented either horizontally or vertically; Navigation bars are typically consistent for each page of a web-site.
  2. Site map
    A centralized page detailing all the current web-pages of the web-site, as well as providing a summary of the contents of each page. A site map will organize this information in such a way that reflects how the pages is linked together or otherwise related to each other.
  3. Site Search
    A text-box located in a specific, consistent, and easily-found location that can allow a user to search the entire website for a specific phrase. Many commercial applications can be utilized to provide this functionality.

Part: 3

The four main visual principles of web-site design are:

  1. Repetition
    Repeating visual elements throughout each web-page can make a website appear as a cohesive whole.
  2. Contrast
    Contrast should use starkly different elements to make a web-page more interesting and exciting. Contrast can be used in such a way to draw the user's attention to certain areas. Contrast between text and other objects is especially important as it aids readability.
  3. Proximity
    One should always physically place similar items together. Dis-similar items should be physically separated from other items. Doing this can give the user visual clues as to the functionality or purpose of each item.
  4. Alignment
    Each element of a design should be physically aligned horizontally or vertically with another object. This helps a web-page appear as a cohesive unit rather than a "disorganized mess".

Part: 4

The four major components of web-design are:

Page Layout Design
Design pages to keep loading time, actual or perceived, to a minimum.
The first half of a page will draw the most attention from a user, add important and attention-getting content there.
"Location, location, location!" Eyes will look in certain areas first, namely the upper left of a page and will move right and downward. Adding important information in those places will ensure a user can easily find them.
Visitors' screen resolution will vary, do not design a web-page around your current screen resolution or otherwise a high one. The most common screen-resolution is currently 1024x768.
Adding white spaces around text and images can help separate them from other elements and aid comprehension.
Use colors appropriate for the site's content and target audience. For example bright colors for a children's web-site. Use neutral colors where the intended audience is broad.
Animation should be used sparingly and only in instances where it will add to the site.
Text Design
Use vocabulary and writing styles suitable for the target audience.
Specify common fonts to be used for text on a web-page. A user may not have a specific font installed on their computer, thus the browser-default will be used instead.
Sans-Serif fonts are more easily read on a computer screen; some fonts, such as Verdana, were specifically designed for to be highly legible on computer screens and thus it's usage in a page should be strongly considered.
Actual font-sizes may vary between font-styles, browsers, and even platforms.
Graphic Design
Utilize the 216 colors defined on the Web Color Palette for consistency.
For text within images, ensure the text is Anti-aliased.
Keep image dimensions and filesize as small as possible.
Ensure site is still usable in the event images are unusable.
Accessibility Considerations
A high contrast between text, other objects, and the background should be used to allow people with color-blindness to easily read the text on the site.
Utilize alternate text for images, they will often be utilized in automated screen readers for blind visitors.
Design a website to look the same or otherwise work well across multiple web-browsers. Test a web-site with these browsers to ensure functionality.
Eric Beikman