Design Elements

Know your audience

The first step in designing a great looking website is to know your audience. If your target is CEO's, your web design is going to be different than if your target is graphic designers. And it will be completely different if your target is children.

Pay attention to the jargon you are using. If your audience is highly experienced techies, then you can leave out the definitions. But if your audience is the general population, you may need to explain what JavaScript is. Consider adding a glossary of terms so that anyone can enjoy your site.

Keep it simple

Simplicity is one of the most important design elements. Limit the number of background colors and fonts that you use. A web-safe color chart will help you pick your colors. This page uses three background colors:

Blue to set off the title bar at the top of the page.
Beige to set off the contents frame.
White for the frame with text.

Most people are accustomed to reading black text on a white background. This is why most of the big boys use white as their primary background. Feel free to try out other colors, but make sure the text is easy to read. Nothing will send a surfer packing faster than hard to read text.

This document uses one font--the default. Sometimes I will use a different font for headings, but this time I didn't. If you start using multiple fonts, the page will look busy. If you want to add some color to your page, change the color of your headings, like I did. Only make sure the color is readable.

When you change the font, font size, font color, or background color, the surfer's eyes will be drawn to the change. If you do this too much, the surfer won't know where to stop. It also looks busy.

White space

You have probably noticed websites that are so jam-packed full of information that they are dizzying. White space is just what you think it is: white space. It's the part of the page with nothing on it. White space helps your eyes to focus on the text.

There are several ways to increase white space:

Keep your paragraphs short.
Use multiple pages instead of trying to squeeze everything onto one.
Leave extra space around graphics.

There's no justification for justification

Use left-aligned text. Justified text gives strange word spacing that is harder to read. Most newspapers use justified text because of tradition, not because it is easier to read.

We are taught to read left-to-right. When we come to the end of a line, our eyes go back to the left-hand side of the page. If text is ragged on the left, it is harder to read, so always use left justification for paragraphs.

Don't be too bold with underlining

Underlining is a no-no. When fonts are designed, it is assumed that they will be read in lowercase with no attributes. If you want to highlight a word or brief phrase, use bold, not underline.

If you want to emphasize a longer piece of text, put it in its own indented paragraph. It will stand out and still be readable.

Use italics for foreign words and book or magazine titles, not for emphasis.

Don't overuse graphics

Graphics can look outstanding, but they greatly increase the download times for your pages. Do you know what speed modem your visitors have? As of March, 2000, 46% of all surfers had a 56K modem, and 47% had a 33.6K or slower modem. That means that over 93% of all surfers are still using traditional modems. Cable and DSL are fast, but they aren't that widely installed yet. Test your website with a traditional modem and see what 93% of the users have to put up with when they visit your site.

Lose the page transitions and scrolling text

Have you ever visited a website where you loved the content, but every time you went to switch pages, you had to wait for the stinking page to fade in or out? Look at the big sites like Amazon.com, Yahoo!, and AOL; and you will find no page transitions.

Text that scrolls across a page is also very unprofessional. Experienced web designers don't use it. And while you are at it, leave out the flashing text. Both are just a distraction to the reader.

Be consistent

One of the most important design elements is consistency. Don't give every page on your site a totally different look and feel. This makes it look like a different person designed each page, and it doesn't look professional at all.

Small columns

Make sure your columns are not too wide. Long lines of text are hard to read.

Headings to the left

You'll be tempted to center all of your headings. That's not necessary, and it actually breaks up the flow of the text. We read left to right, and headings on the left side of the page take our eyes back to the beginning of the line where we will be reading.

Check out USA Today or the Wall Street Journal for examples.

Eliminate ALL CAPS

IT IS MUCH HARDER TO READ TEXT THAT IS WRITTEN IN ALL CAPS.

Fonts are designed to be read in lowercase. If you want to highlight some text, either use bold or an indented paragraph.

Your sub-headings don't even need Title Case. Just capitalize the first word in the sub-heading and leave the rest lower case. My sub-headings are done that way, and they look just fine. Of course, either is great.

Use styles

Styles h1, h2, h3, and h4 are pre-defined HTML styles. Some search engine spiders recognize headings for keywords.

Using the pre-defined styles also helps you to maintain consistency.

Don't be too flashy

If you are designing a gamers' website, Flash objects are perfect. But if you are designing a life insurance site, don't use a Flash object for your intro page. They are slow to load and are annoying to your average business person.

Take me home

Every page of your site needs a home button so that the user can get back to your home page easily. It is a basic navigational element that should be at the top of every page.