Introduction to Web Design Principles

Tom Kelliher, CS 102

Sept. 21, 1998

Announcements: Bring FrontPage book and CD to class. Quiz on Friday.

From last time:

1. Introduction to FrontPage. Will finish today.

Outline:

1. Web page design principles: Who's the author, Basic design rules, Do's, Don'ts, Image Properties.

Assignment:

Reading:

1. Beyond the Bones of HTML
   (http://www.avalon.net/~librarian/bones/)

2. A Web Design Guide: WebHome Improvement
   (http://www.htmltips.com/)

3. Top Ten Mistakes in Web Design
   (http://www.useit.com/alertbox/9605.html)

4. How to Make an Annoying Web Page
   (http://www.users.nac.net/falken/annoying/)

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. Viewer controls size of browser window.

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

5. 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.

Do's

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 color and motion wisely.

7. Use images sparingly

8. Use tables to gain structure within a page.

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

10. 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. Ramble.

5. 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.