Get More From Your Site’s Visual Acreage58
One of the most important, and sometimes most difficult, parts of web design is deciding what to do with the space that is given you.
Usually, you have around 960 pixels in width and an indefinite height to work with, and it often feels like too much or too little. It’s very valuable when used correctly, but when used incorrectly it can destroy a website’s potential.
There are similarities in real estate. Each piece of property has a different value, some high and some low. Using a beautiful piece of property in the wrong way can diminish its value. By comparing page area in a website to real estate, we can learn a few principles that help us utilize the “property” of a web page to the maximum advantage.
The location of a piece of property is probably the most important factor in determining its value. Prime locations are more visited and more public.
In web design, location is important too. There are several different page location factors that affect your content and how it is viewed.
Above the Fold
You’ve probably heard this term before, borrowed from newspapers and similar print media, and it simply means the area that is above the cutoff at the bottom of your viewer’s browser. Obviously, this is the part of your site that the viewer will see first.
This is the first impression that your viewer has of the page, and you need to take advantage of this area to show him/her that your site is worth taking time to look at. This is a good place to put attention-catching images and copy to keep the visitor reading (or looking).
The yellow line in these image above is the “fold” line. You can see how the designers strategically put interest-creating information above the fold and have content cut off partially by the fold to induce the reader to scroll down and read more.
The old rule that visitors will not scroll unless you invite them to do so has recently been contested, and there is definitely no exact location you can judge the fold by, but the principle of putting the most important content higher up on the page still applies.
Since most of your site visitors will read left-to-right and top-to-bottom, it is important to arrange your content in a way that will follow their attention pattern. Their eyes will probably scan your page like this:
The person’s primary attention will go to the upper left, and then consecutively less attention with each area until they focus on the last area in the lower right.
The most important “properties” on your web page are the upper left quadrant and the lower right quadrant (i.e. where their eyes stop). Use this to your best advantage by placing content accordingly. Your most interesting content, particularly headlines and large header images, should go on the top right.
This principle is also known as the Gutenberg Rule. You can read more about it on blog posts such as this post by 3point7 Designs.
In real estate, the zoning of a property designates what the property can be used for. Thus, residential zoned property can only be used for residential development, commercial property can only be used for commercial development, et cetera.
Similarly, in web design, your page has certain pieces of “property” that are “zoned” for certain types of content.
Readers Like What They’re Used To
A lot of content has standard, or at least commonly used, placements. We can think of this as the “zoning regulation” for this type of information.
The web page’s branding and navigation is nearly always in the upper right, whether the navigation is horizontal or vertical. The upper right corner is usually home to a search bar and icons linking to the RSS feed or Twitter page. People become used to finding certain things in the footer of a website, e.g. Twitter and Facebook, contact information, often a few links that the site owner feels are important.
For example, on Web Designer Depot, each feature is in a place where you could reasonably have guessed it would be.
If a site visitor can’t find something where he/she thinks it should be, he won’t stay on your site for very long. The frustration of looking for something that may not even be there is familiar to us all, and the easy option is to go back to Google and start your search again.
One of the most important ways in which “zoning” applies is in ad space. Advertising “real estate” is for advertising! Nearly all blogs and similar sites relegate the right column of their site to advertising.
If you bury content in the middle of advertisements, it will most likely be missed by your site visitors. It is a good idea to stick with the standard “zoning.” Leave things where viewers expect to find them rather than placing the advertising elsewhere and putting content in the right 1/3 of your website. Since readers are used to seeing only ads in that area, they won’t get the most out of your site.
Last but not least, the size of a property helps determine its value. Making a particular element or feature of your site very large will undoubtedly draw quite a bit of attention. Big images, such as blog headers, are like a wide-screen TV, and they grab attention whether the reader means to be interested in it or not.
Recently, there has been a major trend towards huge type. With font replacement tools such as sIFR, Cufon, and @font-face, you can use beautiful fonts that are worth using a lot of prime website real estate for.
More and more people who aren’t into typography are beginning to recognize the beauty of letterforms, so using quality, large typography is a great way to give importance to a headline, even with a wide target audience.
If you don’t want to make the actual element too large, you can leave a lot of white space around it. Thus, the element “owns” a large amount of “property,” and takes over your site visitor’s attention.
In the site above, you can see that, although the text logo at the top is not very large in size, it “owns” quite a bit of “real estate” on the page. There is a significant amount of space surrounding it before any other content begins or elements appear. Thus, it still is the obvious header and focal point.
So, by comparing the principles in real estate to web design, we actually learn how to better manage our pages. Now we can use the canvas of the web page more effectively.
Here’s a quick run-down of what we’ve learned from the real estate market:
- Keep the most important information in the prime locations
- Place the information where it belongs – “zoning”
- More “real estate” means more important
Hopefully these guidelines will be helpful to you in your next web design project! What do you think of them? Are there any other tips you’d like to share about getting the most out of a page?
Enjoy this post? You should follow me on Twitter!