Why Should I Focus On My Home Page?

Your home page is arguably the most important page on your website.

Why? — Because it’s most likely to be the first page that your website visitors will see when they land on your website.

I think we can all agree that the first impression matters a lot – right?

Your home page sets the tone for your business like a first impression – so makes a lot of sense to ensure your home page works effectively.

Imagine this:

You go into a shop or an office, and you are immediately greeted by a customer service representative.

The customer service rep acted as a guide by helping you navigate the store/office and direct you to the person or product that can solve your problem.

The customer service rep did the leg work for you by showing you where you should be looking to find what you need.

The process and experience were enjoyable for you — you didn’t need to waste time and struggle to find what you’re looking for.

When a customer visits your website, he/she is “walking” into your store or office.

Wouldn’t you want to give them the same level of experience as they would receive if they walked into your physical store or office?

Don’t you just hate it if you had to struggle to look for where a product or information is located?

BUT — there is ONE problem — there is no live person to greet your visitors when they land on your website!

So the question is: “How can I direct my visitors to the information they need without physically guiding them?”

The answer, my friend, is an effective home page layout design.

Your home page layout acts as your customer service rep who diligently guides your visitors around your website.

How does it do that? – Simple:

A well thought out home page design creates a visual trail of breadcrumbs that can effectively guide your visitors to discovering your services/products effortlessly. The page layout will also direct your visitors to know where to take action and follow through to the next step.

Before we get into what you should include on your home page and show you diagrams of the anatomy of 5 different home page layouts with real examples below, let’s properly define what is an effective home page design.

What is an Effective Home Page Layout Design?

Page layout planning helps you figure out what content to place on your page, where to place it and which content should go first.

Building an awesome home page is not just randomly placing any information you can think of onto the page. It’s also not based on abstract concepts, or how you feel that particular morning.

It’s actually very methodical and logical – so everybody can replicate a good layout.

There needs to be a flow so you can guide your visitors to discover your website the way you want them to.

This enables you to craft a very targeted website experience that works best for the specific customers you want to attract.

When done correctly (I’ll show you how below), you can help visitors who land on your website:

1. Easily identify what your website is about, what you do and how you can provide your visitors with solutions to their problems; and
2. Engage with your business by figuring out where to take the next step. If your visitors don’t know what the next step is, they’ll probably leave without taking any actions. Next steps could be to visit a product / service offering page, download a guide, watch an informational video, sign up to a newsletter series, submit contact details, etc.

Effective home page layout is all about making your website easy to use and navigate. It allows you to steer your visitors’ focus to things you want them to pay extra attention to.

Let’s get started on what to include in an effective home page, and we’ll dive into some specific examples and layouts! 

What Content Should I Include on My Home Page Design?

Let’s be honest — How many times have you landed on a website, and ended up clicking the “back” button because you couldn’t find what you’re looking for in a few seconds?

The fact is that most of us are conditioned to expect to find what we’re looking for in a few seconds. People are becoming more and more demanding (and impatient) nowadays.

Your visitors will make a very simple, split second choice when they arrive on your home page – stay or leave.

How you choose to lay out your home page will affect that decision — and will impact the fate of your business.

Simplistically, the layout of your home page is divided into two parts:

1. Above-The-Fold – content you can see WITHOUT scrolling down when your home page is first loaded.

2. Below-The-Fold – content you only see when you scroll down.

100% of your visitors will see the content Above-The-Fold, as it is the displayed on their computer screen right away.

Statistically speaking, as you scroll down the page, the number of people who will continue to pay attention to your content will drop dramatically.

This is why it’s so important to plan what content your place Above-The-Fold and Below-The-Fold.

1. TYPE OF CONTENT TO INSERT ABOVE-THE-FOLD

This is where you want to display all your Primary Content – your most important content that you need all of your visitors to see.

The #1 goal of your primary content is to convince your visitors to stay longer to further investigate what you have to offer. Your primary content must be clear, concise and specific.

Primary Content Breakdown:

1. Headline:

In one single sentence (two at the most), you must answer the question that all your visitors will be asking – “What does your company do?”

A good headline will answer this burning question — so it needs to short, clear and describe what you do perfectly.

You want your visitors to read your headline and think – “Hey, that’s me! I need this!”

