5 Cardinal Rules of Web Page Layout and Design
By Kristin Schwarz

There was a time in the ancient history of Web design (about five years ago) when only an elite few – called webmasters – could build websites.

That’s no longer the case. It’s now easy for non-technical people like you and me to design websites that are far better marketing tools than the most tech-savvy webmasters can make. How is this possible?

Ten-plus years of Internet marketing have proven that successful marketing websites aren’t jam-packed with Flash animation, RSS feeds, or other fancy additions.

The most successful marketing websites – including those you can design and build for yourself and for clients – are simple. These websites follow the same design principles you’re learning in the Graphic Design Success Program. And as an added bonus, they are easy and inexpensive to create.

(We’ll discuss the best tools to use for building websites n a future issue of Inside Freelance Design.)

While designing an effective marketing website does not require a great deal of specialized knowledge, there are basic principles that increase a site’s effectiveness and profitability.

Here are five cardinal rules of effective Web design that apply to any website.

1. The website should be easy to read.

   This is the most important rule in Web design. Choose your text and background colors carefully.

   You don’t want to use backgrounds that obscure text or colors that are hard to read. Dark text on a light background is always the best choice for readability.

   Don’t set text size too small (it’s hard to read) or too large (it appears to shout at your site visitors). ALL CAPITALIZED text also gives the appearance of shouting.

   Keep the alignment of your main text to the left, not centered. Center-aligned text is best used in headlines.

2. Take control of your fonts.

   Applying different fonts and typefaces in website design is not as simple as it is in print design. Let’s say you use the typeface Myriad. In order for your Web pages to appear in Myriad to site visitors, they must have it installed on their computers. If they don’t, the site will look completely different than intended.

   Use the most common typefaces already installed on computers: the serif typefaces Times and Times New Roman and the sans-serif typefaces Arial, Helvetica, and Verdana.

   One important difference regarding fonts used for the Web: Sans-serif fonts are often used for body copy, since they are easier to read on the computer screen.

3. The site should be easy to navigate.

   All hyperlinks should be clear and easy to identify. Graphic images used as hyperlinks, such as buttons or tabs, should be clearly labeled and easy to read.

   Select colors, backgrounds, and special effects very carefully. It’s more important that navigational buttons and tabs be easy to read and understand than to have “flashy” effects.

   Link colors in the text should be familiar. (Blue text usually indicates an unvisited link, and purple or maroon text usually indicates a visited link.) Text links should not look the same as other text. You don’t want people clicking on headings because they think the headings are links.

   Rule of thumb: Site visitors should be able to find what they are looking for site within three clicks.

4. The Web page design should be consistent throughout the site.

   Just as in designing a printed piece, all graphic elements, typefaces, headings, and footers should remain consistent throughout the site.

   For example, if you use a certain blue for subheads, you should use the same blue consistently throughout the site. Typefaces, alignment in the main text and the headings, background effects, and the special effects on graphics should remain the same.

5. The website should download quickly.

   Your visitors will quickly lose interest in your website if the majority of a page does not download within 10 seconds – and most of them will probably lose interest much sooner than that.

   It’s easy to assume your visitors have high-speed Internet. But there are still many places in the U.S. where high-speed isn’t yet offered. So any cool gizmo like Flash animation will slow loading of the page considerably.

   Make sure your images are optimized for Web use. There is only a limited range of Web-safe colors. Images should be in GIF or JPG format.

Last, but not least: Keep it simple! As with DM design, less is often more. Your sole purpose is to make the sale … not show how clever you are.

Following are some examples of sites with too much color, bad font choices, and no focal point. Use them as models … for what not to do.

http://www.saltinstitute.org/

http://www.wetestit.com/

http://www.sphere.bc.ca/test/sruniverse.html

http://www.globalaigs.org/