ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

How to Create an Attention Grabbing Homepage

Updated on July 16, 2008

A look at the anatomy of an effective homepage

Your homepage is the front door of your website and curb appeal is everything. The purpose of your homepage is to give an overview of what visitors can expect to find in your site. If it doesn't grab their attention they will hit the back button.

This lens will go through the do's and dont's in homepage design for business websites and take a closer look at what makes an effective homepage.

The main purpose of a homepage

The homepage tells visitors who you are and what they can expect to find in your site. Therefore it needs to be strong, make a statement and grab our attention. In addition your homepage needs to be simple, as the homepage is simply on overview of what's inside.

A website can be strong and make a statement even with a soft subtle design. What matters is that it appears confident, it shows that the product or service advertised is of quality and can be trusted. It's important that the homepage makes it clear you believe in what you are selling.

What makes a strong, effective homepage?

Even if someone isn't looking for what your offering, a strong homepage with invitations to look further may get them interested and even result in a new customer. How to achieve this:

-> MEANINGFUL HEADLINE

-> STRONG IMAGES and GRAPHICS

-> CALL TO ACTION

-> CLEAN, ORGANIZED LAYOUT

-> SIMPLICITY

-> TEASERS

Breakdown of the most important elements of the homepage

MEANINGFUL HEADLINE

The most important aspect of marketing any product or service is its U.S.P - Unique Selling Proposition.

So often I see business websites that use "welcome to our site" as their headline or opening statement and nothing else. This has absolutely no meaning, and forces the visitor to have to dig through your content to figure out what the site is about.

For best results, sum up your product or service in a short opening statement.

For example (from www.basecamphq.com):

"Get Projects done. Basecamp is the smarter, easier more elegant way to collaborate on your internal and client projects."

This one sentence gives you a general overview of what their product is and its benefit. Make your opening statement strong and meaningful and visitors will want to explore further.

STRONG IMAGES and GRAPHICS

If you do a quick Google search on any given product or service you'll see many sites that just have text on their homepage, or tiny little images, images that aren't related to the business or worse, really terrible photography.

A large, beautiful image of your product proudly displayed on your homepage speaks volumes about your own opinion of what you're selling.

It also allows us to see your brand, the packaging and other elements that makes it special, taking away some of the mystery.

If your selling a service, use images that are related to your service, or a meaningful metaphor. Photography isn't always necessary on the homepage, sometimes nice illustrations, interesting text treatments or just a good design is all you need. The key is to make it interesting and meaningful.

CALL TO ACTION

This is asking visitors to do something, inviting them to go here, look there, read this. A good call to action will get visitors to look further into your site. Avoid passive call to actions, for example:

Passive: "To order this product please click here"

Better: "Order now"

Order now is simple and effective, you'll get better response from telling visitors what to do (in a friendly way) rather than asking.

CLEAN, ORGANIZED LAYOUT

You can have a clean layout even in a grungy or loose design. This just means things line up nicely, text and images don't overlap or spill out of boxes, everything is uniform and flush. Organize content with the most important things getting more screen real estate and the lesser things as teasers.

Make it intuitive, think of how a visitor would naturally scan the page. A well organized layout not only look better it's more comfortable for the viewer.

SIMPLICITY

A homepage is simply an overview of what's inside and shouldn't be a dissertation on your company and crammed full of images and content. Visitors don't spend long on the homepage, they go there to see where to go next. Therefore regardless of how large your site is the homepage needs to be simple. Use good headlines, short blurbs and relevant images to help guide visitors around your site.

TEASERS

Teasers are most effective for websites with a lot of information and websites that sell products. They are little enticers that tell of a current promotion, recent press, featured product, bestselling item or links to articles. Anything you feel will be valuable to visitors or of interest, place it on the homepage with a few words, small image and link to see more.

Homepage comparison

Weak vs. strong

I quickly mocked up an example of a strong homepage and a weak homepage for comparison. I invented a tea company that I named "Tea Company" (not very original I know) and did a quick Google search for sites selling tea for research.

I created a typical, standard-issue homepage based on the common elements I found in my search. I then created a homepage that is more enticing and effective to compare so you can see why it works.

On the left: weak, dull homepage, on the right: strong, confident homepage

The one of the left is what I call the-good-enough homepage. Why it's weak:

1. Boring design

2. No call to action

3. Meaningless headline

4. Tiny images thrown in

5. Way too much text for a homepage

Nothing stands out to grab the viewers attention to say "Hey we have a great product here! Take a look around".

Let's take a closer look at the stronger homepage

© Copyright Shannon Chiarenza. Contact me for pricing on this design

Why this works

The use of a large visual creates interest and displays the product prominently showing off the logo and packaging. I also used a call to action by asking "choose your cup of tea" with a menu to pick from different varieties, inviting visitors to look up products.