Here is a great example of a simple, effective headline that says a lot:

If you are working on a project with other people and are having the same problem, this headline will get your attention.

It’s nothing fancy, but it gets the message across perfectly.

Pro Tip: If you don’t know what to write, try asking your customers or audience why they visit your website, use your services or products. You can take literally take the words right out of their mouths and use them as your headline.

2. Sub-Headline:

You have an opportunity to define your service/product in a bit more details with your sub-headline.

The brief description should answer – “What problems do you solve for me?”

Here is good example of an effective sub-headline:

In one short phrase, it tells you how their product can help you.

In this example, their users can use their product to create pages to generate more customers!

3. Primary Call-To-Action:

A Call-To-Action provides directions and asks / tells your visitors to do something – to take the next step.

This can be “call us now” or “click for a free quote”.

Also, pay attention to Shopify’s headline and sub-headline. Very effective! – Source: Shopify.com

Think of a call-to-action as a direction indicator. We all know how to take direction because we do this every day in the real world.

This sign lets you know you are heading eastbound, and you can get to Redlands by turning right on Exit 40A.

We find these signs and arrows very helpful in our daily life, so why not use it on your website to guide your audience on what to do or where to go?

This is especially true if they want to make a commitment because they resonate with what you have to offer (your headline and sub-headline).

Don’t expect your visitors to know what to do next — they don’t.

You want your visitors to visually see that there is a next step that they can take, so never be shy about telling them what to do in a helpful way.

Imagine this: You find a random restaurant and see a menu by the door. You step inside and you see the host standing there, but he doesn’t say anything. He doesn’t proactively ask you how many people you have in your party, nor does he attempt to lead you to the seating area.

You end up just standing there, wondering – “what’s next?”

Does that make you feel good and confident about the business?

Does it make the business feel personable and likable?

The key is to actively engage with your visitors — tell them what to do, and guide them to taking action so you can start building a relationship with them.

This can significantly increase your chances of winning new customers.

4. Use Images or a Video to Illustrate Your Message:

People are naturally drawn to visuals like images and videos, so it is a great way to create a mood or show your audience what you are all about.

It is important to remember to use images and videos that are relevant to your website. If they don’t serve any purpose or don’t do a good job in enhancing your overall branding or messages, don’t use them.

It is better to keep your website clean rather than including things that are not useful.

Where to Find Professional Images – see our guide on how to pick the right pictures, and where to find professional images without paying through your nose (a lot of professional quality images are actually free!)

How to Use a Video Background – have you considered using a video background to “wow” your visitors, make your website look more professional and improve your branding? See this guide on how to use a video background the right way, and the do’s and don’ts.

5. Logo:

Your logo needs to do a good job of subtly communicating what your company is about. It hints at the DNA of your business — whether you are professional, creative, aggressive, or laid back.

Logo Creation Guide – If you’re not sure how to create a good looking logo, here is our guide and some tools that can help you (even if you’re not a designer).

6. Navigation Bar:

This is the roadmap you use to show your visitors what’s important and where they can go to get the specific information they need.

Rule-of-thumb:

• Only include necessary pages and don’t confuse users with too many unnecessary options. Your visitors will not be interested (initially) in pages about copyright, privacy, and terms of services. So insert them elsewhere — like in your footer.
• Create logical groups of related links, with the most important links organized from left to right.
• Keep page titles short and descriptive.
• Place your navigation bar in a prominent location so it is easy to find.

Put yourself in the shoes of your visitors and ask yourself this:

“What is the least number of steps I need to take before I can make an informed decision to buy your service or product?“

2. TYPE OF CONTENT TO INSERT BELOW-THE-FOLD

As mentioned above, not everyone will scroll down your home page to view more of the page.

Your visitors who will actually scroll down your home page to see more are those who are interested in what you have to offer after reading your headline and sub-headline (your Above-The-Fold content).  

Otherwise, they would have left your site already.

So, the type of content you want to insert Below-The-Fold is to support your Above-The-Fold content (what you offer and how you can solve your customers’ problems).

Here are the 2 types of content you should display Below-The-Fold:

1. Secondary Content: Content that is not important enough to make it Above-The-Fold, but is still crucial to convincing your visitors to become customers or loyal followers.

