When designing a Web site, you need to keep a few things in mind that are common practices for a good design. By following these tips, you can prevent your Web site from becoming the next abomination of the Web.

There are six principles that can help to keep you on the right path to designing. They are Emphasis, Contrast, Balance, Arrangement, Repetition, and Visual Direction.

Emphasis

What is the most important item on the page should be the most prominent. So, how do you decide what is important? Ask yourself the following questions.

  • What message are you trying to get across?
  • What elements on the page communicate that message the best?
  • Are you trying to present more than one message?
  • What visual elements are the most appealing?
  • Do you have any elements that don’t support your message and can they be removed?

There are many ways that you can emphasize an item on your Web page. Here are some of the ways.

  • Bold
  • Bigger
  • Italics
  • Different colors
  • Use effects like drop shadows, glows, or textures
  • Different shapes
  • Borders
  • White space to set apart other elements on the page

Contrast

Anything on your page that should be set apart from the rest should contrast with the background. Here are some ways to create contrast.

  • Reverse text color (white text on a black background)
  • Larger size
  • Italics
  • Different colors
  • Effects like drop shadow, glows, or textures
  • Different shapes
  • Borders
  • White space to set apart other elements

Balance

Balance is used to make sure the page is not loaded with too many elements on one side as opposed to the other. While elements of varying sizes don’t have to exactly measure out on each side of the page, it should not be obvious. Step back from your Web page and check if you have too many items on one side or if the size of some of the elements can be reduced or enlarged to make the page balance more.

Arrangement

How the visual elements on the Web page relate to each other and how they are lined up on the page. When designing your page, you should make sure you use rulers or guides to align your page elements. I typically design my pages using Adobe Photoshop before working with any HTML.

Repetition

The art of repeating elements like colors, logos, and navigational placement on a Web page. By repeating elements, you provide the user of your site with a common theme throughout your site. If you decide to move your menu to the opposite side of the next page the user clicks on, it will confuse them and they may leave your site. Repeating the same color scheme, logos and navigation help to keep a consistent look for all of your Web pages throughout your site.

Visual Direction

The way the user’s eye moves through the Web page. Items with more emphasis and contrast draw the user’s eye first, then the next item and so on. You want the user’s eye to flow from one element to another without having to jump around the screen. One common way is to design the Web page so that the user views the items on the page in a “U” shape. Here are some ways to control Visual Direction.

  • When laying out emphasizing elements on the page, think about how your eye flows through the page.
  • Group similar items together (all navigation should be in the same area).
  • Think about the visual message you’re trying to communicate and have the most important element lead your eye through the page.
  • Be careful about using arrows, pointing fingers, and curvy or sharp lines because they may affect the Visual Direction.
  • Direction can also be affected by verbal elements such as text and navigation. Think of text as a piece of visual art.