Teresa S Theory Of Good Design

In principle, only a few factors make up good design. These are simple:

1. Contrast***

2. Balance

3. Readability (or, intentionally unreadable)

4. Color (which is really a part of all three, and exists on a different ideological plan as the other three, in my opinion)

Contrast

Now, I could make an argument that contrast covers just about everything, but I thought I'd include balance because, while contrast provides balance, balance is important enough as a separate entity. Contrast applies to size, color, positioning, and typography. Effective points of contrast within these elements (as individual classes and with each other) are essential to good design because it creates tension or flow and emphasis. You not only need to consider different sizes of text, for example, but also contrast between differently sized text of different colors; a red letter may create greater mass, and therefor greater contrast, than a light blue letter of the same size. Again, this applies to every element of design. Most importantly, contrast provides emphasis, which gives the audience a visual clue to what's really important.

Balance

From here, the combination of your contrasting points lead to balance. Balance depends primarily on the mass and tension created by individual elements. (Balance is somewhat objective, though, at the same time, all of design is subjective and VERY culture specific.) Balance contributes to and is affected by visual flow, too. Gestalt principal proposes that in Western culture we enter a page about 15 - 20% of the height from the top on the left-hand side; we follow across from that point to the middle, then drop straight down to exit, in the lower right-hand corner. (Designs that do not display a large amount of text, depending on purely visual elements, often employ graphics in the lower right-hand to prevent the eye from leaving the page; or, the most important information will go in that space.) The visual center is 5 - 10% the page height above the actual physical center.

Readability

As for readability, well... unless you've got a good reason, large copy blocks need to be warm on cold... that is, black on white, the ultimate warm-cold color combination. Your good reason could be, for example, designing for WebTV, where cold on warm actually increases readability. And, the most vivid combinations are going to be between your contrasting colors, with the warm on bottom and cold on top. That's black and white, of course, blue and orange, red and green... etc. Of course, you must also consider the shades and saturation of your colors when you experiment with color combinations.

The other biggie for readability is handling of text columns. Gestalt principle, as well as basic Poynter Institute research, tells us that you never want to put more than 2.5 alphabets in a column (that is, you don't want to string all the characters of an alphabet [26] across a single line more than 2.5 times [for a total of 65 characters, give or take, depending on whether your alphabet includes special characters]). The longer your [character] line, the more leading (vertical space) you want to add between lines. While debates continue about justified vs. right-ragged (align left), everyone agrees that either of those options are much more readable than ragged-left (or align right) and centered copy. Of course, readability includes comfortable reading.

Here's a great big quote from Jakob Neilson (famous web guru): "How Users Read on the Web".

Miscellany

Okay, one final word about color palettes. I mentioned a bit about colors above, but color palettes contribute greatly to the overall impact of the page. Some argue color preferences are class-oriented, and everyone agrees that they inspire emotional reaction from all viewers. I don't want to go into that as much as a good basic rule is to pick a color palette and stick with it; there's no limit on the number, of course, but you should use three or four colors to recur in your dominant elements. Similarly, you ought to pick a typography palette, using no more than three to four font families. And, a few quick words on navigation.

Employ all possible means to ensure the readability of your nav links.

Think about the most important features of your site when placing emphasis on certain links. (In this case, the emphasis comes primarily from order.)

Make visitors want to visit important sections by letting them know what's there. Frames are good for navigation, of course, but it's not a good idea (or legal) to target new frames into your frames. Remember, these sites could have their own frames, and if their names are the same as one of yours - look out! Either popup a simple JavaScript box or target a nonexistent frame name (like TARGET="BLAH" <http://javascriptsource.internet.com/>) to popup a new browser window.

Finally, nothing is more important than consistency on a site of size. You can be wrong, wrong, wrong, but as long as you're consistent, you're cool. There are lot's of free services out there: as mentioned above, Webmonkey is fab. Try Feedback.com, , and stuff like that to make your pages more functional and intuitive. Website Garage is one of many services that will validate, give you download times, spellcheck, etc. your site.