2. Additional Content: These are the “nice-to-have” information, but are not critical in making your website effective for making a strong first impression.

Let’s dig into more specific details about these Below-The-Fold content. Afterward, we’ll show you 5 effective home page layouts that you can imitate.

#1) Secondary Content Breakdown: 

Secondary content reinforces your Primary Content (Above-The-Fold).

The goal is to convince and educate your visitors on what exactly they’ll get out of using your service or buying your products.

1. Benefits List:

Here’s a common mistake – most websites are focused on listing out a lot of features and don’t focus enough on describing the benefits to potential customers/readers.

There is an insightful saying in marketing – “Features tell, benefits sell.”

The main question your visitors will ask is, “so what’s in it for me?” — “Why should I eat at your restaurant?” — “Why should I hire you as my photographer?”

If you landed on a website and all you see is a big list of features, like “we have 20 sandwiches, 15 salads & 5 kinds of soups….“, or “we provide you with 100 pictures on a DVD & a physical album….“

You’ll end up just being another restaurant or photography business website. Nothing makes your website visitor want to find out more about you.

Focus on how your visitors will benefit from you – For instance, “organic, farm to table ingredients so you feel healthier and live longer”, or “kids grow up way too fast – we’ll help you capture those precious moments and memories with your first child.”

Notice that benefits tap into the emotional side of people – because it works.

Here is a good example of describing benefits from Basecamp’s home page (Basecamp is a project management software that helps teams manage a lot of back & forth communications):

They first list out all the headaches and pain points that their potential customer might have (to relate on an emotional level). Then they make the promise (benefits) that with their software can make all those problems go away.

Outlining benefits don’t always have to be solving a specific problem. It can also be inspirational like how great it will be to take a road trip with your family in a brand new car!

The key here is to show your audience how their life will change for the better with what you are providing them.

Pro Tip: Listing out features are only helpful after you convince your visitors that you can benefit them tremendously. Don’t unload a boring list of features on your visitors. Focus on communicating how your visitors can truly benefit from you.

2. Trust Indicators:

Trust indicators can be customer success stories, customer testimonials or quotes, professional accreditation (industry association affiliations, Better Business Bureau score), media quotes, the number of social network shares, and display personalized blurbs about your team members to create trust.

People buy from people or businesses they like and trust.

So by showing other people like you and your brand, you can boost your credibility and trustworthiness.

The key is here is to positively associate your business with external parties and show that your business is operated by people, not robots.

Trust indicators are very powerful to help bring your visitors one step closer to becoming customers — especially when they are close to crossing that line, but they just need a gentle nudge.

Remember – people like to follow other people. So when they see others (just like them) do business with you, they are more likely to follow. Why do you think we constantly look up reviews on different services or products?

3. Features List:

Features list helps your potential customers know what EXACTLY they are getting when they make a purchase.

List out your most compelling features that your visitors will want to have.

One of the biggest mistakes I see people make is that they list out a long laundry list of features that don’t relate to me as a customer.

Even when the features may sound interesting, I could care less if the features don’t solve my problem or answer my needs.

For example: When I go on to Volkswagen’s website to research for a new car, I don’t get a mind-numbing list of features like electro-mechanical power steering with variable assistance. While this is an important feature, it is not something most car buyers cares about.

Instead, you get sold on features like infinity moonroof and 10-speakers surround sound audio system. These are the features that people care about and are what will eventually sell the car.

Volkswagen Touareg 2016 moonroof – Source: vw.com

Think about what features will resonate with your audience and remove the extra features that won’t make a major impact on your home page.

Pro Tip: If you have a lot of features to list, instead of listing them all, pick the top 10 to insert into your home page.  For the other features, create a separate, dedicated features page where your visitors can view the entire list of features there.

#2) Additional Content Breakdown:

These are the “nice-to-have” information but are not critical in making your website effective for making a strong first impression.

For example, blog articles, company announcements, event schedules, industry updates, location map (if you are not in the restaurant business).

Such content does have a place on your website, and if placed in the appropriate location, can help complete the overall picture what your business is about. But if they are used incorrectly, they can create clutter and confusion.

Now that you know what you should include in your homepage, let’s see how you can position your content to create an awesome experience for your visitors!