Web sites are a new way to communicate. However, many of the principles of web design have been around for a long time, first as experiments, then after repeated tests as best practices. In time, proven principles have become design conventions.
A golden rectangle, a classic Greek proportion, influences design yet today.
Some design principles are so time-tested they have become conventions.The rule of thirds has its origins in the golden ratio noted by Pythagoras in 500 BC. The ratio is a mathematical curiosity, 0.618 = 1/1.618. The ratio creates an asymmetrical proportion used in art and architecture for over two millenniums. A golden rectangle, a popular web layout grid, has proportions of 1 on two sides and 1.618 on the other two sides. In web design, the ratio informs the following:
Communication is the goal of design. A successful design will:
In the fewest words, design creates and focuses interest on the message. Here are some of the available tools.
Variation in page elements creates visual interest. An appropriate amount of contrast creates an appealing layout with focus on the content. Unfortunately, a clutter of distractions often results because contrast is easy to create. Contrast can be between the following page elements:
Color is like pizza. Children prefer plain pizzas and simple colors like red, green and blue. Adults prefer the complex flavors of pizzas that combine several toppings and the subtle colors that result from mixing colors. Three standard color schemes are monochromatic, complementary and analogous, which produce different effects and degrees of contrast.
Monochromatic color schemes can be subtle depending on the hue.A monochromatic color scheme (example site) uses different shades and tints of the same hue. Shades are darker than the pure hue; tints are lighter. The example at right is for the green used on the Hardcover site. Monochromatic schemes create a clean, elegant, authoritative effect. Because difference between hues creates visual interest, monochromatic schemes are low-energy and less visually compelling than multicolor schemes. Therefore, a monochromatic scheme can create a subtle effect depending on the hue.
Complementary color schemes are used on elements intended to capture attention, like a payment button.A complementary color scheme (example site), combines two hues from opposite sides of the color wheel (a color wheel is shown below), usually one hue from the warm area and one hue from the cool area of the wheel. Complementary color schemes create maximum color contrast and visual appeal. The result is striking, energetic, the opposite of subtle. Like a payment button, the scheme is often used in small doses. A dialed-down way to use a complementary scheme is to make one hue dominant, like a monochromatic scheme, with the second hue only for accents.
Analogous color schemes create a moderate amount of contrast and a natural, nuanced effect.An analogous color scheme uses colors from the same side of the color wheel, usually all from the warm side or all from the cool side of the wheel. Analogic color schemes are often found in nature. The effect is natural, rich and subtle. The contrasting hues create more visual interest than a monochromatic system but less than a complementary scheme, a middle course for contrast.
The web site, Color Scheme Designer, can help put together a color scheme. For the Hardcover color scheme shown below, select an accented analogic scheme, enter 85 into the hue field and 46 degrees into the angle field. An accented scheme includes the complementary color from the opposite site of the color wheel. While the dominant colors on the Hardcover site are the analogous colors, the complementary blue is used for text links.
A similar site is Adobe Kuler, which also offers ready-made color schemes.
In the same way analogous color schemes look natural because they resemble nature, varying the hue a small amount in any scheme creates both a more natural appearance and adds contrast between hues for more visual interest. Both the Hardcover site and the Donate button above are examples.
While contrast is a straightforward concept, color is a complex and contentious subject. There are competing methods of explaining color and many ways to put together color schemes. Perhaps without being able to put into words why, you find a color scheme you think will be suitable for your site. Perfect. Try it on the site to see if it works.
Unlike print designers, web designers have little control of fonts. Even as the situation has improved within web server technology, more client devices limit the available fonts. The only sure way to have a font look as intended on all devices is to put the font in an image, which is appropriate for logos and image text. When less control is adequate, which is most of the time, there are conventions for font use.
Serifs are the feet at the tips of traditional fonts. Collectively the outside serif edges reinforce a visual line at the top and bottom of each row of text. The visual line makes it easier for the eye to skim along the row of text. Because serif fonts are easier to read than other fonts, by convention serif fonts are used for bodies of text. Until recently, serifs have been difficult to reproduce on computer screens. With today's better displays, serif fonts are finding their way to web sites.
Sans serif fonts, literally without serif, are common in headings and navigation in order to provide contrast with the serif body text. Initially in computers, sans serif fonts were used for everything because they were easier for screens to display. Some believe sans serif fonts are modern because of their extensive use by computers. A style decision had nothing to do with that.
Fixed-width fonts were developed for mechanical typewriters. The design was a mechanical necessity, again, not a style choice. Although mechanical typewriters are obsolete, fixed-width fonts are still used for lining up rows of numbers and other information made more evident when aligned vertically.
Images and illustrations make contrast and visual interest by breaking up the text. Unfortunately, that is their only accomplishment on too many web sites. When used appropriately, images add information and create a tone.
Photographs are easy to add to a site. More work than photos, drawings and illustrations increase the production value of a site. Clip art has the opposite effect and is to be avoided.
Infographics, or information presented graphically, is the paradigm of functional images. With communication as the goal, diagrams, charts, maps and timelines can be the most direct route to that end.
As a matter of capturing interest, images and illustrations should be unique to your site. The best source might be to take the photo or sketch the artwork yourself. Alternatively, hire someone to produce unique images. Only as a last resort, digital stock sites sell images, which will not be unique.
Unity is a consistent, sitewide pattern for page layout, color scheme, typography and the style of images and illustrations. Unity both removes distractions that cloud focus and improves the site's usability.
With communication the purpose of design, a design error is anything that:
Here is a short list of common design errors.