• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. Planning and Organizing Front... > Defining Your Site’s Style

Defining Your Site’s Style

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’s 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 in this book make it easier to read than if one color were gray.

  • Contrast visually communicates distinctions among various page elements. In this book, 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 Figure 4-1. Other than the contrast of black text on a white background and normal paragraph formatting, this page has no contrasting elements. There’s nothing to guide the eye to various kinds of content, and certainly nothing interesting to look at.

Figure 4-1. This Web page provides no contrast among the various kinds of content it contains. Not only is it boring to look at, but it also communicates poorly.

The Web page shown in Figure 4-2 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.)

Figure 4-2. The high-contrast background in this Web page overwhelms and obscures the content. Today’s expert Web designers use very soft backgrounds, if any.

Figure 4-3 shows another Web page loaded with contrast.

Figure 4-3. The many fonts and varied page placements in this Web page provide lots of contrast. Unfortunately, contrast this random is a distraction rather than a way to communicate.

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. Figure 4-4, in contrast (sorry), shows a Web page where contrast truly enhances the content and makes it easier to understand.

Figure 4-4. Contrasting styles in this Web page clearly distinguish various kinds of content. Consistencies in the style and alignment of similar items provide symmetry.

Note the following features:

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


    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’s 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.

For more information about choosing colors for Web pages, refer to Appendix E, “Design Tips for Choosing Colors,” and “Achieving Accurate Rendition—Safe Colors,” on page 507.

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 chapter headings in this book are set in the same font, color, size, and position on the page. When you encounter some text that visually resembles the other chapter headings, you assume that that text is a chapter heading as well. You also assume that any text with a different appearance is not a chapter heading.

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

The same reasoning applies to this book’s figures, tables, and side notes such as warnings and tips. Each element has a unique style that helps identify it and generally makes the book appear cohesive. It would be confusing if notes in this chapter 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’re 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’ll 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.

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’re 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’s 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’ll probably get an “aha!” feeling when you’ve 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’s usually a good idea to maintain color contrast as well as brightness contrast between text and background.

For information about choosing colors that display correctly on Web pages, refer to “Achieving Accurate Rendition—Safe Colors,” on page 507.

Planning Your Pages

Given a mission, an audience, a content plan, management go-ahead, a visual concept, and knowledge of what HTML can and cannot do, you’re finally ready to design pages in detail. To at least some extent, this will probably involve storyboards and sketches.

The classic storyboard consists of index cards pinned to a wall. You write up an index card for each Web page, annotate it to indicate planned content, and then arrange all the cards in some kind of hierarchy or sequence. Web visitors will traverse the site along these sequences and hierarchies. Team members and your project sponsor will review the chart, suggest revisions, and someday pronounce it worthy of prime time.

Actual storyboards of this type are rare, but the concept is sound. Your storyboard might be notes on a yellow pad, an outline in a word processor, a preliminary set of Web pages containing only headings and hyperlinks, or even a Navigation view in FrontPage. No matter: The key result is a well-organized set of pages, not the method used to achieve it.


FrontPage Navigation view provides an excellent means to record and modify your storyboard electronically. Navigation view has the added bonus of building and hyperlinking your pages for you.

For more information about Navigation view, refer to “Creating a Web Site in Navigation View,” on page 994, or Chapter 13, “Creating Web Sites with Navigation View.”

It’s easy to go wild with menu structure. Visitors are unlikely to find pages more than two or three clicks away from the main page, however, so don’t nest menus too deeply. Avoid long pages of hypertext links by using drop-down lists, option buttons, check boxes, and other HTML form elements. Together, a drop-down list of 10 product names and another with 4 kinds of information can efficiently support 40 menu choices.

You should also start sketching or drafting pages at this point. Identify each type of page you plan to use, and then make up a draft or template for each type. Identify changeable components that will exist on multiple pages—menu bars, signature blocks, contact names, and the like. Then plan site parameters and include blocks to support them. Accumulate pictures from stock collections, too. These are logos, icons, buttons, bars, and theme pictures that, if standardized, will help the site achieve a unified appearance.