In addition there are 3 teaser boxes that showcase a particular tea, mentions a current promotion and one offering articles on the different variety of teas. This creates more choices for interacting with the website. The overall design is more organized and simple. Visitors are more likely going to click "choose your cup of tea" out of curiosity if nothing else. Once they are in the website, good writing and smart design will help keep them interested.

There are hundreds of different ways this fake tea company's homepage could be designed. This is just one example to illustrate how a confident homepage looks, and give you some ideas for how you can improve your own homepage.

More ways to maximize your homepage

Provide clarity

There are a several things you can use on the homepage to create interest, or to clarify your service. Here are a few examples:

3 STEP PROCESS

This is an effective way to explain how to order from your site or how your service works.

For example:

1. Choose a design from our gallery

2. Customize the design with a personal message

3. Enter recipients address and send

VIDEOS

Videos can be used in a number of ways, for example:

  • Explain the product or service
  • Explain how the site works
  • Meet the owners
  • Video recorded testimonials
  • Show the plant, office, inside of the store, farm or how the product is made. Having a video showing how you create your product gives the viewer more appreciation for your craft.

Example of a homepage that uses both the 3 step method and a video:

www.realasponse.com

SLIDESHOWS

Slideshows can be used to showcase certain products, mention current promotions, current events and news. There are several ways to use a slideshow to create interest.

Example of one way to use a slide show:

www.barackobama.com

Web Design That's Good For Your Business

www.shannoncdesign.com

Sign my guestbook

    0 of 8192 characters used
    Post Comment

    • coolaunt profile image

      coolaunt 4 years ago

      You write in a way that keeps the reader interested. I think I could learn a lot from you. I have already liked a couple of your lenses and will read more.

    • SciTechEditorDave profile image

      David Gardner 6 years ago from San Francisco Bay Area, California

      Excellent lens! I've liked, thumbs-upped, favorited, and lensrolled your masterpiece! Congrats on a great job!

    • aesta1 profile image

      Mary Norton 6 years ago from Ontario, Canada

      This very useful for me. I just have to work on my sites.

    • Wendy L Henderson profile image

      Wendy Henderson 7 years ago from PA

      Great information. 5 stars!

    • Deeringboy LM profile image

      Deeringboy LM 8 years ago

      Hello Shannon, I enjoyed your lens. Makes a lot of sense to me. Thanks!

    • profile image

      anonymous 8 years ago

      This info is so helpful. I was definitely blown away when I looked at the "weak" homepage vs. the "strong" homepage. Before I even read anything, I knew that the one on the right was the strong one. You've really hit the nail on the head with this advice. I will definitely be using your lens as a reference.

      - Johnny

    • profile image

      WilliamW 8 years ago

      Good Information! I wonder though, how would a network marketer use a large picture for their homepage when they can't or don't want to use the MLM stock product photo's. Or if they are trying to brand themselves as a business coach or builder.

    • annetteghallowe1 profile image

      annetteghallowe1 9 years ago

      Thanks for reminding me that it is the content that is most important. I am struggling my way to publishing my first web site. This will be a great resource for me. 5* and a new favorite.

    • rob-hemphill profile image

      Rob Hemphill 9 years ago from Ireland

      This is such good information - many of us need all the help we can get on design, and you certainly deliver! Thanks for visiting my Wine lens. 5* and favorite!

    • profile image

      MsMorrison 9 years ago

      Hello Shannon! Thank you so much for dropping by my lens. Thanks for the advice on how to make a good site!

    • Nigel-Lew profile image

      Nigel-Lew 9 years ago

      Hey, great lens! You do really good work. I like your portfolio.

      Nigel

    • Gimmesome LM profile image

      Gimmesome LM 9 years ago

      Excellent advice, Shannon. I also recommend that everyone take a look at your Web design site. Your layouts and designs are truly inspired (and inspiring)!

    • RaintreeAnnie profile image

      RaintreeAnnie 9 years ago from UK

      Really useful and interesting information Shannon. Thank you for sharing. Adding to faves :)

    • aka-rms profile image

      Robin S 9 years ago from USA

      Thanks for some really useful information. these tips could also be used when designing a Squidoo lens.

    • profile image

      anonymous 9 years ago

      That was a very effective comparison of the two sites. Something I have caught myself doing is choosing to do business with someone based on the design of their website. Certain fonts, colors, layout give a good impression even if the company is inferior to one with a sloppy website - and still we know that ugly websites resonate with some users.

      I recently choose to buy a service from a company and then days later couldn't understand why I made the decision because they clearly did not provide what I had been looking for. I went back to my bookmarks and found I had picked the best looking site, not the one that offered what I needed. Ops!

    • religions7 profile image

      religions7 9 years ago

      Great lens, but the homepage IS NOT the first page most people see when they enter your site - at least with proper SEO it isn't. Still, I agree, it's a page that should have the qualities you list here (or most anyhow).