Research : Understanding Screen Design

"Screen Design" refers to making each Web page look readable, thereby inviting readers to scan it. For effective screen design, you should work with three elements and make sure Web pages have two basic qualities.

Work with Text, Space, and Graphics

You can make a Web page look readable by manipulating three elements: text, space, and graphics.

Element 1: Text
Make sure you choose a font (a particular typeface) that can be read on screen. You can select fonts in Composer by choosing "Fonts" from the "Format" option at the top of the screen; however, you may not have control over what your text looks like on someone else's computer.

It's probably easiest to let readers choose their own preferences for the look of your page. If you do want to control the font type, consider using a font designed specifically for use on the Web and learning more about embedding fonts. Microsoft offers a number of fonts for the Web.

As much as possible you at least want to make sure your text is the right size.

Element 2: Space
Use space to accomplish at least three goals:

• Creating margins: A screen full of text looks too intimidating, so be sure to include adequate margins. (To add margins to paragraphs, click on a paragraph, then choose "Increase Indent" from the "Format" option on the menu at the top of the Composer screen.)
• Reinforcing organization: Consider using space to reinforce the organization of a text. Notice, for example, that this page uses one margin for major headings and another for sub-headings and the body paragraphs.

You should also use space to "chunk" text. Related units of information should appear next to one another, with sufficient white space to reveal those units. (Paragraphs are a basic way of "chunking" a unit of text. Notice, for instance, how each bulleted item is separated by a space in this page.)

• Increasing navigation: Consider using a multi-column layout, devoting one column to text and perhaps another to links. See Lynch & Horton's Web Style Guide (1997) for an example of two- and three-column formats. (You can create multiple-column layouts by creating tables. Choose "Insert" then "Table" and then "Table" again from the menu at the top of the Composer screen.)

Element 3: Graphics
You need not be a graphic designer to pay attention to graphical elements. Even if you're creating Web pages with no pictures, realize that you can still work with

• Color: You can use color to reinforce organization and highlight information; e.g., you can use a different colored text for headings. (Note: Reserve the colors of linked text for links only. Otherwise, people will assume that the colored text is a link.)
• Line: You can use horizontal lines to separate blocks of information. However, do not overuse lines because it is easy to to clutter a page.