What Goes Where on Your Home Page?

There’s a lot of important information to include on your home page: your brand, site navigation, search, email sign-ups, main content, links to social media, your blog roll if you have one, testimonials and other social proof of the quality of your work. The list can go on and on.

So, how do you know what goes where?

A good place to start is with a proven template. I’m a big fan of StudioPress, if you’re on a budget and can’t afford a custom design. These templates include the underlying Genesis framework, which takes WordPress one step better and protects your site from hacking—a liability of WordPress open-source code. With the help of a good web developer, you can customize the templates to your own taste. But the basic structure provides a sound foundation.

Whether you choose an existing template or work with a designer, here are six key points to keep in mind for home page design:

  1. Place your brand in the upper left corner, unless you have a good reason to do otherwise. Users tend to look at the center of the page first, then the upper left corner. Web usability studies that measure eye tracking show we spend a fraction of a second glancing at the middle of the page, then move to the upper left. This has a lot to do with what we’re accustomed to finding: a logo in the upper left that identifies the site. There are other viable options for logo placement, as long as your brand is easy to spot at the top. Some web designs are now using full banner headings, like a newspaper. On my own site, my logo stands out from a clear field of white across the top of the page.
  2. Put the most important information at the top. Users look for a hierarchy of information, going from top to bottom. This just makes sense. When a page loads, you see the section “above the fold” first—the top chunk of the webpage, just like the top half of a folded newspaper. So decide what’s most important and be sure that’s at the top of your homepage. Use consistent styling of headlines and subheads to help users determine priorities.
  3. Place navigation in a horizontal bar across the top of the page. In the past, many websites vertically stacked the nav bar in the left-hand margin, but this set-up is not as flexible as a horizontal navigation with drop-down tabs. Whatever you do, never use vertical navigation with sub-navigation that shoots sideways across the web page. It’s clunky, blocks important content and is just plain confusing.
  4. Explain what your site is all about, front and center. When visitors come to your site, they want to know, within a few seconds, what it’s about, whether it’s what they’re looking for and what’s in it for them. Don’t make them search for this information. Key messaging, with informative, skim-friendly headlines and subheads, should make up the bulk of your homepage above the fold.
  5. Use compelling graphics, but don’t overuse them so they compete for attention. Just as you establish a hierarchy of text with headings and subheads, do the same with images. Your most important graphic should be the largest. Other supporting pictures or icons should have some uniformity of size and placement so the user intuitively understands their relationship to the text and relative importance.
  6. Place supporting content and links in a side column or in multiple columns below the fold. How you do this depends on the template you’re using. Again, however, think in terms of priorities. What do you want the user to see first? second? third? That’s the order of placement. If everything you want to include seems equally important, take a step back and rethink your priorities. Who is your ideal client and what’s most important to her? For example, do your latest blog posts establish your expertise, or would your visitor rather see testimonials from clients about your work? Put yourself in her shoes to determine your hierarchy on the page.

For more about good home page design, check out these links:

6 Design Tips That Will Have Your Audience Licking Their Screens—Copyblogger

Design 101| 7 typographic Resources, and 1 Type Joke—Big Brand System

F-Shaped Pattern For Reading Web Content—Jakob Nielson’s Alertbox

Marketing consultant Evelyn Herwitz loves to help you tell a great story about your great work. She specializes in search-optimized web content that positions you as an approachable expert in your field and helps you grow your business. Contact Evelyn for a free half-hour consult for new clients.

Tags: , , ,

Leave a Reply