4 tips for creating great page layouts
by Jamie Kiley

Back to design tips | Reprint info

When it comes to laying out the content of a web page (especially a site's home page), many people aren't sure how to go about it. It's difficult to create a layout that is attractive, well-organized, and easy for visitors to absorb.

But don't give up hope! Here are four top tips to help you in creating effective layouts:

1. Don't center everything.

Centering all the content tends to make a page look more disorganized, since there isn't strong alignment on either the left or right margins. This gives the page a "scattered" appearance.

Centering also tends to waste space. For an example, take a look at this Chinese restaurant's website: http://www.hsus.com/.

In this example, the content is placed right in the middle of the page, which leaves empty pockets on both sides of that space. It would have been more efficient to left-align the content and add an additional column on the right. The new column could be used to display more content, which would prevent visitors from having to scroll down so far to read everything on the page.

2. Use contrast.

Employing contrast will help organize your page as well as make it more attractive. You can do this by using contrasts in color, size, value (which refers to the relative lightness or darkness of an object), and weight. A good example is:

http://www.csszengarden.com/?cssfile=/024/024.css&page=0

Notice that the heading of each section of the page is bolded (which gives it a heavier weight than the text underneath), in addition to being a bigger size and a different color than the rest of the copy. This helps make the page look very organized and easy to scan at a glance.

3. Visually distinguish each section of the page from other
sections.

You can do this in several different ways. First, you can use different background colors to separate various parts of the page. For an example, visit http://www.real.com/realplayer.html. Notice that half of the page has a white background and the other half has a grey background.

Second, you can use thin dividing lines to distinguish different sections. eDEVcafe (http://www.edevcafe.com/) uses this technique to good effect (it also uses contrasting background colors as mentioned above).

Placing a border around various sections is also a good way to employ the concept of dividing lines.

Finally, you can use blank "buffer zones" in between various sections in order to separate them. This is similar to the concept of dividing lines, except you create an invisible line by physically separating two parts of the page, rather than using an actual line.

4. Keep information tight.

In order for a layout to really be effective, you need to be as efficient in your use of space as possible. The following site is an example of what happens when a site doesn't use space efficiently:

http://www.atlantarestaurants.com/minipage/frog&peach.htm

On this site, the entire right half of the page is wasted.

Although you don't want to make your pages look crowded, DO make good use of all your screen real estate. Use multiple columns in order to display information side by side.

Also, avoid stacking elements in a narrow column on top of each other if it means leaving blank space to the side. For example, in the site listed above, the two photos in the middle section of the page should be displayed side by side instead of on top of each other.

If you keep these four principles in mind, you'll be well on your way to creating great layouts.

Back to design tips | Reprint info