Applies to
Microsoft Office FrontPage® 2003

This article was excerpted from Microsoft® Office FrontPage® 2003 Inside Out by Jim Buyens. Visit Microsoft Learning to buy this book. View other articles written by Jim Buyens.

This is the second in a sequence of three articles excerpted from Chapter 4, "Planning and Organizing FrontPage-Based Web Sites."

See links to all articles in this sequence

Part 1: Overview of planning and organizing FrontPage-based Web sites

Part 2: Defining your site's style

Part 3: Planning page layout

---

In this article

Principles of design

Elements of design

     Contrast vs. clash

     Symmetry vs. monotony

Choosing a visual concept

Principles of design

Every site should have a consistency suited to its purpose. Pages should be unified by a common theme, a common organization, and a common style. The words, pictures, colors, and layout should lead the visitor to the messages — both overt and subtle — that justify the site's existence.

Artists and computer specialists usually embody completely different mind-sets. Nevertheless, both types of skills are needed to produce an effective Web site. To reduce the gap between art and science — at least in a small way — this section introduces a few topics regarding pleasing and effective visual design.

Elements of design

Artistic design isn’t an exact science, so many technically inclined people conclude that it is beyond them — or at least that it gives them a headache. If you lack the talent to become a professional artist, however, you can use certain principles of good design to enhance your work and communicate your message more effectively. Contrast and symmetry are two such principles, and they appear in a variety of contexts.

Contrast vs. clash

The polar bear at the North Pole and the black cat in the coal bin figure in two old jokes involving contrast. In both cases, lack of contrast makes the key element indistinguishable from its surroundings. Graphic contrast serves two important purposes in Web pages or, for that matter, any other document:

• Contrast enhances legibility   For example, the black type and white background of this page make it easier to read than if one color were gray.
• Contrast visually communicates distinctions among various page elements   In this article, for example, contrasting typography makes it easy to distinguish headings from body type.

The contrast knob on your monitor or TV set controls the difference in brightness between the lightest and darkest parts of a picture. Contrast, however, occurs in many other dimensions as well: contrast between adjacent colors, contrast between differently sized or shaped fonts, contrast between positions on a page, and many more. The total contrast between two page elements thus involves the number of contrasting attributes as well as their individual extents.

The need for contrast is generally intuitive; document creators ordinarily realize that items like titles, headings, body text, and captions are intrinsically different and that a unique appearance should identify each such element. They run into greater problems deciding what kind of contrast to provide and how much. Too much or too little contrast can be illegible, confusing, or just irritating to the eye.

To understand the need for contrast, look at the Web page shown in the following illustration. Other than the contrast of black text on a white background and normal paragraph formatting, this page has no contrasting elements. There is nothing to guide the eye to various kinds of content, and certainly nothing interesting to look at.

The Web page shown in the following illustration has plenty of contrast — but please, please don't try this at home, or in the office, or anywhere else. The contrast in the background image overpowers the text, despite the use of a boldface font and a white-on-dark color scheme. Notice as well how white and near-white areas in the background blend into the text, making it hard to read. Use of strong backgrounds is the number one cause of ugly and illegible Web pages. (Use of blue text on black is probably number two.)

The following illustration shows another Web page loaded with contrast.

The rampant use of fonts in this page produces an appearance experts call a "ransom note." Creating a page like this might be an interesting exercise for a Web designer who just discovered the Fonts dialog box, but the use of so many different fonts, without any clear rationale, is very distracting. This page shows some effort at page design — not everything is flush left — but the alignment of page elements is essentially random.

None of the previous examples used appearance to enhance content. Even worse, the appearance of the second and third examples actually detracted from content. The following illustration, in contrast (sorry), shows a Web page where contrast truly enhances the content and makes it easier to understand.

Note the following features:

• The fonts are interesting yet simple. Because computer monitors are low in resolution, complex fonts generally don't appear clearly.

   Note   In print media, serif fonts are usually easier to read. The serifs, which are tiny horizontal lines at the end of each character stroke, create a horizontal "track" for the eye to follow. Because computer monitors are much less precise than a laser printer or typesetting machine, they generally do a poor job of displaying serifs. That is why most designers now believe that sans serif fonts are more legible on the Web. Just remember to provide enough line spacing whenever you use a sans serif font.

• All major titles use the same font. Smaller font sizes indicate lower-level titles and larger font sizes indicate more significant ones.
• Subtitles (some people call them "kickers") are universally indicated by italics.
• Specific formatting identifies the "place" line, stage directions, and speeches. All speeches look alike, for example, and nothing else looks like a speech.
• Notice the alignment of elements along invisible gridlines. These alignments occur at the left margin, at the left edge of the speaker names, at the left edge of the speech text, at the right edge of the speech text, and at the right margin.
• Speeches occupy less than the full page width not only to give them a distinct appearance, but also to make them easier to read. If text is too wide, the eye has trouble jumping from the end of one line to the beginning of the next. This is especially true when line spacing is tight.

Real life offers — as does Web design — a countless variety of potential contrasts. Contrasts of color, of size, of alignment, and of motion immediately come to mind. If something doesn't look right, consider increasing or reducing the number of contrasts as well as varying their intensities. And remember, the visual equivalent of screaming in someone's face isn't necessarily the best way to communicate your message. When contrast is required, don't be a wimp, don't be a screamer, and don't mix signals.

 Top of Page

