Home Articles We've Written Web Ugly
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.
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.
that are not anti-aliased have an unprofessional look. Here's an example
of a logo created using WordArt in Microsoft Word:
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.
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:
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:
combine the customized light bulb with anti-aliased text. Add a
drop-shadow and complementary background color for a more
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:
very little extra effort, you can create custom graphical text buttons
such as these:
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.
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:
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.
background graphics are always distracting. It is difficult, and sometimes
nearly impossible, to read text on a textured background:
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:
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:
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.
decided to customize the image further by focusing on the face and adding
a drop shadow, resulting in the following svelte 4K image:
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.
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