Design Principles
When you start thinking about designing your web site, you need to think about how the colors you choose will affect visitor's perception of the site and how the design layout can help "make the design come together".

Make the content of each of your pages relevant to the topic at hand. Don't stray into areas that won't provide viewer with the materials or information they are seeking. Otherwise you may lose the viewer's attention and they may leave your website.

Always be concise and to the point. Potential customers do not want to read information that doesn't apply to their goal for visiting your website.
Start with a hierarchy of information:

• Page title
• Page sub title
• Bullet points if appropriate
• The the content in paragraph format.

Good design is transparent, bad design often screams out loud. But depending on the product or service you offer you may have to be a little loud to get the viewer's attention. If your web site is well designed and the layout of information is easy for the viewer to follow, visitors will return. If you don't think about how the design and color scheme can affect the user experience, visitors may never come back after finding your site difficult to understand and navigate. An another issue to consider in choosing a color scheme is to remember to design for those with color blindness, this might help make your site usable for everyone.

Design Layout
To start designing your web site, the best method is to use a graphics software, such as Adobe PhotoShop (http://www.adobe.com) or Macromedia Fireworks (http://www.macromedia.com).

You might want to first, sketch out a couple of ideas on paper. This will give you an idea of where you'd like elements, such as the navigation, before you start getting into the design process.

Choose a palette of colors to base the design on; usually no more than 4 is sufficient. Use varying tones of the same shade to highlight and shade. For example, this web site uses different shades of gray and white.

Decide where you are going to locate the navigation, and fill this with navigation items to mark out sufficient space in your mockup design. Produce several versions of your design to see which you prefer and works best for your project.

Proximity
Put like elements together, and separate unlike elements. This reduces the number of visual units on a page, making the task of design simpler.
The principle of proximity states that you group related items together, move them physically close to each other, so the related items are seen as one cohesive group rather than a bunch of unrelated items.
Subheads should go with the things which they announce. Dividing elements into categories and classifications is often a part of proximate layout.

Alignment
Alignment isn't just aligning text or objects to the page -- it's the practice of placing elements in a specific spot locations on your pages. The principle of alignment states that everything should be placed on the page with purpose. Every item should have a visual connection with something else on the page.
back to top

Repetition (consistency)
Repeat graphic elements, locations and colors to provide a sense of unity throughout your website. An example would be navigation. You will always want your navigation to be EXACTLY the same from page to page. Same type style or graphics, same location and same response when selected.

Always use graphics of the same style. Don't choose a line drawing with a thin light outline at the top of the page then use a heavy weighted graphic farther down. Doing this will tell the viewer you're not willing to invest the time to make the page great.

Contrast (balance)
The visual differences between objects and/or content.
Contrast is created when two elements are drastically different. If the two elements are not greatly different, then you don't have contrast, you have conflict. That's the key. The principle of contrast states that if two items are not remotely the same.
Colors, sizes, typefaces, alignment, and text direction can be used to create contrast in a layout.
back to top

Color (covered in more detail here)
Choose a color scheme and use it faithfully. Small areas of a bright accent color help spice up and balance to the page. Certain colors evoke certain emotions. Red means excitement or danger. Green is relaxing. Blue is sublime. Lots of black or dark colors create a dramatic or depressing mood. White or light pastels feel happy or refreshing.

Space
Blank (white) space is just as important as text or graphics. Balance and contrast are affected by the amount of plain space on the page. Readability goes down if words or characters are placed too close to each other. Attention can be drawn to an object by placing it in plain space. A common mistake that new designers make is to fill up every open space on the page with content. This can be done successfully but it is difficult and only works well in certain circumstances.

Line
A straight line divides up a space. The eye tends not to cross lines. Also, the eye follows lines and goes to the point where two lines cross.

Scale
A close-up is much more involving than a long shot. Large objects generally draw more attention than small objects.

Proportion
Relative sizes of objects determine depth and importance. Large objects appear to be in the foreground. Small ones in the background.

Pattern
The eye looks for and recognizes patterns. Repeating shapes form patterns. Random patterns can confuse the eye (like camouflage) subtle repetitive patterns provide a soothing nondescript background and help blend the entire page into one cohesive element.

Sequence
The brain connects things in a sequence. If one element follows another, we assume that it is caused by or at least connected to the element which went before. This can be an interesting phenomenon in a non-linear medium such as the Web.
back to top

Your web site should be easy to read
The most important rule in web design is that your web site should be easy to read. What does this mean? You should choose your text and background colors very carefully. You don't want to use backgrounds that obscure your text or use colors that are hard to read. Dark-colored text on a light-colored background is easier to read than light-colored text on a dark-colored background.

You also don't want to set your text size too small (hard to read) or too large (it will appear to shout at your visitors). All capitalized letters give the appearance of shouting at your visitors.

Keep the alignment of your main text to the left, not centered. Center-aligned text is best used in headlines. You want your visitors to be comfortable with what they are reading, and most text (in the West) is left aligned. back to top

Link colors in your text should be familiar to your visitor (blue text usually indicates an unvisited link and purple or maroon text usually indicates a visited link), if possible. If you elect not to use the default colors, your text links should be emphasized in some other way (boldfaced, a larger font size, set between small vertical lines, or a combination of these). Text links should be unique -- they should not look the same as any other text in your web pages. You do not want people clicking on your headings because they think the headings are links.

Your visitors should be able to find what they are looking for in your site within three clicks. If not, they are very likely to click off your site as quickly as they clicked on. back to top

Web sites are promoted online via search engines, directories, award sites, banner advertising, electronic magazines (e-zines) and links from other web sites. If you are not familiar with any of these online terms, then it is best that you have your site promoted by an online marketing professional. (See our section, What to Look for in an Online Marketing Company, for some general guidelines.)

Web sites are promoted offline via the conventional advertising methods: print ads, radio, television, brochures, word-of-mouth, etc. Once you have created a web site, all of your company's printed materials including business cards, letterhead, envelopes, invoices, etc. should have your URL printed on them. back to top

Not only should your web site be easy to find, but your contact information should be easy to find. People like to know that there is a person at the other end of a web site who can help them in the event that:

• they need answers to questions which are not readily available on your web site;
• some element on your site is not working and end users need to be able to tell you about it, and
• directory editors need you to modify parts of your site to be sure that your site is placed in the most relevant category.
  
  By giving all relevant contact information (physical address, telephone numbers, fax numbers, and email address), you are also creating a sense of security for your end users. They can contact you in the way that makes them feel the most comfortable.

For example, if you use a drop shadow as a special effect in your bullet points, you should use drop shadows in all of your bullets. Link-colors should be consistent throughout your web pages. Typefaces and background colors, too, should remain the same throughout your site.

Color-coded web pages, in particular, need this consistency. Typefaces, alignment in the main text and the headings, background effects, and the special effects on graphics should remain the same. Only the colors should change. back to top

A good application of this rule is adding animation to your site. Sure, animation looks "cool" and does initially catch your eye, but animation graphics tend to be large files. Test the download time of your pages first. If the download time of your page is relatively short and the addition of animation does not unreasonably increase the download time of your page, then and ONLY then should animation be a consideration.

Finally, before you consider the personal preferences of your web page design, you should consider all of the above rules FIRST and adapt your personal preferences accordingly. The attitude "I don't like how it looks" should always be secondary to your web site's function. Which is more important: creative expression/corporate image or running a successful business?
back to top