Creating the Design

The cardinal rule of design: Your design should enhance and not detract from the information you are trying to provide. This sounds like kid's stuff, but if you take a look at many of the sites on the Web today, you will see that a great number of them break this very simple rule. But not you.

The goal in designing for the WWW is to communicate your point. How do you do this? By getting and keeping your customers' attention.

Good Web design, just as good graphic design, always seeks the perfect balance between visual impact and the graphical and textual information you are providing. Without the visual impact of contrast, shape, and color, Web documents will be graphically uninteresting and may not inspire the viewer to investigate their contents. In addition, pages filled with solid text, ignoring the visual contrast and optical relief offered by graphics and a well-structured page layout, are more difficult to read. Nonetheless, without the content of the text, highly graphical pages run the risk of disappointing the viewer by offering a poor balance between visual sensation, textual content, and hypertext links, as well as providing little reward for the time spent downloading the graphics. So, your goal is to find this ideal balance, within the graphical constraints of the HTML language, and the bandwidth limitations of the average viewer.

The six basic elements of good Web design, as we see them, are

1. Simplicity

Simplicity is the most important principle of Web design; after all the WWW is supposed to make things easier and information more accessible to the public. While viewers are entertained by high-end graphics and kick-butt bells and whistles, they will only come back if your content is easily accessible and worthy of their time.

Viewers generally won't struggle too hard to get to your content, and if they do it makes them angry and frustrated and turns them off of your site. So your Web design has to be not only interesting, attractive, and informative, but simple and efficient as well.

2. Visual balance

Each element in Web design (graphics, type, white space) has its own optical weight. In print work we call this their ink density. Graphics are weighty when compared to a block of type, which is relatively light. So, in attempting to achieve visual balance, keep in mind it takes a lot of type to balance even a small graphic.

Visual balance must be assessed top to bottom, as well as left to right. The left to right part can be really tricky considering you never know how wide your page will be when viewed (the center point is unknown). Therefore, you should take full advantage of HTML alignment tags (<CENTER>, <…ALIGN=RIGHT>, and so on), for text as well as images whenever possible. For example, say you have an informational page with lots of text aligned to the left (default); to achieve visual balance you will need to add some weight on the right. You could do this in many ways—for example, by placing the majority of your graphics on the right, or by using graphics with brighter or bolder colors on the right.

To achieve top-to-bottom balance, each Web document should have a header and footer section; this creates visual bookends for your page. These should contain some similar elements (at the very least, keep your header and footer in the same color scheme). This is not to say that you should add unnecessary graphics at the end of your pages, but you should provide a good bookend, even if it is just a horizontal line with your copyright information.

Also, never underestimate the value of white (blank) space. Many inexperienced designers feel a need to fill every pixel with information, and this simply isn't the best way to communicate. Refine your pages to the point that the messages are concise, and use design elements that break the information up into manageable chunks.

3. Proportion

For some reason the human eye tends to favor particular horizontal:vertical relationships in the sizes of elements. A proportion of about .6 to 1 (roughly twice as long as high, or vice versa) is the most pleasing to the eye, while perfect squares are less pleasing. It is easy to do this with your individual graphics, but it is much more difficult to implement in your Web page (since there are so many variables in how someone will be viewing your site). Nonetheless, be aware of the proportions of your page elements: graphic dimensions, blocks of text, white-space area, and so on.

4. Contrast

Contrast is a very important part of Web design, as it is in all other design. Contrast is easy to explain; if you shout all the time, people will stop listening, but if you whisper and all of a sudden shout at the top of your lungs, you'll be sure to get people's attention.

An example of how this works in Web design comes from some novice HTML programmers. Because heading tags are the easiest to learn, novices often begin designing Web documents by making nearly all the text a heading, as if for some reason they think the bigger the better (we wish we could show you how awful this looks in a real example, but we can't very well ask people if we could use their page as an example of bad design). The result of this is the whole document looks as if it is shouting, nothing stands out, and the viewer becomes disinterested and tunes out. Another common mistake is to load every document with dense text, ignoring the important inclusion of white space (empty space on your page); this causes viewers to see a wall of gray and their brains instinctively reject the lack of visual contrast. Yet another common mistake is to ignore the contrast between the background color (or image) and the text. If you have ever tried to read yellow type on a white background you'll know exactly what we mean. So remember, your type must stand out very clearly from its background to be read easily.

Good Web typography depends on the contrast between one font and another, as well as the contrast between blocks of text and the surrounding white space. Web pages with lots of dense type, small or no headlines, and low-contrast graphics tend to look dull and lifeless on a Web page. Strong visual contrast and unique patterns attract the viewers' attention and makes/keeps them interested.

Use heading tags very sparingly, in other words, only if you want to really emphasize the text (less is more). Otherwise use bold, italics, or font size to contrast segments of type you consider important details. In other words, your can use contrast of your fonts to portray what you want the viewer to see as important, in addition to adding visual interest.

Note: A good typographer's rule is to use only one type of font treatment at a time. For instance, either italicize or bold a word, but avoid doing both if at all possible (sometimes you may need to do this in a caption).

Keep visual contrast in mind for your entire document. Remember: People see contrast and pattern before they notice anything else, so edit your design just as tightly as you edit your copy. Take the time to erase the unnecessary and accentuate the essential.

5. Flow

Viewers tend to quickly scan and then read, making many passes through information, not just one. Their first scan looks at the overall shape and patterns, while further scans begin to examine the content more deeply.

A good Web page design leads the viewer to the starting point, and then distinctly through the page in the best order for maximal understanding. Keep in mind that viewers see big, colorful, or bright elements of the page first, and then follow the normal left-to-right and top-to-bottom pattern.

6. Harmony

Your Web site should be harmonious, in other words, your individual Web pages should look as if they belong together. You can do this by making your individual elements (graphics, type, white space) sized, colored, placed, and used the same way on each page on your site. You should also employ the same overall structure for each document on your site.

This consistency helps guide viewers through your information and gives them a sense of where they are on the Web (they know they are on your site and haven't jumped to New Guinea accidentally). There is also an issue of the harmony between the graphics and the text. Try to match the art to the copy, and vice versa. The purpose for both is to send a message.

Using Pre-Designed Templates

There are a number of websites selling pre-designed 'Website Templates' which you can use to avoid delaying your website by thinking of a design for it. You can simply purchase a template and start adding content to it. There are also websites that provide templates for free, but they might require a link back to their website in exchange for the free template. Professional websites are advised against using such free templates.