Tutorial: Common Web Design Blunders

avoiding embarrassment

A lot of people think it doesn't take much to be a great web designer. But web design is like other skills: doing it well is not quite as easy as it appears.

Still, not everyone can justify investing money in a professional site. Here are a few common mistakes that, if you avoid, it won't turn your site magically into a professional presentation, but may at least save you some unnecessary embarrassment. This list is not exhaustive, but hopefully, it will help you get going in a sound direction.

(Note: None of the items in this list are about good HTML or sound structure. Studying this list will not help you write good code. But hopefully, it will help you toward a better presentation.)

#1: busy-dizzy

The symptom

One of the most common mistakes of amateur web developers is a tendency to splatter the canvas with a dizzying array of things. I have often seen (and yes, in my early days, was often guilty of this too) several styles of background used on one site, and even one page. Perhaps there is a fancy graphic for the page background, and then various table cells or divs have other, unrelated, background images.

The antidote

Keep it simple, particularly if you are not an experienced designer. While experienced designers learn how to weave diversity together, almost always you will find that they never have a zillion things happening at once.

Here are a few hints to maintain a pleasing simplicity and coherence:

• Don't overdo the fonts. In most cases, I suggest a maximum of three font faces: one for the logo, perhaps another for main page headings, and a third to carry the load for everything else. In fact, two font faces (of varying sizes) will usually be plenty.
• Stick to a visual theme. A page with several tiled backgrounds of varying sorts will come off like dressing in clashing plaid shirt and pants. Find a visual theme that relates well with the content of your site, and learn how to re-use that theme.
• Be smart with your colours. Employ two or three well-integrated colours, and if you find you need more variety, consider using tints and shades of the colours you've already got. One of the best things you can do colour-wise is to reuse dominant colours from your main graphic. For example, if your site's visual theme is dominated by a photograph of flowers, select two or three colours from that photograph and use them liberally. (This is a great trick for those who are not good at coordinating colours. You know the photo looks good, and therefore you can be confident that the colours will look good together.)
• Be consistent from page to page. If you look at the most well-designed web sites, you will find that they do not confront the user with a vast array of looks from page to page. Colour and structure are employed consistently. The user should not click a link and wonder if he is still at the same site.

#2: eye strain

The symptom

Have you ever been on a web site that made your head hurt after a couple of minutes? Sometimes this is caused by the blunders we considered in #1 - the visuals are just too busy, and the eyes can't take it. But sometimes there are other issues, such as not understanding sizing, spacing, and font face issues.

The antidote

To reduce eye strain, you need to present a "clean" look. Here are a few hints.

• Avoid over-reliance on light text on dark backgrounds. Almost every web designer starts off with this, perhaps because it is almost never done on paper, and so seems "cool." But the truth is that all other things being equal, the dark colour as text and the light colour as background is always easier to read than the reverse - even though the contrast is identical. Save light on dark for components that do not need to be stared at (such as navigation menus); in most cases, avoid it for anything that has lengthy blocks of text.
• Avoid over-reliance on bold-faced type. Bold print makes something stand out, and is effective when serving that purpose. But because it changes the dynamics of the inner "white space" of the letters, it is harder to read. It also loses its effectiveness if it is used consistently, rather than for purposes of contrast. (If everything is bold, after all, bold print cannot make anything stand out.)
• Use sans-serif fonts as much as possible. "Sans-serif" refers to fonts without squiggly decorations. The font you are reading is Arial, one of the most common web-safe sans-serif fonts. As it turns out, serif fonts (such as Times New Roman) are easier to read in print, but on a monitor, sans-serif fonts are far superior. If you want to use serifs, use them in headings, not in the body of your text.
• Be realistic with your font sizes. While overly-large font sizes can look amateur and childish, be sensible. As with anything else, something too small is hard to see. In addition, when using smaller font sizes, employ italics sparingly.

#3: mind strain

The symptom

The user arrives at the site and is impressed with all of its glory. Except. . . he can't find his way around or (even worse) really can't tell what the site is about.

The antidote

There are many flashy, "wow-factor" effects that can be applied to the web. But "can" does not equal "should." Every time you do something that you think looks brilliant, ask yourself how it affects your site's useability.

Here are a few pieces of advice to help you keep your site easy to use:

• Don't keep your visitors guessing. Your home page needs a clear, understandable statement telling what your site is about and what sort of content can be found there.
• Clearly mark every page with a title that indicates its function.
• Don't fall in love with splash pages. A "splash page" is an "entry page" that has no real content (usually something razzle-dazzle created in Flash), but must be gone through in order to get to the "real stuff." I know that Flash entries can look "cool," but chances are that 50% of your visitors don't want to wade through it the first time, and 90% of them don't want to have to wade through it after they've seen it once. If you must have an entry page such as this, be sure to provide a way for the visitor to skip it.
• Mark your links clearly. It's okay to be adventurous with your menus. Indeed, menus are often a great spot to let the creativity shine. But above all: make sure that the visitor knows where your links are. Make them easy to find and easy to use. Give your links names (and titles) that give the user a clear idea what is on the other end of the click. And don't try to disguise the URL your link leads to.

conclusion

As noted, we have not attempted to provide an exhaustive list of everything that can go wrong with a web site, even regarding presentation. But knowing the common blunders listed above, and how to avoid them, will contribute to your ability to make visiting your site a pleasant experience rather than an annoyance.

Happy designing!

 

« Return to tutorials main index.

all our docs recent work