Laura Lemay’s Web Workshop

Adapted from: “Graphics and Web Page Design”

Lemay L., Duff J., Mohler L. (1996) Graphics and Web Page Design. Laura Lemay’s Web Workshop.

To avoid the most common mistakes when designing on web  Laura Lemay’s Web Workshop offers a few simple rules for enhancing readability of the content on the web page and using icons for navigation:

Readability is not only a function of writing style but also the way the text is presented. For increased readability, use sans serif fonts such as Helvetica or Arial for title text. Titles are generally large (from 24 point to 48 point) and are much more legible and pleasing to the eye when sans serif fonts are used. At these sizes, the tails and feet get in the way visually and create a busy look. For body text, use serif fonts like Times or Century Schoolbook. Paragraphs, long quotes, and captions are much easier to read in serif fonts because of sizes that usually range from 6 point to 14 point. At these sizes, the tails and feet aid in determining a word’s characters, which makes the information much more readable.

It is unpleasant to read paragraphs that are not formatted consistently.

Embedded links

—links that appear within textual passages—are a good addition in a page, but they are frequently overused. Strive to use color to enhance the text on your pages rather than dominate. If you have more than three links in a paragraph, the audience’s attention is usually attuned to the hotlinks rather than the content you’re providing. In cases such as this, consider using lists of hotlinks rather than a paragraph with embedded links. Remember that your content is what the users want.

Colored text

is an effective means of creating both attention and association. As you are considering colored links or text, think about its impact on readability. Does the color adequately contrast with the background or other elements? Or does it blend in making the text difficult to read? Does the particular color draw the proper amount of attention to the area? Because contrast between text and the background is so critical, design your pages from the background forward.

Icons

are a perfect example of association. Viewing an effective icon, you are able to know the results of the proposed action without words. Consider the following when designing icons to represent actions:

  • The greater the relationship of the graphic to the function, the clearer the purpose and the better the icon.
  • The more abstract the icon, the more difficult it is to interpret its meaning.
  • Use internationally accepted iconic representations for accepting, rejecting, moving, and so on whenever possible.
  • Consider the psychological properties of warm and cool colors and how they affect the icon.
  • Globally consider the use of specific icons for functions and don’t exclude someone due to cultural differences.
  • Consider the cultural implications of color for text elements. Be careful concerning the assumptions you make about the relationship between color and association.

 

Icons on the Web are generally used for one of three purposes: navigation, instruction, or eye flow. Navigational icons allow you to jump from one page to the next or evoke a map of the site; it’s also something that allows you to navigate through the site. Those used for instruction may clue the user to a special note, warning, or comment on the page Icons used for eye flow serve to increase visual appeal of the page and not much else. They help keep the user’s eye focused on specific information or content areas on the page (Lemay et al., pp. 147-152).

Every graphic element you place on a page must have a function. Either it adds to communication efficiency or … remove it (Lemay et al., p. 83).

A background graphic should allow text placed on top to be easily read.

Make a way back to the home page one step away: provide direct link between any page and the home page (use Home title embedded or Home icon embedded): the navigation ability increases.

Considering colored texts or links, think about its impact on readability.

By including a thumbnail inline and a link to its high quality sibling, you give the reader more control. (Lemay et al., pp. 171-173).

 

See more resources: