Web Page Design Principles

Tom Kelliher, CS 102

Feb. 23, 1998

Announcements: Quiz on Friday. Will cover password selection, privacy discussions of 2/18 and Web design principles (today's material, most of which is taken from Chapter 3 of FrontPage text.).

From last time:

1. Published web pages.

Outline:

1. Web design principles.

2. Properties of images/GUI systems.

Assignment:

Web Design Resources

The following are links to sites where you can get background images, buttons, bullets, horizontal rules, etc.

1. http://www.microsoft.com/gallery/default.asp --- Microsoft's SiteBuilder
   Gallery.

2. http://home.netscape.com/assist/net_sites/starter/samples/index.html
   --- Netscape Navigator Gold Tool Chest.

3. http://www.coolnerds.com/webart.htm --- Coolnerds Web Art.

4. http://www.meat.com/textures/ --- Texture Land.

5. http://www.clipart.co.uk/ --- Clip Art Warehouse.

Web Page Design Principles

Who's the Author?

1. The Web is a nonlinear, hypermedia, multimedia experience.

2. The viewer is ultimately the author.

3. Default colors for background, text, links, font size.

4. Resolution, color depth?

5. Viewer controls size of browser window.

6. Multitude of browsers; some are text-only.

7. Little control over element placement.

Basic Design Rules

1. Storyboard --- sketch out the design of your site and how everything fits together.

2. Make the structure intuitive.

3. Design for widest possible audience and manage bandwidth:
   1. Keep in mind the lowest common denominator: 256 colors, resolution.

   2. Each page should download quickly for a 28.8 KB modem. Multimedia eats bandwidth. Text doesn't.

4. Keep pages short --- better to have lots of linked small pages then one huge page.

5. Provide navigation aids: back, home buttons or a table of contents in a frame.

Dos

1. Use descriptive titles.

2. Provide navigation aids.

3. Use image captions ( Alternate Representation in Image Properties).

4. Check spelling.

5. Apply a style consistently.

6. Use tables to gain structure within a page.

7. Identify yourself, give contact information, and date your pages.

8. Use color, motion appropriately.

9. Apply the site evaluation rules to your own site.

Don'ts

1. Overwhelm the viewer with too much.

2. Use under-construction signs.

3. Use images that don't fit into .

4. Leave contact information.

5. Ramble.

6. Use broken links.

Image Properties

1. Pixels.

2. Common resolutions:
   1. 640 x 480.

   2. 800 x 600.

   3. 1024 x 768.

3. Image size.

4. How much is visible to a viewer, without scrolling?

5. Formats:
   1. GIF --- interlaced, non-interlaced. Limited to color depth of 256. Compression controversy.

   2. JPEG --- Joint Photographs Expert Group. Higher color depths.

6. Color depth. Common values:
   1. 2 --- black and white.

   2. 16 --- simple artwork.

   3. 256 --- more complex artwork, photographs.

   4. 32K and higher --- photographs and JPEG.

7. Size of the image file. Time to load.

8. In-line and external images.

9. Thumbnail images.

10. Copyrights.