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?
-> MEANINGFUL HEADLINE
-> STRONG IMAGES and GRAPHICS
-> CALL TO ACTION
-> CLEAN, ORGANIZED LAYOUT
-> SIMPLICITY
-> TEASERS
Breakdown of the most important elements of the homepage
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 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
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
-
Is your website user friendly?
-
I'm a freelance Web Designer and created this lens to help you improve your website so it can be more user friendly. The more user friendly, the longer people will stay on your website and the more likely they are to bookmark it and send to their fri...
-
How to get a custom website for your business on a budget
-
I'm a freelance Web Designer and created this lens to help you in the process of getting a website for your business. Including the planning stages, how to shop for a Web Designer, how to get an accurate quote for your website and insider tips! Ther...
-
10 Best Things You Can Do on Your Business Website
-
I'm a Freelance Web Designer and created this lens to help you make good decisions about what should go into your business website. Over the years I've come to see what my successful clients all have in common, especially when it comes to how they wa...
-
10 WORST things you can do on your business website
-
I am a Freelance Web Designer and created this lens to help people avoid the mistakes many make on their business websites. If your site is selling a product or service then you want to make sure your site is user friendly. The last thing you...
Latest from my blog
Fetching RSS feed... please stand bySign my guestbook
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
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.
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.
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!
MsMorrison wrote...
Hello Shannon! Thank you so much for dropping by my lens. Thanks for the advice on how to make a good site!


