Artifact Consideration in Creating Commercial Web Sites Part 1

Simplicity

Artifact Consideration in Creating Commercial Web Sites, 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.

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 (much more on this in Chapter 10).

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.

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.

Contrast

 

The 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.

Leave a Reply

Your email address will not be published. Required fields are marked *