Contact / suggestion box

 Design  Measure  Convert  SEO 

Web design principles

Websites are a relatively new communication technology, yet we know design has been a topic of discussion for at least as long as we have been writing things down. Many principles of web design have been around for a long time, first as experiments, then after repeated use as best practices. In time, proven principles became design conventions.

Golden rectangleA golden rectangle, a classic Greek proportion, influences design yet today.What we call the rule of thirds has its origins in the golden ratio noted by the Pythagoreans 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. Like so much else, content suggests the appropriate amount of contrast. We prefer to read about super heroes in comic books to read novels in hardcover volumes. Nonfiction, especially textbooks, fall somewhere in the middle. Because contrast is easy to create, restraint is a notable characteristic of good design. 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 used only for accents or buttons.

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 websites 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 on the website to working out the math with precision. The color scheme on the Hardcover website relied on math and help from the Color Scheme Designer. The Hardcover website uses analogous colors, the main color used for the logo, the complementary of the main color used for text links, as shown below.

Color scheme designer

A similar website is Adobe Color.

When the website 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 in a gallery 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 website are examples. For the Hardcover website, 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 website. Try it on the website to see if it works. If it does, then do not explain yourself.

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, which has led some people to believe sans serif fonts are out of fashion. Yet as displays have improved, serif fonts are finding their way to websites.

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, a decision not based on design principles.

Fixed width fontFixed-width fonts were developed for mechanical typewriters. The design was a mechanical necessity, again, not a design choice. Although mechanical typewriters are obsolete, fixed-width fonts are still with us for lining up rows of numbers and other information made more clear when vertically aligned.

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 websites. When used appropriately, images add information and create a tone. Sometimes, a picture is worth a thousand words.

Photographs are easy to add to a website. More work than photos, drawings and illustrations increase the production value of a website. 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 useful images.

As a matter of capturing interest, images and illustrations should be unique to the website. 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 websites 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 website'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