Comparing pages & screens

Recognizing elements of effective screen design

Writing prose to suit the Web

Organizing multiple pages

Writing faster

Additional Resources

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

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.

Keeping in mind the differences between a printed page and a computer screen, remember that it's difficult for readers to get their bearings when reading a series of Web pages.  The usual cues that readers use to read a book or journal (such as page numbers and relative location in a series of pages bound together) aren't always so clear online.  Consequently,

• Provide adequate navigational & orientational cues.  Make sure readers know where they are by offering them content links (such as those offered in the left-hand column by Lynch & Horton).  Each page should offer a reader several options (e.g., moving on to a new page, returning to a prior page, etc.) 
• Ensure independence.  Each page should be able to stand alone, which means that the author's name, affiliation, publication dates, and other necessary information should appear on each page.  (Remember, readers cannot comprehend a series of Web pages as a unit the way they can comprehend a set of printed pages bound into a book.)

Next Page ->