Structure and Design Considerations for Web Sites

Initial Design Thoughts:

• In order to create a 3rd generation web site try to include the following:
  • Superior navigation that allows the user to quickly find information throughout the site with a minimum number of steps
  • Interesting, meaningful graphics that load quickly
  • Dynamic content that pulls the user back to the web site
  • Well defined areas that provide for interaction with the user through mail, discussion groups, registration forms and subscription areas
• Examine at the StratSoy web site: http://www.stratsoy.uiuc.edu/
  This is a good 3rd generation web site. It contains all of the above elements.

Navigation:

• Create a flow chart of the site before you begin
• Break things into smaller categories where it logically makes sense. Try to give users between 6-10 choices of things to select from. Having more than 10 choices may overwhelm users.
• Determine cross links within the site or to external links
• Give users a set of tools to take with them throughout the site. Include major categories as well as functional tools such as Search, Site Maps and E-mail.
• Determine the relevance of tools by look and size. Main categories should appear to be the most important. This can be accomplished though using a larger font, different colors, etc.
• Ask how much content will change. Do you need a "What's New" category that immediately informs the user of new items in your site?

Create a Design Layout:

• Use a grid structure to break the page in smaller sections
• What size monitor will the page be typically be viewed on?
• The average monitor is 13" which has a viewable area of 640 wide x 480 pixels high.
• Because of the browser windows (buttons and scroll bar) the real viewable area is about 600 x 400
• Ask if the page will need to be printed on a regular basis. If entire documents (i.e. annual reports) are put up on a web site, it may be helpful to provide users with a PDF document that they can then download and print.
• If the page design calls for a printable page, having a top or right hand menu bar may work better than a traditional left hand menu.

Create the Images:

• Will a background be used?
  
  Pros
  • A background color of white or a very light color creates high contrast when used with standard black text and makes the page much easier to read than the default gray background on many pages.
  • A background image can help to define space on a page. This page has a yellow band that creates a margin for the main body text. Because of the smaller margin for text it makes the page easier to read because the user's eye doesn't have as much trouble finding the start of each line as it travels back across the page.
  • Can layer images on top of the background for different effects
  • The background will tile (repeat) for the length and width of the page. The yellow band on this page will run the length of the page regardless of the amount of text on it.
  • If kept simple, backgrounds can be very small in size
  Cons
  • Backgrounds often contrast too much with type making readability difficult
  • Large images can use a great deal of the computer's memory even if they have a small file size and take precious time loading
  • See http://mars.cropsoil.uga.edu/csi/ for a background that makes for difficult reading.
  
• Determine color choices
  • Most browsers use a common Net palette that contains 216 colors. Selecting colors from this palette for images will produce graphics that don't dither (small dot patterns). Graphics produced with this palette will look better and load more quickly because they can contain fewer colors.
  • Gradients generally don't work well on web pages because there are subtle color changes. Most of the intermediate colors in a gradient aren't available in the Net palette.
• An entry page typically provides users with main navigation elements, provides contact information and provides some information about the site.
• Design a secondary page
  • Maintain a design thread throughout the site. This makes users aware of what site they are in at all times. Your company or group's logo, identity or name should be present on all pages. It may need to be a simplified version to work well. Use a consistent background if possible.
  • Maintain the navigation system and many of the tools from the first level
  • Create changes in graphics or colors to help alert the user that they are in a new section
  • As in newspapers, use different size headings or colors to denote the importance of elements on the page
  • Try to provide users with a submenu on each page that contains links to the topics for that section.
  • Provide some kind of contact information on each page. This is typically provided at the bottom of each page. On longer pages it is helpful to provide main navigation links with either text links or an image map.
• Creating Artwork
  • Icons - Can be small in size and easily convey complex information. Do user testing to ensure that the icons are understood. You may need to provide a simple text description along with the icon.
  • Text - If you desire a certain look and feel for text or it requires an exact placement, then you may need to make the text a graphic. This allows you to control the shape and size, but if done unnecessarily it will create extra download time.
  • Artwork - Try to define a style that is consistent throughout the site and keep the size to a minimum wherever possible. Minimizing the number of colors in Gif files will result in smaller file sizes. Too few colors though can muddy images, drop out important colors and make type difficult to read.
  • Photos - The use of photos can make pages more visually interesting. Again, be aware of file sizes and the download times.
  • Always save artwork with full colors if possible for archiving purposes. Often, portions of web sites are printed for promotional purposes - web graphics that contain few colors usually do not reproduce well.
• Image files
  • Gif vs. Jpeg. The main rule to follow is that anything that contains continuous tones should be a Jpeg. Most photographs fall into this category regardless of whether they are color or grayscale images. Gifs are adequate for images that contain mainly flat colors. The yellow band and the menu bar on this page are Gifs. When in doubt create both a Gif and Jpeg file for an image and compare file sizes and image quality. Don't sacrifice image quality just to end up with a smaller file size.
  • Size images to match the size they will be used at on the page. Scaling images through HTML forces the user to download larger graphics than is necessary. Using size tags in HTML speeds up the loading of pages because the browser can layout the entire page without having to download each graphic to determine its size.
  • Reduce Gifs to the Net palette and minimize the number of colors when possible
  • Always be aware of file size of images. A good rule of thumb is that any page should be less than 50K in size. This includes the text and graphics.
  • Use photographs when it is appropriate
    • Photographs can be scanned. Try to scan an original photo or slide rather than scanning from a printed piece. The scanner will pick up the halftone dots used in printing and are difficult to remove even with sophisticated software.
    • Archive new photos on Photo CD. This will provide you with images at multiple resolutions - low resolution for the web and higher resolutions for print. This is often provided at store like WalMart and is relatively inexpensive.
    • Digital Cameras are another good source of photographs and provide for immediate publication to the web. Be aware that the image quality is not as good as traditional photographs.

  ---