Introduction to HTML Design and Style

This assignment was part of a technical writing class taught at Georgia Tech during 1996-96. I no longer update it but thought the information might be useful to some.

I. Design for Information Retrieval

1. Know your audience: use appropriate language, level of explanation (examples, etc.) for their education and technical literacy. Determine your goal: what do you want them to do/be able to do once they have read your document?

2. Determine what information you need to present to reach your goal. Decide what needs to come first (depends on your audience and your goal).

II. Construct a Clear and Overt Structure

1. Divide information into manageable chunks. Write a storyboard outlining the structure of your document and the relationship between pieces.

2. Design an accurate and interesting homepage. Do not overwhelm your user but give them enough choices that they see the scope of your document. Provide at least 4-5 links. If you use buttons for links, keep the number to 7-8. With a textual list, you can provide up to 10-12 links without overwhelming the user.
   • Don't simply place lists on left margin. Marimba's home page provides a good example of how to provide many options without overloading the user.

   • Scrolling down through many screens of information is disorienting, so keep individual pages to 3-5 screens.

   • Link to the whole text of a document so the user can print or save.

   • Provide clear and consistent navigational tools. You can use buttons or text. Buttons should be uniform in appearance. Buttons should fit in with overall design of your document and be noticeable but not obtrusive.

   • Provide metatextual information -- author, creation date, last modified, file name.

III. Balancing Images and Texts: Visual sensation versus Information

1. Establish a uniform design grid that delineates the placement and style for major screen titles, subtitles, and navigation links and buttons.

2. Maintain at least 50% of page as white space.

3. Arrange text creatively:
   • Use <TABLE> to control layout of pages.

   • Change the type of lists (I,i, A, a)

   • Used sparingly, horizontal rules help break up the page and provide visual stimulus.

   • If you're only designing for Netscape, you can resize your fonts, both absolutely (<FONT SIZE = 1>) and relationally (<FONT SIZE = +1>).

   • Integrate your links smoothly into your text: Avoid "Click here's" and overt references to pages. Don't say:

     Information about Blah Blah Blah is available by clicking _here_.

     But:

     Information on _Blah Blah_ is available.

With this information in mind, let's take a look at some pages.

Intro to HTML Design, Part II