Symmetry vs. monotony

In any page layout, similar elements should have a similar appearance, and elements that differ should have a different appearance. Neither contrast nor uniformity should be random. This is the principle of symmetry.

All section headings in this article are set in the same font, color, size, and position on the page. When you encounter some text that visually resembles the other section headings, you assume that that text is a section heading as well. You also assume that any text with a different appearance is not a section heading.

Note that section headings are similar to each other, but not to body text. Because section headings and body text are quite different elements, there is a lot of contrast between them. There is essentially no contrast (other than distance) between one section heading and another, because all section headings are alike.

The same reasoning applies to other elements like illustrations, tables, and side notes such as warnings and tips. Each element has a unique style that helps identify it and generally makes the content appear cohesive. It would be confusing if notes in this part of the article and the next appeared differently.

The principle of symmetry (or parallelism) applies equally to Web pages. Make all your top-level headings look the same, for example, not just within each page but also within an entire Web site or major section. Use the same color scheme, the same typography, the same alignment (left aligned, centered, right aligned, or justified), the same menu appearance, the same title conventions, and so forth. Avoid monotony by adopting (and testing on your eyes and the eyes of others) an attractive set of designs up front, not by making each page look completely different.

The same is true for pictures. If your site has a logo, use exactly the same logo file in every page that requires one. This not only ensures uniformity but also minimizes download time: The browser downloads the same file (the same URL, actually) only once, no matter how many different pages use it. However, don't use the same picture to communicate different concepts, even if they are in different places. Do try to use an assortment of pictures all done in the same style, however.

An overall site design should be a guide, never a straitjacket. Certainly you will have several different types of pages, and each page type should have unique elements that visually alert the Web visitor. The number of page types and their corresponding appearances are strictly your decision, but each page type should have the following elements:

• Symmetry that unifies it with all other pages in the same site
• Distinctive contrasts that visually identify each unique type of page or content
• Symmetry among similar types of page or content

In short, similar types of content call for fewer contrasting elements having a narrower range of contrast. Dissimilar types call for a greater variety and degree of contrast.

 Top of Page

Choosing a visual concept

Visual appearance plays a critical role in the way visitors perceive your site and receive its message. No matter how interesting, well-organized, and useful your site's content might be, a drab presentation will provide a poor viewing experience for your Web visitors and indicate a lack of interest on your part. Because most Web sites devote the best visual presentation to the most important content, many Web visitors now associate drab presentation with boring, outdated information.

Visual presentation is no substitute for well-organized and useful content; both are necessary to produce an effective site. Except for a few highly specialized sites, content doesn't consist of presentation; instead, presentation is a means to convey content. HTML is such a weak page description language that the challenge of achieving visual appeal frequently overshadows that of developing content. Don't let this happen to you.

Your site's graphic design should complement its message and appeal to its audience. An abstract, garish design patterned after a CD cover might be appropriate for a rock group, but certainly not for a bank or a brokerage house. A site's overall graphic design conveys messages just as surely as its text and pictures, and you should strive to have those messages reinforce each other rather than clash.

If it happens that you are not an experienced graphic design professional, don't despair. In many cases, the site's organization will already have logos, colors, and style guidelines designed by professionals for use in other media. If so, you can adapt these for use on the Web. This might even be a requirement of the Legal department.

In the absence of other guidelines, choose a theme related to some aspect of the site's content. For a school, consider the school colors, emblem, and mascot. For an athletic league, consider the colors and textures of the playing field or equipment. For a restaurant, consider the scenes and colors related to the cuisine or locale, the style of the restaurant's menu, fixtures and objects from the restaurant's decor, or ingredients and cooking utensils.

Beyond these relatively obvious approaches, consider a theme based not on products themselves, but rather on settings where the product is used, cities or sites where it is manufactured or sold, or aspects of the organization's history or technology. Your site's theme should suggest colors, pictures, and icons you can use throughout the site or its principal sections. If a particular theme doesn't suggest a set of workable colors and pictures, move on to another. You will probably get an "aha!" feeling when you have found it.

The default colors on most browsers are black on gray or black on white. This is every bit as interesting as black-and-white slides projected on a basement wall. Black, white, and gray aren’t necessarily colors to avoid, but they do deserve augmentation with adjacent frames, pictures, and borders. When choosing text and background colors, choose dark text on a light background. Bright text on a dark background is harder to read, especially for small type sizes. It is usually a good idea to maintain color contrast as well as brightness contrast between text and background.

 Top of Page

Next article in this sequence

Part 3: Planning page layout

About the author   Jim Buyens is a FrontPage, Web programming, and networking expert who has written several books, including Microsoft® FrontPage® Version 2002 Inside Out, Web Database Development Step by Step .NET Edition, Faster Smarter Beginning Programming, and Microsoft® Windows® SharePoint® Services Inside Out, all from Microsoft Press. Jim is a Microsoft Most Valuable Professional (MVP) who contributes extensively to the Microsoft FrontPage online communities. He currently develops Web-based business systems for the telecommunications industry.