Thinking about Web Aesthetics

Date: Jun 20, 2003

Return to the article

Lynda Weinman outlines what she sees as the essentials to good web design. She will guide you through color themes, typography, layout design and animation. Along the way, you will see multiple examples of the good and the ugly of web design.

• Color

• Type

• Layout

• Animation

Introduction

In the beginning, people thought that building a web site meant learning and using HTML. Then people realized they needed to learn graphics applications to make images for the Web. Then they realized they had to think about usability and navigation and accessibility. The process of making web sites has changed since the early days, which is a natural byproduct of maturity—maturity of web designers' designs, of users' tastes, and of users' expectations. Somewhere in the mix lies the importance of plain-old design: color design, typographic design, and layout design.

With all the teaching and lecturing I've done, I have met thousands of web designers and developers face-to-face. From these experiences, I have come to believe that people don't want to create bad-looking sites on purpose; they just don't know how to do better. Many people have gotten into web design without formal design training. This chapter won't be a substitute for years of training, but it is geared to help those who are seeking advice related to good design principles.

The definition of aesthetics from dictionary.com is "a guiding principle in matters of artistic beauty and taste; artistic sensibility." This definition addresses two components of aesthetics that this chapter deals with: the fact that aesthetics is about design principles and that calling something "beautiful or artistic" is a subjective judgment.

Color Aesthetics

Few people are well trained in color theory, and most web developers, even seasoned artists, are insecure about their abilities to choose pleasing color schemes. You would think color theory would be a fun and creative subject. Unfortunately, it is approached in a very dry and technical manner in most color theory books. This chapter approaches color theory with a distinct web focus. It's my goal to back away from overtly technical explanations and gravitate toward easily identifiable principles and techniques.

I cannot, however, take credit for most of the ideas in this section; I can take credit only for the way in which the ideas are presented. My husband Bruce Heavin, who painted the wonderful cover to this book and all my others, is my color mentor. He has shared his color-picking methods with me, which has greatly enhanced my own color-picking abilities. I hope to pass down his pearls of wisdom to as many people as possible, hence, the approach of this chapter.

Color Vocabulary Terms

In order to describe color, we must first establish some common vocabulary terms. Here are the most important terms covered in this chapter:

Figure 2.1

Spectrum: All the possible colors in a color space, such as RGB or CMYK.

Figure 2.2

Hue: Defines a specific location on the color wheel or in the color spectrum. In this example, a green hue has been selected.

Figure 2.3

Value: Describes the range from light to dark. In this example, a red hue is shown at varying values from dark to light.

Figure 2.4

Saturation: Defines the intensity of a color.

Figure 2.5

Muted: When people describe muted colors, they often refer to colors that have very little saturation.

Figure 2.6

Contrast: Separation between values.

Readability: Relates to contrast.

Figure 2.7

Tint: The process of adding white to a color.

Figure 2.8

Tone: The process of adding black to a color.

Choosing Color Themes

In order to choose pleasing color themes for your web pages and sites, it's necessary to learn a bit about color relationships. This next section will familiarize you with some terms that will later be shown in the context of web pages.

Many books on the market describe the emotion of color. Some might say that purple is for passion, red is for anger or attention, and blue is for tranquility. I don't believe anyone can or should project what a color means to someone else. It is totally subjective, regardless of what any book might tell you.

As well, color associations are cultural. To cite a specific example, someone from Israel came to our school in California and complained that the colors of our site were the same that were used by the Nazis for armbands that identified Jews during the holocaust. For this reason, he was deeply offended that the lynda.com site used yellow and black. As a person of Jewish descent, this wasn't an association I had ever made—I just liked the way yellow and black look together. I didn't change the colors of the site, because they don't carry that association for me. I would, however, be sensitive to using those colors if I were designing a Jewish web site.

Some clients might use pre-existing color schemes for their logos, printed brochures, or corporate identity. In such cases, you will need to work with their colors in a pleasing manner that is suitable for the Web.

Other times, you might have total freedom over a color scheme. Sometimes freedom is a dangerous thing in the hands of someone who doesn't know what to do with it! Rather than focus on the subjective and intangible aspects of color emotion, I've chosen here to focus on harmonic relationships of color.

Color Relationship Terms

Figure 2.9 May be rotated in any direction on the wheel.

Figure 2.10 May be rotated in any direction on the wheel.

Figure 2.11 May be rotated in any direction on the wheel.

Monochromatic

Figure 2.12 Takes a single hue and uses different values of that hue.

Figure 2.13 Three examples of monochromatic color schemes using (from left to right) cyan, warm colors, and cool colors.

Applying Color Relationships to Web Design

Perhaps you can impress your clients or colleagues by knowing the difference between a complementary color and a tertiary color, but unless you can put that knowledge to dynamic use on your own site, it's not going to result in practical knowledge. The color relationship terms that were just established all have to do with choosing hues. But what about saturation and value? They are equally as important as hue, if not more so in most cases!

Figure 2.14 In this horrible example, the color scheme is analogous, using blue, red, and magenta hues. The readability is just plain horrible, if not impossible.

Figure 2.15 This better example uses the same analogous color scheme of blue, red, and magenta, but it also uses varied values and saturations. What a difference! It is not enough to choose a type of color palette; you must also learn to balance values and saturation of color at the same time for readable color relationships.

Figure 2.16 Looking at the horrible color combination, you'll notice that all the colors are fully saturated and close in value.

Figure 2.17 Looking at the better color combination, you'll notice that there is variety in saturation and value.

A great exercise to force yourself to think in these terms is to previsualize your web site in Photoshop, as I have, using layers. Try filling the layers with shades of gray, instead of color, to make the information you want to "pop" work correctly. After you've designed the page using grays, replace the grays with colors. You'll be amazed at how effective this is as a learning exercise.

Figure 2.18 By designing first in grayscale, you can train yourself to think of colors as values as well as hues.

Figure 2.19 Hues have replaced grays, and I'm getting the exact read I want with my colors.

COLOR HARMONY PHOTOSHOP PLUG-IN

A remarkable Photoshop plug-in that came to my attention and relates to this subject is called Hot Door Harmony. You can download a trial version from http://www.hotdoor.com. At the time this chapter was written, the product was Mac-only, but a Windows version is on the way.

Hot Door Harmony lets you select colors through harmonic relationships. The program shows you color selections within the browser-safe spectrum. You can increase the Tint (lighten) or Tone (darken) settings to access different values, and you can copy the hexadecimal code for any color. I highly recommend that you download this tool for a test spin.

Figure 2.20 Hot Door Harmony is easy to use. Just click on which type of color scheme you want (for example, analogous) and then spin the ball.

If you understand the balance between hue, value, and saturation, you can force the read of your image to highlight what's important and subdue what isn't. It's quite empowering to grasp this concept. Applying it to your designs puts you in control of your color, so it will no longer be left to chance.

Figure 2.21

Figure 2.22

Figure 2.23

Figure 2.24

Figure 2.25

Figure 2.26

Readability

Making a web page read with color the way you want is the key to effective communication. You want to draw your end user to the areas of your site that are most important, and you can do that in a variety of ways. Let's look at some examples of using color as a device for creating visual importance or hierarchy.

Figure 2.27 If I want my logo to be the most important element of this page, I can make it pop with color. If my navigation element is more important, I can choose to make that pop instead.

A very important exercise that you should try before you develop your opening page is to identify what the first, second, third, and fourth reads should be. Armed with a specific order of importance, you should be able to use many of the principles covered in this chapter to achieve your communication goals using color.

Color Gallery

Figure 2.28 IMAX Everest: Roof of the World Film (http://www.mos.org/
Everest/howhigh/
howhigh.htm) is a great example of using complementary colors in an effective manner.

Figure 2.29 The LA County Arts Commission: (http:// www.lacountyarts.org) uses a lot of colors, but they look unified because the creator paid close attention to the value of each color. Because the values are similar, even the many different hues look harmonious.

Figure 2.30 The Box (http://www.sixsides.com) uses a combination of analogous color and split complementary colors. Each area of the site is branded by color, which achieves a dual purpose of looking good and reinforcing navigation.

Typography Aesthetics

There are many limitations with typography on the Web—especially with HTML type—and many of these are discussed in Chapter 20, "HTML Type." This chapter instead focuses on the design principles of type. It also concentrates on type as an image of type, or type in a Flash movie, rather than HTML-generated type.

Glossary of Key Typographic Terms

Before you venture too far into the subject of web type, let's establish a common vocabulary. The following examples cover many of the basics of type terminology.

Figure 2.31

Serif: A serif typeface has a stroke attached to the beginning or end of one of the main strokes of each letter. Many people think this style of type is the easiest to read as body copy. The default font in most browsers is a serif typeface: Times Roman on Macs and Times New Roman on PCs.

Figure 2.32

Sans-serif: A sans-serif typeface has no slab attached. Sans-serif type is specified with the FONT FACE tag, which is described fully later in this chapter.

CSS Can Do

Many of the typographic functions listed in this section that are not possible with HTML are possible with CSS, which will be addressed in Chapter 23, "Cascading Style Sheets."

Figure 2.33

Monospace: A monospace font uses the same amount of horizontal width for every character, unlike a standard proportional font, which uses a different amount of space for each character. The top example shown here is set in Courier and could be accomplished in HTML with the PRE tag. You can specify monospace typefaces with the PRE, CODE, or TT tags.

Figure 2.34

Default leading: Leading (pronounced ledding) is the measurement of space between lines of type. The origin of the word "leading" dates to early days of typography when lead type was used. Blank pieces of lead were used between rows as spacers. This figure shows standard leading in HTML using no custom tags.

Figure 2.35

Looser leading: This design can be re-created with CSS using the line-height property. You'll learn more about CSS in Chapter 23, "Cascading Style Sheets."

Figure 2.36

Spacing: This is the amount of space between each letter of a word. This can be managed with CSS.

Figure 2.37

Drop cap: A drop cap is used with all capital letters to indicate that the first letter of a word should appear in a larger size. In HTML, you can create a drop cap by using the FONT SIZE tag or with CSS, which is the preferred method.

Figure 2.38

Small caps: HotWired uses small caps on its front page ad. This example shows the use of small caps as a form of headline. Different sized text is best typeset using CSS.

Figure 2.39

Body text: The body text, or body copy, of a document is the main block of text.

Figure 2.40

Headline text: A headline is used to break up information. It can do so by being larger in size, a different color, or a different font. It might have an underline, bold, or other visual treatment, which will cause it to stand out.

Baseline shift: Enables you to change the position of a single character up or down.

Kerning: Enables you to adjust the spacing between individual characters.This can be achieved in CSS by using the letter-spacing property.

Leading adjustment: Enables you to specify a particular leading by using point size measurements. This can be achieved in CSS by using the line-height property

Word spacing: Enables you to adjust the space between words. This can be achieved in CSS by using the letter-spacing property.

Tracking: Enables you to adjust the global spacing between letters.

Type 101

Does type design fascinate you, but you really don't know much about it? It is a fascinating subject indeed and a rather complex science. I've selected some excellent resources for you to use to train yourself in type terms and issues.There are a number of interactive, type education-based sites on the Web. Here are two of my favorites.

Figure 2.41 counterSPACE (http://counterspace.
motivo.com).

Figure 2.42 typoGRAPHIC (http://www.rsub.com/typographic).

LEARN MORE ABOUT TYPOGRAPHY

Microsoft Typography
An excellent essay on hinting. Read all about it here!
http://www.microsoft.com/typography/hinting/hinting.htm

The Microsoft Typography Glossary
A disagreeably facetious type glossary, which includes the low-down on all the type jargon you can possibly absorb.
http://www.microsoft.com/typography/glossary/content.htm

Daniel Will-Harris
Choosing and using type and prolific verbiage.
http://www.will-harris.com/use-type.htm

webreview.com
Search the following site for "will-harris."
http://webreview.com/archives.shtml

CounterSPACE
A beautifully executed interactive study in type created in Macromedia Flash.
http://counterspace.motivo.com

typoGRAPHIC
A thorough (beautifully designed) look into the world of typography.
http://www.rsub.com/typographic

Fonts for the Web

There are two distinct ways to publish text to the Web: with ASCII text (created by coding HTML or CSS) or with pictures of text in the form of web graphics such as GIF, JPEG, or SWF (Flash).

Below is an example of two pages that use HTML-generated text. The one to the left has specified Verdana as the font, while the one to the right shows the default typeface of the Web: Times Roman. In order for visitors to see this content, they must have these fonts pre-installed on their systems. That's why your choices for HTML-generated fonts are more limited than your choices for type that you publish as a graphic.

Figure 2.43 This site has specified Verdana as the font.

Figure 2.44 This example uses the pre-installed default typeface Times Roman.

When you publish HTML-generated text, it's necessary that the visitors to your page have pre-installed whatever font you specified. This limits the kinds of typefaces that you can use. You will learn how to specify different fonts for HTML-generated text in Chapter 20, "HTML Type."

Figure 2.45 Although the list might change with newer operating systems, this is a valuable list of fonts that come pre-installed on Windows and Macintosh machines. When working with the FONT tag and CSS (which you'll learn how to do in Chapters 20 and 23), this is a good list to refer to when choosing fonts for HTML-generated text delivery.

Figure 2.46 This screen shot from http://www.alistapart.com combines HTML-generated text (using CSS for leading, indents, and position, which you'll learn about in Chapter 23, "Cascading Style Sheets"). The text that is set as a graphic is circled. It's possible not only to use different fonts than what you can with HTML-generated delivery, but you can add effects to the type, such as outline colors, glows, and extra graphic elements.

PROS & CONS OF HTML-GENERATED & IMAGES OF TEXT

If you care about creating beautiful typography, you might think to yourself that you're never going to use HTML-generated text because it is so restrictive. CSS now offers a lot of flexibility and control, so this is no longer true. This is not to suggest that you favor one text delivery method over another—it's just to educate you regarding the trade-offs of your choices. Here are some important things to consider:

• CSS-generated type is searchable, accessible, can be translated to other languages, and is small in file size.

• Pictures of text afford more design freedom. You can use any font and style and the end user does not have to own the font to view the picture.

Legibility Issues

The issue of color readability was already addressed, but typography on the Web (and off) has many legibility issues of its own. One of these issues is whether to use serif or sans-serif type. In the olden days of type education, it was widely believed that serif typefaces were easier to read as body text and sans-serif fonts were easier to read as headlines.

Figure 2.47 Serif ASCII text on the Web.

Figure 2.48 Sans-serif ASCII text on the Web.

With ASCII text, sans-serif typefaces are much easier to read than serif. This type could be created using the FONT FACE element in HTML (see Chapter 20, "HTML Type") or with style sheets (see Chapter 23, "Cascading Style Sheets").

Font Differences Across Platforms

You would think that an ASCII typeface would look the same between Mac and Windows platforms. Sadly, this is not the case. Have you ever gone to a site that was beautifully designed, but you couldn't read the text? It could be a cross-platform problem with the font that was chosen for the page.

Figure 2.49 At Colleges.com the HTML was written to contain two ASCII fonts: Verdana (left) and Arial (right). While Verdana reads beautifully on Mac or Windows, Arial does not. If you think you'll have a Macintosh audience, don't use Arial.

Figure 2.50 The same page (http://www.colleges.com) shown on a Windows machine— Verdana and Arial both look fine.

Figure 2.51 The default font for the Web: Times Roman. My opinion? There are better fonts to use for readability. How-ever, this font choice (or lack of choice, in this example) works between the platforms.

Figure 2.52 Georgia works on either platform, although it's still not as legible as a sans-serif font in my opinion. It is better than the default serif font, however, because it's slightly more legible.

Figure 2.53 Helvetica looks lousy on the Mac, even at a big size. It's very hard to read... Don't you agree? Helvetica doesn't render well on a Mac at any size. Notice how the letters touch each other, making readability difficult?

Figure 2.54 Arial works fine on a Mac as long as it isn't published at a size smaller than 12 points. Once it gets smaller, it's impossible to read on a Mac.

Figure 2.55 Arial always looks great on Windows.

Figure 2.56 Notice at the –3 size how difficult the default font, Times Roman, is to read?

Figure 2.57 At the smallest size, the serifs in Georgia make it hard to read.

Figure 2.58 Even at the smallest size, you can still read the sans-serif font. I do have a strong bias toward Verdana as the best cross-platform font for the Web.

Verdana & Georgia

Until now, most web publishers and designers have lived in a chocolate and vanilla typographical world. Web browsers have defaulted to using two typefaces: a serif font for standard text and a monospace font for code.

The trouble is, the basic font choices in browsers are bland at best. Arial and Helvetica suck! They are "ugly." In fact, all the fonts that ship as default fonts on the various platforms are "ugly" What makes them ugly? Here's a short lesson in identifying the ugly factors.

Digital type is generally not well hinted (the uniform spacing between letters) for the screen. Letters often touch one another, making them hard to read—especially in very small sizes (9 pt. and below). Serifs (the slabs at the ends of lines on each type character) improve readability when printed at high resolution, but they actually interfere with readability on the screen. Italics are even more problematic and are almost illegible in many sizes and on many platforms.

For us to get a wider range of choices for type on the Web, fonts must be designed for the screen from the ground up. Microsoft took a leadership role in this endeavor by hiring renowned type designer Matthew Carter (ITC Galliard, Snell Roundhand, Charter, and Bell Centennial—the font used in phone books) to develop two screen-based font families for them.

Matthew Carter's two fonts (Verdana and Georgia) are beautifully designed for web delivery.

The differences between these font families make up a primer on what features work for screen-based typography. They were designed with a larger x-height (the size of ascenders, such as the letter d, and descenders, such as the letter g). Letter combinations such as fi, fl, and ff were designed clearly so they do not touch. Uppercase characters are a pixel taller than their lowercase counterparts when displayed at key screen sizes to improve readability. In addition, the spacing between characters is much looser, making it easier to scan quickly.

It took Matthew Carter two years to create these typefaces, and Microsoft gave his fonts away for free. This did the online community a great service, but giving away fonts won't work for people who earn their living designing type. You can read more about this subject later in the chapter when I cover font embedding.

Figure 2.59 This figure shows a comparison between Carter's Verdana and its counterpart, MS Sans.

Figure 2.60 This figure shows Georgia compared to Times New Roman.

Font Size Differences Between Macs & PCs

No, you are not nuts. If you have both a Mac and a PC, you might notice that standard default fonts look different on the two platforms. Fonts display larger on PCs than they do on Macs.

It looks as if Explorer, as of version 5, has dealt web design a new twist: Fonts will default to the same larger size regardless of whether they are on Mac or PC. This is not the case with Netscape, however, so there's still a discrepancy. The way around this is to use style sheets that are set to pixels. You will learn how to create such a style sheet in Chapter 23, "Cascading Style Sheets."

Figure 2.61 Internet Explorer 5 on Windows.

Figure 2.62 Internet Explorer 5 on Mac.

Figure 2.63 Netscape 4 on Windows.

Figure 2.64 Netscape 4 on Mac.

Note: On Internet Explorer the font size is the same regardless of whether viewed on Mac or PC. On the Mac, however, there is a discrepancy between Netscape and Explorer.

Fonts for Delivery as Web Graphics

When designing headline type or special type elements such as navigation buttons or small amounts of body copy, it's acceptable to use graphic formats (GIF or JPEG) to publish images of type. Therefore, it's possible to use any font you want, because your end users don't have to own or install the typeface to view the content on their computers.

Therefore, in relation to producing headline text, it's possible to obtain for free or purchase as many fonts as you desire. This section will share some good resources for finding fonts on the Web—both for free and for a fee.

Great Resources for Online Fonts

There are tens of thousands of PostScript and TrueType fonts available to personal computer users. It's a great benefit to be able to view and order fonts online—especially during those late nights when you're designing something that's due the next day and you need a specific font you don't yet own. If you're looking for new fonts, check out the following URLs. Some of these font developers distribute their wares for free, and some do not. Regardless, all of these sites are worth visiting.

Fontastic
http://rover.wiesbaden.netsurf.de/~kikita

Nekkton
http://www.donbarnett.com

Fonthead Designs
http://www.fonthead.com

Emigre Fonts
http://www.emigre.com

Letraset
http://www.letraset.com

ITC
http://www.itcfonts.com

Chank Diesel
http://www.chank.com

Just van Rossum and Erik van Blokland
http://www.letterror.com

House Industries
http://www.houseind.com

Handwriting Fonts
http://www.execpc.com/~adw

Daniel Will-Harris' Personal Favorites
http://www.will-harris.com/faces98

Adobe's Type Browser
http://www.adobe.com/type

Figure 2.65 There are thousands of fonts available on the Web. Here are just a few: http://www.chank.com, http://rover.wiesbaden.netsurf.de/~kikita/, http://www.letterror.com, http://www.will-harris.com, http://www.emigre.com, and http://www.letraset.com.

Basic Styles of Typefaces

When movable type was first invented, there was just one kind of typeface—a Roman face, which is characterized by its serifs. Today, there are many more styles, some of which are shown below.

Figure 2.66 Most fonts fall into one or another of these basic styles: serif, sans-serif, script, display, bitmap, experimental, slab-serif, dingbat, handwriting, and blackletter.

Don't Use Too Many Fonts

During the early days of desktop publishing, everyone who had a computer and a laser printer thought they were a designer. One of the hallmarks of "bad" design from those days was mixing too many typefaces on a single page. While this isn't as huge a problem on the Web, it still pays to know how to work artistically with few fonts. This is a case of "less is more."

What Is a Font Family?

When I taught at Art Center College of Design in Pasadena, I remember there was a typography class (taught by someone else) that always had a wait list. During the course of this class, students worked for 14 solid weeks and were "only" allowed to use a single font! This is actually a great way to teach and learn typography. The exercise of working with a single font teaches the benefits of working with a single font family.

Figure 2.67 A font family is a single font that comes in different styles and weights. This is an example of Triplex, which can be purchased at http://www.emigre.com. Here, the condensed, bold, and light faces look different enough, but related. It's possible to create a lot of different design communications using this single font.

Figure 2.68 If you visit http://counterspace.motivo.com and select the Counterspace menu item, you will find a wonderful Flash movie that describes the anatomy of type. Within this presentation is a section on the artist's favorite fonts. Notice how these studies are made to look so different even though each study uses a single typeface.

Figure 2.69 By varying the size, weight, and color of a single font, notice how much variation and difference can be achieved.

Aliasing or Anti-Aliasing

Most digital artists prefer the way anti-aliasing looks, but anti-aliasing is not always the best technique with typography. Very small type actually looks worse and quite mushy if it's anti-aliased. Think about HTML type, the type on your computer desktop, and the type in a word processor. Very small type sizes (12pt. and smaller) do not look good anti-aliased.

Figure 2.70 The top version is anti-aliased, and the bottom is aliased. Which looks better to your eye? I prefer aliased type at small point sizes and often find anti-aliasing difficult to read.

Figure 2.71 Here's an example of a style guide that web designer Domenique Sillett (http://www.littleigloo.com) created for a client to show different button styles and colors for their web site. She used an aliased font called Silkscreen, which is perfect for small buttons because it is so readable.

Figure 2.72 You can download the free Silkscreen font from http://www.kottke.org/plus/type/silkscreen/index.html.

Figure 2.73 When type is created as an image or inside a Flash movie at larger point sizes (36 pt. shown here), it is legible regardless of whether it is serif, sans-serif, or a hybrid font.

Figure 2.74 Using upper- and lowercase, or all caps can influence legibility.

Figure 2.75 When used in body copy, the all caps style decreases legibility.

Figure 2.76 Used for navigation elements and short sentences, the use of all caps is much more legible. Tiffany.com site is also a great example of sticking to one or two typefaces and varying color, weight, and size to create a beautiful, elegant look.

Figure 2.77 Putting text over image is often a challenge to legibility. This study is in the legibility section at http://www.rsub.com/typographic.

Figure 2.78 By putting a black bar between the photo and the type, the legibility is greatly increased.

Figure 2.79 By putting a transparent black band between the white text and the black-and-white image, legibility is increased.

Figure 2.80 By creating a band of blurry photographic content between the white type and the black-and-white image, legibility is increased.

Figure 2.81 By creating a black outline around the white type, the legibility is increased.

Figure 2.82 Adding a drop shadow behind the text increases legibility.

Figure 2.83 Making a blurry copy of the type and positioning it behind the white type creates greater legibility.

Body Copy

I think the Web is an incredibly great way to gather information. Typically, when I find a page with a lot of text on it, though, I print the page on my printer instead of sitting and reading through the text on my screen. Who wants the light of a monitor blaring in one's face while having a recreational read? Give me crisp type on paper over that any day! I feel the same way about all computer-based text delivery systems, such as CD-ROMs and interactive kiosks. If I'm going to read a lot of text, I'd rather do so on paper. As designers, we have to recognize that computer-based presentations pose distinct challenges, and we should not treat our type-ridden web pages the same way we would print.

I advocate breaking up type into small paragraphs. Also, use different weights, such as bold and italic, to make it possible for the reader to skim the page easily and catch the important points. Adding hypertext (text that links from one spot to another, which typically appears underlined or bold depending on the the viewer's browser preferences) is another way to break up screen text into more digestible portions. The idea is to break up blocks of text as much as possible. Assume your readers are skimming, and make it easy for them.

Understand that you're asking a lot of your end user to sit and read page upon page of type on a screen. It's your job to invent ways to hold his or her interest and to bring out the important ideas. You can do so by using CSS, HTML, or graphic-based text.

Printing Web Pages

As if there aren't enough things to think about in web design, here is another wrench thrown your way: If you intend to have your audience print information from your pages, you should design your pages with that in mind. Many people don't realize, for example, that if they set up a dark web page background with white type, the background will not be printed with the file. What results? White type on white paper—or as some might say "a blank page."

I am not suggesting that you have to always use light backgrounds with dark type on every page, but if you know you want your audience to print a specific page, test print it yourself to see whether it is legible!

Some sites get around this issue by creating two versions of the same page—one that isn't printable and another that is. MapQuest is one of these sites.

Figure 2.84 If you wanted to print a page from MapQuest.com, you would press the Print button.

Figure 2.85 You might think the Print button would send the document to the printer, but it does not. Instead, it sends you to another page that is suitable for printing.

If you want to create two sets of pages for your site—one that is better for viewing and one that is better for printing, you can follow MapQuest's lead. The objective is to make a page for printing that is as simple as possible—no tables, no frames, no fancy DHTML layers or CSS. While you can print more complex pages, you won't be able to preview how they will print as well as if you keep your design really simple for printing.

Creating a PDF file is another option that you might consider for pages you want to have printed. PDF stands for Portable Document Format. It was developed long before the Web existed as a means of transporting documents to end users who didn't own the software applications the documents were created in. If, for example, I wanted to send a client a PageMaker document, and he or she didn't own PageMaker, my client could still see my layout with all the correct fonts and images intact.

PDF files are created with software called Acrobat, available from Adobe. Once you have the PDF authoring tool installed on your computer, you can choose to print to your printer or to a PDF document. If you print to PDF, you create a file instead of a printout. You can then upload the PDF to your web site (using the A tag and the extension .pdf), and as long as your end user has the PDF web browser plug-in called Acrobat Reader, he or she can see your document. Trouble is, the plug-in is a hefty 3–4 megabytes. If you own any Adobe products, you'll find that most of the CD-ROMs include the Reader but, nevertheless, it is hefty for those who don't already have it.

Figure 2.86 PDFs are great if you have forms or documentation that need to uphold formatting. The IRS (http://www.irs.gov) uses PDF forms to make tax reporting forms available online.

Figure 2.87 To view a series of tutorials on how to use Acrobat to create PDF files, visit http://www.adobe.com/products/tips/acrobat.html.

Using Fireworks for Type Design

Macromedia Fireworks software is one of many ideal environments for creating type and graphic web elements. The various Effects settings enable you to create all kinds of special type effects for headlines that you can use on the Web. The editable text feature lets you set up one look and then change certain words that will take on the same appearance. This is great for creating navigation buttons!

Figure 2.88 Fireworks offers a host of effects (similar to Photoshop's Layer Effect feature). The fonts shown above were all downloaded for free from the Web from Fontastic, Fonthead Designs, and Chank Diesel (http://www.fonthead.com).

Figure 2.89 Once you set up a style you like in Fireworks, you can duplicate it and change the words. You can also copy and paste appearances, which is handy if you change your mind (or if your client changes his or hers!).

HTML for Placing Text Graphics

Placing graphics on a web page is addressed in depth in Chapter 17, "Rules & Bullets." The most basic way to insert a graphic on a page is to use the IMG element. Here's how to insert the drop-shadow artwork, that you created earlier, on a page.

code

<html>
<body>
<img src="dropshad.jpg">
</body>
</html>

If you want to link the drop-shadow image to another source, combine the IMG element with an A element.

code

<html>
<body>
<a href="http://www.domain.com"><img src="dropshad.jpg"></a>
</body>
</html>

Figure 2.90 This page uses a text graphic inserted with HTML.

What About Flash?

Macromedia Flash is a vector-based authoring program and web plug-in that allows you to create animation, interactive content, and web pages. Because it works with vector data instead of bit- maps (GIF and JPEG), the information is much smaller and downloads more quickly than any other format on the Web. It is possible to create entire web sites in Flash that use any font you want, and those fonts will be accurately displayed to any visitor who has the Flash Player plug-in installed.

The authoring tool has the ability to work with any font that you have installed in your system. You can make the type animate, fade, scale, and/or rotate over time, creating much more dynamism than GIF and JPEG could ever hope to possess. The authoring tool lets you assign sounds and rollovers to type as well, and you can create links that jump to other Flash scenes (meaning your visitor might view your entire site without ever seeing a single HTML ASCII font).

One of the major drawbacks to Flash has been its reliance on a plug-in. While the plug-in is small (118K), it is still a deterrent to many. Fortunately, Netscape now includes the plug-in with its shipping version. In addition, Windows 98 supports Flash as a native file format.

I think Flash holds incredible promise as an HTML alternative. It gives designers the design control they want without forcing them to learn any programming. There is also a sister product, called Flash Generator, which allows you to use Flash with database-driven content. You could set up a template in Flash, for example, and have dynamically changing content conform to the template. Very exciting stuff.

The drawback to Flash is its reliance on a plug-in, its authoring tool (which is very deep, and has a medium–high learning curve), and the fact that Flash content is not searchable by most search engines or text readers. I think Flash is here to stay, and it offers one of the most promising multimedia technologies the Web has seen so far. To read more about it, visit http://www.macromedia.com/software/flash.

Figure 2.91 Pentagram (http://www.pentagram.com) uses typography, at large and small scale, as the subject of a dramatic introduction animation in their Flash portfolio. This would not be possible with HTML, CSS, DHTML, or any other technology on the horizon.

Aesthetics of Layout

Another area that poses great challenges to web designers is layout. This is partially because of technical limitations of the Web. There are many techniques used to create layout, which you will learn about in Chapter 21, "Alignment & Tables," and Chapter 23, "Cascading Style Sheets." This section addresses the visual principles of layout and composition.

Avoid Rectangle-itis

We do a lot of site critiques for students who attend our school. It didn't take long to realize that there was an undiagnosed disease on the Web—rectangle-itis! This is a result of too many rectangles on web sites. Rectangles are everywhere:

• Frames

• Tables

• Images

• Browsers

Rectangles make your users feel boxed in. They divide the small amount of real estate that you have into smaller pieces. They make everything on the page feel the same: predictable, boring, standard. Sites that use too many rectangles feel generic and templated.

Figure 2.92 These sites (http://www.horserentals.com, http://www.lycos.com, http://www.shoebedoo.com, and http://www.dalesshoes.com) could really benefit from breaking out of the rectangular mold! Rectangles get to be pretty repetitive, boring, and annoying after a while. It's natural to use them on sites, because images, frames, browsers, and tables all come in the shape of a square or rectangle by default. Through learning a few techniques, it's possible to break out of this mold without much effort.

Figure 2.93 There are lots of ways to introduce dynamic shapes into your designs that aren't rectangular. These sites (http://www.honda.com, http://www.ae.com, http://www.lynda.com, and http://www.petco.com) show a few ideas.

Use a Grid

Though this might sound like I'm now encouraging rectangle-itis, I do advocate the use of a grid in your design. The grid itself is not a visible component—it just helps you align your text and images so your design has a sense of security and order. Grids are easy to implement using HTML tables (which you'll learn about in Chapter 21, "Alignment & Tables").

Figure 2.94 Create a simple grid like this, and try some different designs using it.

Figure 2.95 Take some simple elements and shapes and try some different ideas.

Figure 2.96 When you remove the grid lines, you start to see the beauty and purpose of a grid.

Figure 2.97 Even though these are different designs, they feel united through the invisible grid.

A Gallery of Sites that Use Grids

Figure 2.98 R35 (http://www.r35.com) uses a grid, as well as whitespace and clean simple design, to make the content very easy to access.

Figure 2.99 The Beringer Wine Company site (http://www.beringer.com) changes the grid, but everything remains orderly, aligned, and easy to get to. It is also notable for its typography and color design. Overall, a beautiful site by all the criteria of this chapter!

Figure 2.100 You can see and feel the use of the grid in the Hillman Curtis web site (http://www.hillmancurtis.com). The consistency makes for a site that is easy to navigate and understand, while the design variations hold your interest on every page.

Make Your Line Widths Easy To Read

If you put text on an HTML page without a table, it will stretch to the width of the browser. My advice is to create tables to limit the width of text on your pages. You'll learn how to do this in Chapter 21, "Alignment & Tables." By looking at the following studies, you'll see why tables are so important with layout.

Figure 2.101 If you don't format HTML, your type will fill an entire screen; and the larger the monitor, the worse the problem. It's very tiring on one's eyes to stretch the width of a browser to read a single line of text.

Figure 2.102 By creating an HTML table, and turning off its borders to make it invisible (see Chapter 21, "Alignment & Tables"), you can limit the line width and make reading this text easy regardless of what size monitor you have.

Figure 2.103 Even better, limit the width of the type and give the column some breathing room on the left side. Nothing on the page feels crowded now, and nothing is in the way of you and your read.

Figure 2.104 You can also create more narrow columns, similar to a newspaper. Subheads help to break up the information as well.

White Space Is Better Than Tight Space

Using white space lets your eyes rest on different areas of a web page. It makes it more relaxing and easy to find information. Sometimes fighting for white space is a hard political battle—trust me, I've fought it myself. Many people mistakenly think that the more information you cram on a page, the more valuable the content is. This is especially difficult in companies with lots of divisions, or schools with lots of departments. Judge for yourself with the following examples—white space helps the visitor find the information. Too much information is overload and stops being effective.

Figure 2.105 The Arizona State University site (http://www.asu.edu) presents a lot of information in a relatively small amount of space. It is visually very cluttered, and there is little to no white space. (It's probably a political nightmare to be the web designer for this site!) The amount of information works at a cross purpose to its intent. I would give up trying to find a link on this page, and would simply type what I was looking for into the search box! That's not necessarily a bad thing (more on this in Chapter 7, "Navigation"), but regardless, in my opinion this site suffers from information overload that probably serves fewer people than it could if it were less cluttered.

Figure 2.106 The University of Illinois (http://www.uiuc.edu) also has a lot of information on its site. Through the use of white space and consistent separation of information, though, I think the content is much easier to find and focus on. Lack of clutter will always prevail over clutter.

Remember the Fold

The term "fold" comes from newspaper design because newspapers are typically folded in half. The headlines and lead stories are always on the front page and above the fold. The term has come to apply to web pages as well. A single screen, without scrol-ling, is considered above the fold.

It's important when you design your page that your front door (usually called the home page) places important navigation items above the fold. To determine where the fold is on a web site, however, has to do with what resolution your audience is viewing the site.

When I wrote the first edition of this book, I advocated that people design their web sites for 640x480 resolution. This was standard "waaay" back in 1995 when I was writing the book. Today, you would be hard pressed to buy a computer system that displayed at lower than 1024x786 resolution. Still, a lot of laptops are set to 800x600, and many people with poor eyesight (I sadly qualify) change their resolution to 800x600 so they can see better.

Figure 2.107 The CNN site (http://www.cnn.com) puts their key navigation on the left side, and it is above the fold whether the site is viewed on 800x600 or larger resolutions.

Figure 2.108 The Yahoo site (http://www.yahoo.com) puts icons along the top, but their navigation offers so many choices that it's challenging to know where to click.

Figure 2.109 The Google site (http://www.google.com) cuts to the chase. It's assumed that search is more powerful than links in this approach, and they waste no space about it! This site's key navigation (the search box) would be considered "above the fold" at any resolution.

The Aesthetics of Animation

You will learn how to make animated web graphics in Chapter 24, "Animation & Audio". Since this is the chapter on web aesthetics, the focus here will be on what works and what doesn't from a visual communication point of view.

With the exception of multimedia, the Web is the first medium to combine animation and body text on a single page. For this reason, it's no wonder that many people struggle to use animation effectively.

Adding animation to a site can be great, but it can also have the reverse effect of annoying your audience or detracting from what your page is trying to say. During a conference I once attended, Ben Olander, Creative Director at Angry Monkey (http://www.angrymonkey.com) commented, "Most animation you see on the Web is the equivalent of the BLINK tag." I agree with him, but I also see this as a natural outgrowth of artists and developers who are first working with a new tool.

Here are some very general, personal guidelines I would like to share:

• Animation calls attention to itself much more than static images on a page. Make sure that the content of your animation is, in fact, something you want the most attention called to on your page. If it isn't, the animation will effectively detract from what you're trying to communicate.

• In most instances, animation that cycles or loops endlessly will eventually become annoying.

• If you use more than one animation on a single page, the effect may be overwhelming to the end viewer instead of impressive.

• Make sure your animation loads quickly. You'll learn guidelines to achieve fast downloading speeds in Chapter 24, "Animation & Audio." If you make your audience wait too long for an animation to load, they'll move onward before ever seeing it.

Figure 2.110 At Solitaire Central (http://www.solitaire.com) the screen is almost entirely surrounded by blinking, animating ad banners and sponsor banners. It makes it almost impossible to read the content in the middle.

Figure 2.111 At Turbonium (http://www.turbonium.com) the spinning atom animation on the right side of the screen moves so fast and furiously that it almost makes you too nauseous to stay on the page.

Summary

Good web design is the practice of using design to enhance communication. Unfortunately, design can also be counter productive to clear communication. Here are some principles to keep in mind:

• Pay closest attention to the values of the colors you pick and make sure that you chose color combinations that have enough contrast to read easily.

• ASCII type rules are different than rules for graphic type.

• With ASCII type, be sure the font and size you pick is readable on all platforms.

• With graphic type, stick to one or two font families, and use color, size, weight, and style to create different "looks" and hierarchies.

• Make sure that your layout is organized, has enough white space, has lines of text that are short and easy to read, and keeps important navigation elements above the fold.

• Animation is good when the thing that is animating is the important information to look at. Peripheral animation should not loop endlessly, or it will annoy your visitors.