I had a chance to do a lot of Web surfing recently and what I saw surprised me. There are a lot of slow-loading, ugly, substandard Web sites out there! That's unfortunate because it's just not that difficult to avoid many of the problems I encountered.

Before reading further, please check out this example Web page that screams "amateur!" Then come back so we can pick it apart and discuss some simple ways to improve it.

Unsightly graphics

Graphics that are not anti-aliased have an unprofessional look. Here's an example of a logo created using WordArt in Microsoft Word:

Good Ideas.

Notice how the edges are jagged? Anti-aliasing is a technique for softening the edges to make them look smooth. Fortunately, most graphics programs will automatically anti-alias text and shapes as you create them.

Free clip-art is very tempting, so go ahead and grab some. But don't be afraid to make it your own by customizing it. For example, this light bulb is a nice piece of clipart:

Blinking lightbulb.

Too bad it's blinking in that distracting way. But you can still make use of it by pulling one of the images out of the animation. Recolor the selected image to match your color scheme, erase the heavy shadow, and incorporate it into a new custom logo as follows:

Now combine the customized light bulb with anti-aliased text. Add a drop-shadow and complementary background color for a more professional-looking logo.

Just because a graphics program offers a wizard for automatically creating buttons for the Web doesn't mean you should accept that offer. Here are some typical results using Microsoft Image Composer's button wizard:

With very little extra effort, you can create custom graphical text buttons such as these:

When you create navigation buttons, it is a good idea to use a different, softer color for the button that represents the current page. The different color will make it stand out, and the softer hue will hint that it is disabled on the current page.

Distract and annoy

If an animated graphic is used in support of your goals for a Web page, keep it. Otherwise, ditch it. If your objective is to distract and annoy, the following animated graphics should do nicely:

Animated "Andy's Art Attack" graphic.

Read my article "Why animate?" for more information. In the meantime, we'll ditch these because, believe me, they do not make a Web page look professional.

Tiled background graphics are always distracting. It is difficult, and sometimes nearly impossible, to read text on a textured background:

If you want to brighten up the page or make it look more lively, you can do that with color alone -- so get rid of background graphics. Set the background color in HTML rather than loading an additional graphic, and your page will load more quickly as an added benefit. Select colors that are already found in your graphics to keep from overloading the page with too many different colors:

Size does matter

One of the most common mistakes amateur Web designers make is to allow the browser to resize large graphics. The example Web page includes a 197K photograph that looks like the following 7K graphic:

Photo: Some guy.

What accounts for the huge difference in size? First, the original graphic is 909 by 1500 pixels. The browser is resizing it down to 180 by 300 pixels -- a size that is manageable for Web page display. By resizing the photograph in a graphic editing program and compressing the small image by 20 percent, I reduced the bloat from 197K to 7K.

I decided to customize the image further by focusing on the face and adding a drop shadow, resulting in the following svelte 4K image:

Photo: Some guy's head and shoulders.

Poorly written text

What better way to achieve amateur status than to include text with misspellings and poor grammar? At a minimum, text should be spell-checked and grammar-checked. Better yet, get a second pair of eyes to scan for errors. I also recommend reading the text aloud; the slower reading pace helps you to hear what others will read. Be ruthless about removing repetitive text, and rewrite any unclear sentences.

The makeover

Will following these tips make you a better Web page designer? I'm certain of it. See the results for yourself in this made-over example Web page. Did I succeed in changing the look from amateur to professional? Send me an e-mail to let me know what you think.

Home Articles We've Written Web Ugly