Chapter 4 -- Effective Web Graphics and Type

When we view exceptional graphics created by someone else, all we usually see is the final image. We're impressed by the flow, colors, content, and mood conveyed by the image, but do we really see everything that was required to generate the image? Rarely. We don't see the hours of experimentation it took to generate the acceptable ends. We don't see the primeval iterations of the image; ones that the creator would be embarrassed to display.

As graphics creators, we are experimenters, trying different effects and techniques to generate a pleasing image. I'm surprised to find that many people, on the verge of creating a masterpiece give up too easily in the development process. They are afraid to apply that final filter or brush stroke.

As we're writing this book, we are striving to write clearly and concisely. These are the same characteristics we want our graphics to embody. So how do we write? We begin by developing an outline. We then develop paragraphs. Finally, we read and re-read our paragraphs, honing, refining, and clarifying. The same is true of graphics. We generate an idea of what we want to create. We then develop the beginnings of the image. Finally we hone, refine, and clarify the image. Graphic development, just like writing, is a fluid process to reach a finished product.

Avant Garde, Ingenuity and Creativity

Avant garde is defined as a group or individual active in the invention and application of new techniques in a given field, especially in the arts.

In the design world there is a significant difference between ingenuity and creativity. Ingenuity is modification of an idea or a process. Alternatively, creativity is the development of an entirely new idea or process. The biggest difference between these two principles is the time required for each. [The time needed for ingenuity must be squared to equal the time needed for creativity.] Sites that are truly avant garde are creative. On the Web there are many ingenious individuals, but very few who are truly creative.

 

Graphics and Sites for Childeren

The first thing you'll probably notice about graphics for children is the use of color. Generally bright colors, bold lines, large buttons, and cartoonish images top the list of characteristics. Remember that log called a pencil you used to write with in kindergarten? When you're developing graphics for kids, use this knowledge to your advantage. Look through a child's eyes to find what will interest them

Designing a site for kids must include something that is graphically fun and aesthetically stimulating. Focus a site for kids on something they will like. Use of imaginative cartoon characters is recommended. Development of graphics for these sites can be both fun and challenging, but if you can make your site a fun place to be, you will probably attract kids.

Creating a Corporate Web Page

Much like a formatted business letter, most corporate sites have formal, balanced designs such as are shown in Figure 4.3. Unlike sites for kids or the avant garde, these sites strive to present formality through their design characteristics. A balanced design simply means that the page has symmetrical items on each side of the page. Paragraphs are usually justified and employee pages usually conform to preset standard templates.

Every corporation develops its own look. If you've got the job of designing a Web site for a commercial client, you probably have some research ahead of you. Here are some suggestions:

 

Typography for Websites

When you begin working with page design and layout, no discussion would be complete without talking about fonts. The feature that most distinguishes one font from another is the presence or absence of serifs. Serifs are the small tails and feet that appear on certain characters to help distinguish them from other characters. Fonts with tails and feet are called serif fonts, those without are called sans serif. (See Figure 4.5.)

Figure 4.5: Serif fonts versus sans serif fonts.

There are also other defined features associated with each type of font:

Figure 4.7: The weight of a font.

Fonts for the Screen

Most of the unique fonts that you use in your Web pages will be graphic text that is a bitmap from an image editor. Fonts that are actually used in the body of a Web page-- such as for the text within HTML <p> tags-- are limited to fonts on the user's machine. Specifying a font in your HTML code that is not on the end user's machine won't work. So you need to design only with fonts that you can assume [should] be on your audience's machine (that is, those that come with the operating system).

This is a bittersweet situation. On the plus side, HTML text carries almost no file size overhead because the text you display on the screen is created from the fonts you have resident on your machine. You can display a considerable amount of text on a Web page from a 20KB HTML file. The bad news is that HTML text is limited in its design capabilities, as well as in its font choices, which (per the above) are slim and none. So use unique fonts as inline images.

Designing a Font-Rich Page

A text-rich page has its own set of design considerations: