How To Develop A Homepage Layout That Sells

Posted on 12. Apr, 2010 by D Bnonn Tennant in How To

You couldn’t have failed to notice that pretty much every website on the face of the planet has a homepage, and that every homepage uses the same basic layout. Masthead at the top, navigation underneath and/or along the side(s), main content taking up most of the page, and a footer at the bottom.

It’s common because it works. It differentiates the content that needs to be differentiated, it presents it in a logical order that follows how people read and interact with websites, and it’s relatively simple to code. In fact, HTML5 encourages you to code this way.

If you want to succeed as a web designer, you should stick to this paradigm.

The trouble is, although you know you need a header, navigation links, main content and a footer, it’s pretty hard to decide exactly where to position each, what margins and padding and fonts and colors to use, what items to include or exclude, and all those other details. You need a process you can rely on to ensure that you meet your client’s needs, and aren’t just shooting in the dark. Here’s mine:

1. Determine The Homepage’s Objective

Design is the art and science of creating and arranging elements to achieve an objective. On the web, that objective is usually to sell. That doesn’t necessarily mean making literal sales—but the objective of the site you’re designing is almost certainly to sell people on something. If it’s not to have them plonk down cash, it could be to have them subscribe or comment or share or learn—or heck, just to remember.

The site’s objective will point you toward the homepage’s objective. If the site’s objective is to get users to subscribe to a newsletter, then the homepage’s objective might be to convince them to click through to the signup page. If the site’s objective is to get people to buy widgets, then the homepage’s objective could be to inform them about the widgets, and entice them to view an online shop.

If you don’t know your objective (or objectives), you can’t even begin the design. Design is always a process heading toward a goal. Without the goal, there is no design. So your first step is to find out and then clearly state the objective of the homepage in specific, factual language.

2. List Every Element That Directly Contributes To The Objective

Once you know the page’s objective, you can pretty easily figure out what its most important elements are. If something doesn’t directly contribute to the objective, then it’s not as important as something that does.

For example, if the homepage’s objective is to get users to request a free quote for a service, then the following items are of great importance:

• Any written content (copy) which explains the service they’ll be getting a quote on, and why they need it.
• Any headline which draws them into the copy.
• Any call to action which directs them toward the goal (whether this goes directly or indirectly to the request page).
• Any images which demonstrate the service, such as before/after shots.
• Any testimonials or reviews demonstrating the value of the service.
• No doubt the list could go on.

3. List Every Element That Doesn’t Directly Contribute To The Objective

There are plenty of other things you must include on a typical homepage which support its objective without directly contributing to it. For example:

• The company and/or product logo.
• A tagline or blurb.
• Navigation links.
• Basic copyright and contact information.

No one is going to buy from an anonymous website; and no one is going to use a site without navigation either. Knowing the objective of the homepage simply allows you to prioritize the elements in a logical way—you don’t want to exclude necessary elements just because they don’t directly contribute to the objective.

4. Arrange The Critical Elements

Using whatever method works for you (I like squares of paper with names written on them) get all the homepage’s elements together. Put aside the ones you’ve determined are not critical to its objective. Now, experiment with arranging what’s left, focusing on the best way to guide the user to the objective. You might call this wireframing, but it should involve experimentation with color and images if appropriate, which most wireframing doesn’t seem to for whatever reason.

Don’t think that the first layout you bang out is the best one. There are lots of different ways to skin the average cat. Here are some principles to keep in mind:

Natural Reading Patterns.

Unless you’re in quite a foreign country, people read from left to right and top to bottom. More specifically, they scan in an F-shaped pattern, taking in the headline, then the stuff along the left of the page, then the lede, and then some of the first words along the left margin. So positioning your headline on the right, for instance, is not necessarily the best option. Don’t be afraid to break the rules, but be aware of what that will mean, and have a good reason.

Typography

Let me say it again. Typography. It’s not choosing a font. Typography is nothing less than the science of presenting written information in the most readable, useful way. Web design is 95% typography, so if you aren’t up to scratch here, it’s time to start swatting. Choosing the best measure, leading, color, font-sizes, body and heading styles and so on is all very, very important.

Colors

Many wireframes don’t contain color. Sometimes it isn’t necessary—but often it is, because the use of color can dramatically change the priority of elements. On a black-and-white page, a large headline will stand out the most against normal text. But if you then highlight some of that text in red, that’s where your users’ eyes are going to be drawn. You need to be able to select colors which are appropriate, combine them into a palette which is interesting without being too varied, use this to draw your reader’s attention to the right elements, and then guide him to the objective.

Images

Like colors, images are very attention-grabbing. Use them wisely. “Hero shots” should be positioned high on the page, with the hero’s eyes looking toward an important element—because people always look to where other people are looking, even if they’re in a picture. Supplementary images shouldn’t be so large or colorful that they will distract the reader from the objective.

Negative Space

A webpage is like a meal. The elements on it are courses. Too much space between them and your reader’s eye gets bored and leaves for a better restaurant. But too close together, and he can’t take it all in—he doesn’t know what to eat first, so he gives up and again goes to a better restaurant. You want your whitespace to emphasize the elements on the page, just as a well-spaced meal will let your palate savor each course. The elements should be natural places for your reader’s eye to rest, in a natural order. Using negative space to differentiate elements is almost always better than resorting to putting boxes around everything.

5. Arrange The Non-Critical Elements

Now that you have a robust layout that will guide your user unerringly to the page’s objective, you can start adding in the additional elements you know need to be included. The same principles apply as are listed above—plus a healthy dose of common sense. Obviously you don’t want to clutter the layout at this stage, and neither do you want to draw emphasis away from the critical elements. It’s easy to get scared and “make the logo bigger”—but chances are it’s just fine sitting there unobtrusively at the top. Anyone looking for it can’t miss it, and it’s not intruding on getting your user from A to B. The same goes for navigation. Just don’t make text too small in an effort to make it less obtrusive. It still has to be readable.

You’re Done!

Once you’re happy with your layout, get it signed off and coded up. Then the whole process can begin again – because now you need to lay out the commitment page, where your user gets taken after deciding to fulfill the homepage’s objective.

Image Credits:

• Skype
• Mixx
• Lilit
• Telerik UX

Share With Your Friends

Tags: How To, Tips, Web Design