So, You Want to Design a Webpage?

Web Design: Common Mistakes to Avoid

You want to put up your first website. You may want to show off some pictures of family or your last vacation, or you may want to save some money for your small business by creating your own web presence. But how can you do that without every visitor knowing that it is your first attempt?

Well, you've come to the right place - at least to start. This is the first in a number of tutorials that focus on creating the look and feel to a website rather than the nuts and bolts of creating it.

There are many choices that you, the designer, must make when creating a website. Some choices are easy, some difficult - but all of them make a difference in how satisfied your visitors are with the site. Remember, while the site is yours, the satisfaction of your visitors must be your primary goal. Otherwise you will have a website that no one will visit.

FIRST CHOICE: Site Planning

The first mistake that most beginners seem to forget is site planning. Sit down and map out your site. What pages will you include? What logical sections will be made? Visitors prefer some logic to your navigational system - for example, if you are a small business, they don't want to have to go looking for information about your company in the "Products" section.

This doesn't have to be any huge undertaking. It is actually fairly simple. First, list all the pieces of information you would like to include in your site. This is a brainstorming list, so don't worry if it isn't in any particular order - you will be organizing it later. Go over everything you might want to add to your site - things you want, things you need. This may change as your site evolves, but that's part of why you want to start with planning now.

Once you have that list created - or at least a workable list - start organizing it. Turn it into an outline. For example:

  1. Home Page
    1. Sitemap
    2. What's New?
  2. Section 1: About Me
    1. Profile - Me talking about Me
    2. Resume - Things I have experienced.
    3. Pictures of Me
  3. Section 2: My Interests
    1. My Hobbies
    2. My Vacations
    3. My Opinions
      1. My Political Opinions
      2. My Religious Opinions
      3. My Sociological Opinions
      4. And More...

Once you have completed the outline, voila! You have done your first site plan. Now...look it over. Do you have more than seven sections? Usability studies have shown that most visitors are confused by more than seven (7) upper level links in any navigation scheme. Is there any way to create combined sections that will keep the upper level to that total of 7?

Another problem here, is that - again, according to usability studies - you should not have to click more than three times to get to any piece of information within your site. So, you don't want to have more than three levels of outline as well.

And again, a third problem. Users also don't like excessively long pages. With the amount of information you wish to give on each page, are you going to end up with very long pages? If so, try to separate some of those pages into multiples.

Sounds difficult...doesn't it? It really is not that difficult at all - if you've done some of this preliminary planning. It helps you keep your site focused, and ensures that your site is "user-friendly."

SECOND CHOICE: Site Concepts (aka THEMES)

In many cases, this is where beginners seem to have the most trouble. There are so many different ideas available - not only within the minds of creative beginners, but also some free resources available on the web.

Once you have the planning done for your site, and know what information you wish to place on the site, you can now do some designing brainstorming. You need to come up with a unifying concept for your website. This includes your navigation system, your site colors, your backgrounds, your fonts, and many other choices.

Navigation Systems

Your navigation system should be developed with the end user in mind. Don't create a "mystery meat" type of navigation (i.e. where the user must search to find out what your links mean) if you want your visitors to return. Give them a simple navigation system that is easily marked, and is consistent with the concept of the site. For example, some business sites use tabs as their navigation system. The idea here is simple - their visitors are used to file folder type organization, and therefore it is a comfortable concept. Whatever system you choose, use it consistently on every page on your site - do not change it. You will only encourage confusion in your visitors.

Graphics

Don't go overboard on using graphics. Not only do they add to the time your site takes to download, but if they do not integrate into the concept of the site, all they do is detract attention from it. I have seen websites that have had great concepts, and whose content is not only highly informative, but fulfills a need - but they have added extraneous graphics for no other discern able reason than the creator thought it was cute. Don't fall into this trap. Ask yourself each time you add an image to your site: Is this graphic necessary? Does it support the purpose of the site, or detract from it?

And thinking about download times still makes a difference - even in this day of DSL lines, cable modems, and other broadband devices. There are still a large number of individuals on dial-up, and even those who have broadband will run away from your site if it takes too long to load.

Backgrounds

Remember: Just because something is available on the web, doesn't mean it is the best item to use.

For example, one mistake often made by beginners is creating a well planned, highly creative site - and then choosing a background that "looks cool" - but they don't check to see if their text and information is readable - or even viewable - when superimposed over that background.

That being said, it doesn't mean that you cannot use busy backgrounds, just be aware that you may need to create something with a solid background just to be able to use them. But I have only seen a few sites that have used that trick in a manner that shows creativity and style. I would encourage the use of a solid background, or a background whose graphic representation is a sidebar rather than covering the entire screen. Or, if you feel you must have a busier background, make sure that there is little contrast between the foreground color(s) and the background color.

Text

Once you have picked a background or background color, make sure that your text color contrasts strongly with it. If you must make all of your text bold, or size it huge just for it to be seen - you are doing something wrong. Either your background is too busy, or you have not chosen a text color that contrasts well enough. Bold fonts, italic fonts, and larger text should be used for emphasis - not for regular text.

Many sites have chosen to go the black/white route - partly because it is an expected color combination without too much strain on the eyes. But here, you may need to be aware of the age range of the audience you are trying to reach (more on audience issues in a later tutorial). It has been found that older audiences have difficulty reading light text on dark backgrounds, while younger audiences seem to prefer that combination. Depending on the age range that you wish to reach, this may limit your color choices. But I have seen good response from dark blue/light blue, dark green/light green, as well as dark grey/white.

Text Justification

Justification is another issue. This is whether your text is left aligned, right aligned or centered. Many newer designers choose to center all of their text. This also can be a cause of eyestrain as it requires the eye to search for the beginning of the next line. Centering text should again be used only for emphasis - for a quote, for a poem, or for a headline - rather than for regular text. It might be nice for a wedding invitation, but it is very irritating to your visitors in a webpage.

This is just a start. But it should give you some idea of the mistakes that are made by beginning designers.