Contact / suggestion box

 Design  Measure  Convert  SEO 

Web design principles

A web site is a new communication technology; design is a topic of discussion as far back as the first written records by humans. Many 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 become design conventions.

Golden rectangleA 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 can inform the following:

The entire point

Communication is the goal of design. A successful design will:

  1. Capture attention
  2. Control the viewer's eye
  3. Convey the intended information
  4. Set a tone and evoke an emotion

In the fewest words, design creates and focuses interest on the message. Here are some of the available tools.

Contrast creates visual interest

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 for effect and contrast

Color is like pizza. Children prefer plain pizzas and simple colors like red, green and blue. Adults prefer the complex flavors of pizzas with 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 schemeMonochromatic color schemes can be subtle depending on the hue.A monochromatic color scheme uses different shades and tints of the same hue. Shades are darker than the pure hue; tints are lighter. 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 schemeComplementary color schemes are used on elements intended to capture attention, like a payment button.A complementary color scheme 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 appropriate 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 schemeAnalogous 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.

Color, three sites to help build your scheme

With some knowledge about color, valid ways to select colors vary from sampling colors approximate to a monochromatic, complementary or analogous scheme from a photograph used on the site to working out the math with precision. The color scheme on the Hardcover site relied on math help from the Color Scheme Designer. The Hardcover site uses analogous colors, the main color used for the logo, the complementary of the main color used for text links, as show below.

Color scheme designer

A similar site is Adobe Color, which also offers ready-made color schemes.

When the site will use JavaScript elements like a pop-up calendar, then it saves time to choose a color scheme from the JavaScript library. The most popular library is jQuery. Their color schemes are on the ThemeRoller page.

Color, tweak the hues for more contrast

In the same way analogous color schemes look natural because they mimic 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 Donate button above and the Hardcover site are examples. For the Hardcover site, the range of hues was created with a second color picker from the starting values created by the Color Scheme Designer.

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. Try it on the site to see if it works.

Font conventions

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.

Serif fontSerifs 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 fontSans 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 fontFixed-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

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 the 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 for focus and usability

Unity is a consistent, sitewide pattern for page layout, color scheme, typography and the style of images and illustrations. Unity removes distractions that cloud focus and improves the site's usability.

Common web design errors

With communication the purpose of design, a design error is anything that:

Here is a short list of common design errors.

Eye-tracking studies

Hardcover on github
Contact us / suggestion box