Nagstyle: Web Design Principles

Primary audience

Purpose for the site

Location of the site

Types of content

Information provided on the "home" page

a "who we are" or "who I am" message
a mission or purpose statement
contact information *
update notice
copyright notice
disclaimer (for ex: Though we try to keep the information up-to-date, some information may not be the most current. OR "This list does not constitute an endorsement of any one or more of the products .")

* If the site is for a business or organization, it is important to include an address, phone number and email contact.

If the site is a personal site, disclosing an address or phone number is not advised because of privacy issues.

Content ( the key to a good site):

should match the purpose
should be well organized
should be spellchecked
should observe correct English (or the appropriate language). Some sites have information in more than one language, depending upon the possible audiences.
should be current information
should be appropriate for the audience

Level of Web technology to best suit the purpose:

Minimal style - mostly text, little or no graphics (quick loading, does not require lots of memory or a high end graphic card)

Middle of the road style - some graphics to add an element of design or style, which compliments the information, but does not detract from the main purpose (still easy to load, may be more appealing than minimalism

High tech style - Lots of graphics, animation, java applets, "art" text, video clips, etc. (could be suitable for an audience of tekkies with high-end equipment, but could lose the average audience waiting for the images to load or trying to navigate links not clearly identified as such).

Style to best suit the purpose

Page design - consistency, clarity, user friendliness:

Include a "back to home" link
Use a consistent template on each page
Create a uniform color scheme (with limited color palate)
Be sure there is sufficient contrast between background and text
Avoid a too large font that SHOUTS*
Avoid a too small font that is hard to read*
Place important information near the top
Avoid long lists of links if possible.
Categorize lists in smaller chunks and provide internal tags
Provide a table of contents (with links to find information in a long list)
Organize your material to too much scrolling to find content
The user can override your fonts by setting her/his browser font size and style.

Resolution:

Standard for screen resolution is 800 (width) by 600 (height). If you design for a higher resolution the user may have to scroll back and forth or up and down to view your full content.

Graphics:

.jpg image format (compressed file format for high quality images - photographs). While working on photographs, save in .tiff format, or program default, until the final quality and size is achieved, then save in .jpg. This saves the image quality.
.gif image format (for graphics files, buttons, clip art not photographic quality). The quality does not degrade when working with .gif files.
animated .gif files (Use sparingly. Is animation appropriate to the theme or a distraction from your main purpose?
flash animation (Provide a "turn off" option for flash). Too many "bells and whistles" can be overpowering. Does the flash compliment the site? Or is it there to say "See what I can do?"

[Include HEIGHT and WIDTH tags to reduce loading time for graphics. Don't resize images by just changing the size tags.This increases loading time.]

Background and text colors:

Patterned backgrounds produce "noise" that interferes with reading the text.
Provide sufficient contrast between background and text
Limit your font colors - "Hot" colors (like bright pink and orange) are, in general less professional for business sites. (If the business is "hot" graphics, however, that caution would probably not apply.) Primary colors (red, blue, green) might be best suited for sites that appeal to children. Black backgrounds can give a "hard edge" to a site or make it seem "gloomy" or counterculture.

Use of frames (out of favor):

Nagstyle