Lengthy text, either as content or as HTML commands, is seldom the cause of excessive download times. Pictures, Java applets, and Microsoft ActiveX controls are far more often the culprits. As you plan your pages and accumulate your pictures, keep a rough total of download bytes for each type of page. There are no hard-and-fast rules on the size of Web pages, and this is less a consideration on high-bandwidth intranets than on public Internet sites that Web visitors access by dial-up. Most designers consider pages with more than 25,000 to 30,000 download bytes too large for dial-up Web visitors. This is equivalent to 15 to 20 pages of double-spaced plain text, or one uncompressed picture that’s 170 pixels on a side.

A final bit of planning advice: You can have too much of a good thing. All Web sites are always under construction, so trying in advance to nail down every nit for every page is probably a futile exercise. If you try to plan too much detail, the site’s rate of change will exceed the rate of planning. Don’t let “paralysis by analysis” happen to you.

Achieving Effective Page Layout

The normal progression of topics on a Web page should be the same as that in your morning paper. For Western languages, this is top to bottom and left to right. Every Web page should have both a meaningful title and a meaningful heading. As Figure 4-5 illustrates, the title appears in the browser’s title bar, and the heading appears somewhere near the top of the page. The title serves to identify the page externally to processes such as FrontPage and to search engines such as Yahoo!, Lycos, AltaVista, and MSN Search. The heading immediately informs the Web visitor what content appears on the page. A visitor who has chosen a wrong link can immediately jump back to the previous page. Otherwise, the heading confirms that the visitor has arrived at the correct page. If the page is long, bookmark links should provide pathways to each major subsection, to avoid extensive scrolling (at least on the home page).

Figure 4-5. The title of this page is “Microsoft Office—FrontPage Home,” and its heading is “Microsoft FrontPage.”

Experienced page designers often find HTML’s weak page-layout features extremely frustrating. This reflects a fundamental conflict between the HTML goal of device independence and the artistic desire for precise control. This conflict isn’t likely to subside any time soon, although FrontPage does support a number of recent HTML page-layout facilities:

  • Alignment tags The normal flow of HTML text is down the left margin, wrapping lines automatically when they reach the right margin, a hard-coded line break, or an explicit or implied paragraph ending. Pictures, Java applets, and ActiveX controls retain their relative positions within the HTML text.

    Implied paragraph endings occur in several situations:

    • Before and after tables

    • At transitions in paragraph style

    • Before and after numbered and bulleted lists

    Recent versions of HTML support attributes to left-align or right-align pictures and other objects, flowing text around them. A centering attribute centers the same kinds of objects, but no text flows to the right or left of the centered picture. Additional attributes align non-text objects vertically with the surrounding text flow. FrontPage supports all of these attributes.

  • HTML tables Originally designed to display tabular data, HTML tables have become one of the premier means to place items spatially on a page. Any time you want to draw an imaginary grid on a page and align items within it, an HTML table should be your choice.

  • Cascading style sheet (CSS) positioning This technology finally gives Web designers pixel-precise positioning and layering control over their work. FrontPage provides access to CSS positioning though the Position choice on its Format menu.

  • Frames This feature provides a way to divide a Web page into tiled rectangles and to independently control the content of each rectangle. One Web page defines a frames page—an object that controls the number, sizes, and placement of the frames—while additional Web pages provide the content for each frame. Standard frames have visible borders between them and scroll bars for moving up, down, left, and right within each frame. Borderless frames have no visible borders and are simply page-layout areas that corral your text where you want it.

For more information about using alignment attributes to control page placement, refer to “Aligning Text,” on page 216.

For more information about using FrontPage to create HTML tables, refer to “Creating and Editing Tables,” on page 515.

For more information about CSS positioning, refer to “Positioning Content with Cascading Style Sheets,” on page 621.

For more information about frames, refer to Chapter 15, “Creating Web Sites with Frames.”

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint