Fig. 1: Too many elements obscure the purpose of the Web page and distract viewers.
The creation of a good Web page requires a blend of art and technology. The technological side of the process involves learning to work with HTML code and FTPing the files to a server. The art, on the other hand, involves decisions relating to design, presentation of the information, and the use of graphics. While there is certainly overlap between these two areas, in this article I will focus primarily on the "art" side of Web publishing.
While content decisions are not really in the direct realm of design, content is such a critical part of a successful Web page that it must be considered. The most elegant design in the world can't save a page that is informationally useless to the viewer. Compose your content before proceeding. Minor adjustments can, of course, be made throughout the process. We are assuming that content is not an issue in our example page.
First, we need to define what makes an effective Web page. The following is a list of some objectives to keep in mind. I will discuss each in detail:
In order to discuss all of these factors in practical terms and
avoid vague generalities, we'll compare two versions of a homepage for
a fictitious college here at Penn State. The page shown in
figure 1 illustrates the final result of
poor choices in all of these areas, while
the page in figure 2 shows a design that attempts to better address
these concerns. Since these screen captures are being reproduced
here in black and white, discussion of color will be somewhat limited.
The full color versions, with accompanying comments, can be found at:
http://ww.personal.psu.edu/kel5/Design/index.html
| Fig. 1: Too many elements obscure the purpose of the Web page and distract viewers. |
 | Fig. 2: An organized composition helps the viewer locate information. |
Upon looking at figure 1, you will probably notice immediately that some of the text is very difficult to read. This is mainly because of the contrasty, highly patterned background. While the idea of suns (tying into the theme of energy) is a good one, the visual confusion is unacceptable given that clear effective communication is essential. In figure 2, even though some of the text overlaps background pictures and patterns, those letters have drop shadows to help set them off. Also, important text is made large and bold enough to jump out and catch the viewer's eye immediately.
Navigational links and buttons should be easy to find and logically laid out. In figure 1 the additional word "power" on the buttons is redundant and takes up space. By shortening the labeling on the buttons we can increase font size. The "back" link, usually unneccessary since most browsers have the same feature, is often included as a convenience. In figure 2 this link is still positioned with the navigational buttons but is less prominent and in a different style since it is not really related to the other choices.
After eliminating the distracting background of figure 1 we could have gone to a plain solid background. In figure 2, however, background tiling is used to create two distinct visual blocks which help organize the information on the page. The left side is now used as a "sidebar" to set off the navigational buttons, while the larger remaining area to the right frames in the main content of the page. The page title runs across the top, overlapping the two color blocks and visually tying the whole page together.
Visual balance is a little tougher to define. Basically, if a Web page, or a painting or postcard for that matter, looks like it's weighted too heavily toward one side, or the top or bottom, it lacks visual balance. Figure 1 illustrates several problems of balance. The most glaring is the positioning of the photographs toward the left hand edge with "empty space" to the right. If we were keeping this general design we could simply center the photos, as well as the top line of text, on the page. This would give us a symmetrically balanced, though boring, design.
Visual balance, however, does not have to mean mirror-image symmetry. In a divided design like figure 2, each side can be balanced individually and adjustments made afterward to balance the two sides to one another. In this case, on the right side I've added a third photo and created a collage. For some reason it is often easier to create a design that's both interesting and balanced using an odd number of elements. The collage and the overlaying text were created in Photoshop, which allows the freedom to rearrange the graphic elements until a balanced "feel" is achieved. The elements were then combined into one graphic for use on the Web page. Placement of the collage on the page seems to leave extra empty space at the bottom, but this depends entirely on the size of the browser window. And, any picture framer can tell you that a little extra space at the bottom of a "framing" job, which is what the edges of a Web page function as, usually looks good.
Contrast is also an important issue, even outside of the specific choice of colors. Too little contrast makes text hard to read. In figure 2 the navigational area on the left is basically light against dark. The right side reverses this scheme with dark letters and photos against a white background. Because the header spans both areas, it presented a difficulty in choosing a color for this line of text. The solution was to use a gradient from light to dark across the entire line of text, and then to further set the letters off with a dark drop shadow. All of these effects are easily created in Photoshop.
Achieving visual balance can often take some experimentation. Learn to use tables to place elements exactly where you want them and then keep "tweaking" things until they all fit together well.
This involves being consistent throughout a Web page and quite possibly throughout an entire site in use of fonts, style of buttons, selection of colors, and presentation of graphics. In figure 1, for example, the one photo has a border and the other doesn't. In figure 2, all three photos were given identical borders before the collage was assembled.
The intended audience and purpose of the site will, of course, greatly influence the stylistic decisions made.
A few simple rules should suffice here:
Graphics are great, but overuse can clutter a Web page and
make the actual information hard to find and slow to download (see
next topic).
The number and size of photos and other graphics should be based on the question, "What is this graphic going to do to make this a better Web page?"
Nobody wants to wait for huge files to download before they can see your Web page. Graphics are one of the main reasons for slow download. HTML code itself adds very little file size. Along with being careful to use graphics sparingly, learn to take advantage of a process called optimization. Optimization involves making the file size as small as possible while maintaining acceptable visual quality. Web graphics are generally in the form of either GIFs or JPEGs. These formats use different methods to shrink file size, and different types of graphics will optimize most effectively with one or the other. A commonly cited rule of thumb is to use JPEGs for photographs and GIFs for graphics with areas of flat uniform color. The only sure test is to experiment with the particular graphic.
There are several new software packages that are specifically designed for Web graphics preparation. One is Adobe's ImageReady (http://www.adobe.com), another is Macromedia's Fireworks (http://www.macromedia.com). With these packages you can experiment using different file formats and quality settings, and immediately see the resulting image quality and file size. It's not unusual to be able to cut a graphic's file size to one third or less of the original without noticeable image degradation.
For more information on optimization see my design tips at the following URL: http://www.personal.psu.edu/kel5/Design/index13.html
In summary, Web pages operate under most of the same basic principles of design that printed media do. The Web does add a few unique twists, with the use of links to other pages and sites, as well as the possibilities of animated graphics and sound files. A suggestion is to start out learning the fundamentals of design that I've covered here as well as the basics of writing HTML code before moving on to the use of more exotic elements.
Karl Leitzel, Center for Academic Computing
