How to Create an Attention Grabbing Homepage
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
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.
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 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.
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
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.
1. Choose a design from our gallery
2. Customize the design with a personal message
3. Enter recipients address and send
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:
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:
Resources to help spice up your homepage - Beautiful stock images and videos just a click away
Web Design That's Good For Your Business