By mastering the rules below, you can create more effective web pages that are more helpful to visitors, keep them around longer, and increase conversions — which ultimately is what it is all about, right?

One of the primary jobs of a designer is to create an immediate sense of what is important on a page.  This is referred to as visual hierarchy.  A designers toolbox for visual hierarchy consists of size, color, and placement.  These are your most basic tools for organizing the content of a website.

Size is simple.  The larger an object is, the more importance the user will naturally place on it.  The smaller it is the less importance it will hold.  As a designer make sure the size of your content matches the importance you want the reader to place on it.

1. The main purpose of the page is always the largest in size, and
2. The call to action is not too small, usually at least medium to large.  You don’t want it to get lost amidst the rest of the content.

Color is a little more complex because you have to take into account style and coordination. In general, you don’t want to use a bright bold color within a site made of subtle Earth tones, UNLESS you want to highlight a particular element and elevate it within the visual hierarchy.

There are no hard-and-fast rules regarding which colors do what because every website will have a different color scheme.  Really, what it comes down to is contrast.  The higher the color contrast that a particular element has compared to the overall site the greater importance is placed on an element.

Finally, we have Placement.  Obviously, where an element is placed on a page will help determine it’s importance.  Since we read from top to bottom and left to right, then the most important items will be at the top left and the least important in the bottom right.

Science gives us an even more defined understanding of how a reader looks at a page.  UI studies of user eye movement show that a visitor to a website follows a very distinct F pattern when scanning a page.

This means that they first read horizontally across the top, then scan down the left side where they generally read another subheading across and then scan down the left side more.  Thus forming an F shaped reading pattern.  Of course, this is just a general pattern and will depend much on the layout of the page, but you get the idea.

These eyetracking heatmaps illustrate the F shaped pattern that users generally scan a web page in. http://www.useit.com/alertbox/reading_pattern.html

I don’t think this means you need to conform every page of every website you build to this pattern.  It does mean that this is how humans will naturally flow through a page, so you can choose to either work with that flow, or take specific measures to break it.

Through understanding these basic design rules and building your websites around them, you will find that your work will have a higher impact on your visitors and increase conversion rates.  Ultimately, your sites will be more useful to your users because they can easily find what they are looking for, and the call to action will be clear.

What about you?  How have you effectively used the above design practices in your websites or how have you purposefully broken them?