Basic Web Design Principles

Published on 10-05-2009

0

Knowing good web design principles will help improve the design and usability of a website. When websites look professional, a customer is much more likely to take the company seriously and view them as professional.

Here are 5 basic principles taken from “The Non-Designers Web Book” by Robin Williams & John Tollet

1. Alignment

Choose one alignment and use it on the entire page. This can be left alignment, right alignment, or centered. Don’t mix alignments. Mixed alignments that are haphazard are an obvious indicator that a beginner is designing a page, and it will not look very professional.

Alignment doesn’t mean that everything is aligned along the same edge. It just means that everything in a sequence has the same alignment. This could be flush left, flush right, or centered.

Let’s see some good examples:

The pink lines and arrows indicate where elements are nicely aligned and creating visual lines. (If you are using tables in your design, turn borders OFF if you are so that your design doesn’t resemble an excel spreadsheet.)

2. Proximity & Unity
Proximity refers to the relationships that items have with each other when they are close together. When items are far apart, they do not have a relationship and don’t create unity. On web pages, headlines or subheads can often be too far from the text or picture it describes. Group items together that belong together. Look at the items on a page. If the connections of grouped elements don’t make sense, rearrange them until they do so that they create unity among each other. Unity refers to the way in which different elements in a composition interact with one another. A unified layout works as a whole, not as separate pieces.

Let’s look at a bad example and then see how it was improved. The pink arrows in the first example indicate there is too much space making the elements feel spaced apart and unified. They don’t look like they are working together.

This next example below has been improved. The spacing was tightened to bring elements closer together, and the photos were enlarged to give them more emphasis and help the text look more grouped with the images.

3. Repetition & Consistency
The concept of repetition is to repeat certain elements through a project to maintain consistency and make sure that all pages in a design look like they go together. Each page should look like it belongs to the same website. Navigation buttons and logos can be repetitive elements. Colors, style, layout, typography, and imagery can also used in repetition that will unify a web site.

Here are two examples from a website where we can see repetitive elements being used. The two pages look like they belong to the same website because the repetitive elements help unify them.

4. Contrast
Contrast draws you into a page and emphasize something. Contrasting elements help certain elements stand out on a page, creating a hierarchy of information. Contrast can include anything that is very different such as very bold type next to a regular font weight, or a bold color. The greater the difference between a graphic element and its surroundings, the more the element will stand out.

This website has good contrast that works. The logo stands out well on a white background, the selected navigation is highlighted in a brighter color, and the text stands out well on the background colors.

5. Emphasis
Create a focal point. There should always be a dominant element on a page that your eye goes to first when you look at a page. For example, when all type is the same size, nothing stands out and the hierarchy of information is unclear. There must always be a hierarchy of information so that the reader can understand the most important things. Get rid of any unnecessary elements that are distracting and don’t help the reader understand the information. Often on websites there is a banner with a large graphic to create a focal point. When elements have emphasis on important pieces, it helps a website have continuance. The idea of continuance is that when are eyes start moving in one direction, there are elements to continue guiding our eye across our page in a pattern that makes sense. This helps the reader see the most important parts quickly.

In the first example below, there is emphasis on a lot of things. There are many colors, and the eye gets confused at what to look at next and what is most important. The second example has been improved. The banner creates a emphasis and a focal point and helps the eye easily continue through the rest of the website in an order that makes more sense.