Your homepage is the big, shiny storefront window display of your online business presence. If you want people to come inside and see what you have to offer, you have to show them something that grabs their attention and inspires them to want to learn more about you.

A bunch of fancy-pants marketing researcher types did a number of studies a few years back to determine what copy and design elements elicited the strongest response from website visitors. They found that the most successful home pages all featured 7 key elements that, when used in combination, got the highest response rates from visitors.

(And I say “response rates,” I mean people who click deeper into the site and take some sort of action, whether it’s making a purchase, signing up for a mailing list, or commenting on an article.)

Here’s what those 7 key elements are:

website homepage design tips#1: An eye-catching headline

Your headline is the most important element of your site.

These are the words that attract your visitors’ attention, convey the value of your offer, and convince people to stay on your site and learn more about you.

You want these words to be the first thing your visitors see, so make your headline stand out. Write it in a larger, bolder font than the rest of your copy. You should also consider using a different colour than the rest of your copy so it catches pfeople’s attention right away.

Here’s an example of a great headline on a website geared to coders who work with JavaScript…

homepage copy headline ideas

I’ve heard enough coders complain about JavaScript to know that they would very much appreciate a tool that makes it “suck less.”

#2: Compelling copy that’s all about THEM

Your “copy” is simply the words on your site, including your headline and everything that follows. These words need to…

  • relate to your visitors
  • identify with their problems
  • present your products as a solution
  • establish your credibility and reputation
  • lead them to a powerful call to action

That’s a lot to accomplish—which means you’ll want to choose these words carefully.

You’ll get the best response from your visitors if you speak to them directly and focus on their wants and needs instead of on yourself. For example, write: “Wrap yourself in the luxury of cashmere” instead of “We sell high-quality cashmere sweaters.”

People will be more likely to buy from you if you paint a clear picture that helps them envision how their lives will be improved if they take you up on your offer.

Here’s the copy that Lulu.com uses to promote its online publishing service. I think this copy does a great job of describing the benefits of the service to would-be writers:

web site homepage design tips

As a writer, I can say that I would very much like to “free my ideas and bring my brilliance to life.” (And do you see how they cater to the ego there? Not that we writers are an egotistical lot… 😉 )

#3: Your product shot

Your product shot is a professional image that offers a visual representation of your offer.

For example…

  • If you’re a tai chi instructor, the image could be of you teaching tai chi
  • If you’re a jewelry artist, you could use pictures of your latest pieces
  • If you’re an author, you could post a picture of your latest book

Your product shot should complement your copy without distracting from it. The images used in the Lulu.com page shown above do a great job of this. Check out the horse and the doves — they give the feeling of freedom and imagination without pulling your eyes away from the copy.

#4: Testimonials

If you haven’t been collecting testimonials from your customers then you should definitely consider doing so. Praise from happy customers is a huge credibility booster. Most people are happy to give kudos to businesses that offer great products or services, so please don’t be shy or worry that you’re pestering your customers by asking them to write a short note recommending your business.

Here’s a website that does a good job of showcasing a testimonial:

homepage design tips

The website further enhances the author’s credibility with the logos of all the media outlets that have done stories on him, running along the top of the page.

Clearly, people are paying attention to what this guy has to say — which makes me more inclined to learn more about him.

#5: Your call to action

The whole purpose of your website should be to get people to DO something—such as watch a video, sign up for your newsletter or opt-in offer, or call for a free consultation. Your “call to action” is where you tell them exactly what you’d like them to do.

Make sure your call to action is easy for people to see and understand. Use larger fonts and formatting to make it stand out from the rest of your copy so that people who only scan your page are able to easily find it.

Let’s look at the “Four-Hour Work Week” example again:

homepage design tips

You’ll see how the main call to action is “Start Here,” where the site encourages people to sign up for his newsletter and receive some interesting freebies.

Now, you may think that “Start Here!” done in all-caps looks a little “shouty.” If that’s not your style, feel free to tone it down. Don’t use all caps. Ditch the exclamation mark. Use Helvetica or some other clean and readable font and invite people to take action instead of urging them.

Just make sure to include enough visual emphasis on your call to action so that it stands out from the rest of the copy and catches people’s attention. And don’t forget to let people know how they’ll benefit from following through on that action.

#6: Your Opt-in Offer

Studies show that it takes a minimum of six or seven points of contact before people feel comfortable doing business with you online. If you use an opt-in form to collect their contact information, you can then use email to build a relationship over time.

The best way to encourage visitors to opt into your list is to offer an attractive free giveaway, such as a downloadable report or ebook.

Here’s an example of a site that’s using an opt-in to good effect…

home page design tips

Good.is offers news about organizations and people who are working to make the world a better place. In the upper right corner of the site you’ll see a yellow box that says, “Get the Daily Good” with the benefit being, “One good thing a day.”

Many people who are familiar with the site and enjoy the kind of news it offers will be happy to hand over their email address in order to receive daily stories about people working to effect positive change in the world.

#7: Social Engagement Opportunities

Your homepage should provide people with the opportunity to engage with you via their favourite social networking tools, such as Facebook, Twitter, or LinkedIn. The more opportunities for interaction you provide, the more people will engage with you. It’s that simple.

Fluevog does a great job of including these opportunities on its site:

homepage design tips

As you can see, there’s a Facebook widget that allows Facebook users to “Like” John Fluevog Shoes on Facebook without having to leave the page. Then, at the bottom of the page, there are clickable icons that encourage people to connect with the company on Facebook, Twitter, and YouTube.

… So those are the seven key homepage elements that ensure your website does the best job of capturing your visitors’ attention and getting them to engage with you. If you’re missing any of them, your website may not be performing to its full potential — so it’s a good idea to put them on the “to-do” list for your next website update.

Got any other website, social media, or online writing-related questions? Leave them in the comments and I’ll make them the focus of an upcoming article.