Basic Design Principles
Effective web design relies on four basic principles:
- Alignment
- Proximity
- Repetition
- Contrast
These principles are fundamental factors in good design, both in print and on the Web. Apply them and your pages will communicate more clearly and people will enjoy them.
Alignment
Alignment simply means that items on the page are lined up with each other. Lack of alignment is the single most prevalent problem on web pages. You know you can align items on the left side, the right side, or centered.
This is the rule to follow: CHOOSE ONE. Choose one alignment and use it on the entire page.
This means if you choose to align the basic text on the left, then don't center the headline. If you center some of the text, then center all of the text. Don't mix alignments. This one principle will radically change the appearance of your pages.
You might at first find it difficult to line everything up. A centered alignment is safe, it's balanced, symmetrical, formal. You might think you are doing cool things by making some text flush left, some flush right, and some centered. But it looks terrible. It's messy. It gives an unprofessional appearance.
A centered alignment has its place, but it has to be done consciously - not because you can't think of anything else. One problem with a centered alignment is that it is weak. There's an invisible line down the middle, but the edges have no definition. And because it is so symmetrical and balanced, it's very calm and formal.
Move text away from the left edge. It is annoying and distracting to have your eyes bump into the left edge of the browser page every time they swing back to get the next line. When you indent text (also called "block quote"), it also indents from the right edge, helping to prevent the text from ending up in those long, difficult-to-read lines.
On pages where there is a lot of information to present, it's critical that the layout follow some strict alignment guidelines. This is not just to make it look nicer, it's for clear communication. If a visitor's eye has to wander all over the page trying to follow the flow of information, they're going to miss something or get tired and go away.
Proximity
The principle of proximity refers to the relationships that items develop when they are close together, in close proximity. When two items are close, they appear to have a relationship, to belong together. When items are physically far from each other, they don't have a relationship. Often on web pages (as well as on printed pages), many items are orphaned unnecessarily, and many other items have inappropriate relationships.
It often happens on web pages that a headline or a subhead is far from the text it belongs with. Sometimes a caption is far from the picture it describes; sometimes a subhead is closer to the text above it than to the text below it. Be conscious of the space between elements. Group items together that belong together.
Open your eyes to the relationships on the screen: squint your eyes and see what elements on the page seem to have connections because of the spatial arrangements. Are they appropriate connections?
When items that belong together are grouped closer together, the information is much more organized and easier to read. The visual spaces create a hierarchy of information. The individual groups of information are still separated by space, but the space is organized and has a purpose - it's not random space that is breaking elements apart that should be together.
What maintains the unified structure of the piece, if elements are separated by space? Alignment. Those invisible lines connect the various parts of the page.
Repetition
The concept of repetition is that throughout a project you repeat certain elements that tie all the disparate parts together. Each page in the web site should look like it belongs to the same web site, the same company, the same concept. Repetition makes this happen.
On a web site, navigation buttons are a repetitive element. Colors, style, illustrations, format, layout, typography, and so on can all be part of the repetition that unifies the entire site. Besides unifying a web site, a repetitive (consistent) navigation system helps visitors get the most out of your site because they don't have to learn their way around again on every new page.
Also, it is VERY important to recognize the power of simplicity. You can get overwhelmed by moving objects and too many pictures. Designs created quietly and with grace often have the most impact.
Contrast
Contrast draws your eye into a page, it pulls you in. Contrasting elements guide your eyes around the page, create a hierarchy of information, and enable you to skim through the vast array of information and pick out what you need.
The contrast might be type that is bolder, bigger, or a very different style. It might be different colors, graphic signposts, or a spatial arrangement.
To be effective, contrast must be strong. . If two elements, such as type, rules, graphics, color, texture, etc., are not the same, make them very different - don't make them almost the same!
There are times when you don't want contrast on a page, most often when you want to present continuous text, as in a novel or some articles. In that case, don't interrupt the reading process by throwing contrast into it.
Even links can be a form of contrast by virtue of their color, underline, and interruptive status. If you want people to sit and read through an entire piece, then let the page be very bland and uninterrupted, let the readers' eyes start at the beginning and continue to the end. Let the words simply communicate.
Create a Focal Point
On any designed piece, whether it is on screen, paper, or a package, there must be a focal point. Something must be the dominating force, and the other elements follow a hierarchy from that point down. This focus is created through contrast.
When all the type is the same size, there is no hierarchy of importance. If everything has the same priority, then nothing has priority. But SOMETHING should be the most important. Contrast helps define what is important.