Skip to navigation | Skip to content

Share your knowledge. Make a difference.

How to Create an Attention Grabbing Homepage

1 - I can do better 2 - Jury's out 3 - Pretty darn good 4 - Splendiferous 5 - Awesometastic (by 16 people)   Your rating: 1 - I can do better 2 - Jury's out 3 - Pretty darn good 4 - Splendiferous 5 - Awesometastic

Ranked #3267 in How-To, #32285 overall

Rated G. (Control what you see)

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

Resources to help spice up your homepage 

Beautiful stock images and videos just a click away

Big Stock
Affordable stock photography with a large database of images.
istock
Large database of affordable stock photos, illustrations and videos
Copyblogger
Excellent articles on writing good copy

Web Design That's Good For Your Business
www.shannoncdesign.com

Get more useful tips for your website 

My lenses on business websites

Latest from my blog 

Loading Fetching RSS feed... please stand by

Sign my guestbook 

Lensmaster

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

ReplyPosted October 28, 2008

WilliamW wrote...

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.

ReplyPosted September 16, 2008

annetteghallowell wrote...

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.

ReplyPosted August 07, 2008

Rob3 wrote...

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!

ReplyPosted July 31, 2008

MsMorrison wrote...

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

ReplyPosted July 18, 2008

 
1 of 3 pages

My Twitter 

    Follow ShannonC73

    powered by Twitter
    X
    ShannonC

    About ShannonC

    I am a freelance Web Designer and Artist located in Vancouver B.C. I've created several lenses sharing my industry knowledge to help businesses with their websites and have plans for more.

    To view my online portfolio for web design visit:
    www.shannoncdesign.com



    ShannonC's Pages

    See all of ShannonC's pages