The Definitive Guide to Designing Your Homepage

Your homepage may be the single most important page of your website, excluding your landing pages. This is what visitors will most likely see first, so it is very important to catch their attention and communicate your company’s vision clearly. They should know, with a glance, who your company is and what you do.

If you are thinking of a website redesign, or starting a new website from scratch, it is important to carefully plan out your web page properly from the beginning, or you may fall into the trap of neverhappyitis, where you will never be content with the homepage and keep changing it every couple of months (or weeks!), or worse, one day you will realize that by rushing your design, you have an ineffective website.

Purpose

The homepage is the first page most of your visitors will see. Thus it is very important to get right, as first impressions are everything! Generally, a homepage has these main functions:

• attract and keep visitors attention
• clearly define your company’s purpose or USP
• to provide an easy path for visitors to complete your mail goal
• convert leads
• redirect visitors to other parts of your site
• make a good impression

You achieve this by combining good technology, good copywriting, and good design. In this post, we will go over some essential elements of a homepage, tips on designing a good homepage, some things to avoid, and we will give some examples of homepages we like.

The Elements Every Homepage Needs

There are certain key elements every homepage must have. Keep in mind that the page will probably get the most traffic on your site compared to other site pages, and it won’t be targeted traffic like your web site’s landing pages. Therefore, your homepage needs to serve a larger audience and purposes than a landing page. Additionally, since the homepage is the face of your company’s online presence, it also needs to do a good job of converting visitors and generating interest.

Here is a rundown of the essential elements:

Page Headline

It’s all about speed. Within seconds a visitor should know exactly what’s up, where they are, and what your website is about. Keep it short, simple, and to the point. There is no need for a lot of fluff here as it often gets in the way. You will succinctly communicate what your business is and why they need it.

Additional information should be added in a sub-headline or a short paragraph under the headline of the page.

Benefits

Often, companies describe their services or goods in an attractive way, but this is not the best way to come across as providing a valuable good or service. The better way is to talk about the benefits of your service. Focus on the why, not the what. People respond much better to what they can achieve working with you, rather than a list of what you do. Write to your personas and their pain points.

This means imagining that you are your prospective client. What problems and needs do they have? What do they respond to? What is really important to them? When companies stop putting out what they think is awesome and start listening to their customers and put out what their customers want, is when companies go from good to great.

Trust Building

Ok, so you have stated the benefits of using your company, but why would anyone believe you? Anyone can say anything online, so it is also important to build trust with visitors. There are a few ways to do this but on the homepage, the most common way is to show a few strong, personalized testimonials. Adding pictures, links, and other small tidbits of information about your clients makes the testimonials seem more genuine.

Now, you do not want to make up testimonials! Fake ones are generally easy to spot and the risk of damaging your reputation and turning away visitors is not worth it.

Features

After stating the benefits, you will describe the features of your product or service. Here you can flaunt any unique selling propositions (USPs) as well, to give the visitor a better idea of what to expect when ordering from you. They know the benefits already, because you have told them, now they will learn how they will accomplish getting the benefits.

A Call to Action

Don’t forget a call to action or two for one of your offers. Whether it’s a free trial of software, an e-book, or even just a newsletter, it doesn’t really matter as long as you have something to generate leads with. Ideally, you should have two different calls to action (for two different things of course) to offer visitors in different stages of the buyer’s cycle a relevant piece of content.

Don’t forget to add an image or other piece of visual content to draw attention to the offer.

Navigation

Your homepage is the gateway to the rest of your site, so clear navigation is crucial. It should be easy to read, easy to understand and be based off of your site map. If a visitor has difficulty navigating your site, they will be a guaranteed bounce (leaving your website right away). The navigation should be at the top of the page, as putting it anywhere else will probably confuse people.

A recent trend is to use a “hamburger” menu, as seen on iPhones and the like. While they are trendy and good looking, we tend to discourage people from using them. First, it does not show your whole navigation menu from the beginning, which might lead to visitors missing your important top level pages. Second, not everyone online is tech friendly, and for those who have little experience with iPhones and the like, might not realize that it opens the navigation quickly. Unless you have an extremely good reason to hide your menu, leave the hamburgers at McDonald’s.

Resources

Most visitors to your homepage are probably just looking around or doing research about their problem. Linking them to relevant resources where they can learn more is important in generating leads who are not ready to buy yet.

Resources can be anything from additional information on deeper pages of your site, whitepaper and e-book download offers, or even to posts on your company’s blog.

Images

A wall of text is daunting, and since people respond better to images, make sure you spruce up your page with some relevant and helpful pictures. However, do not go overboard if it does not fit your good or service. A photographer can benefit from having large, beautiful pictures on his homepage. An air conditioner repairman might not benefit as much from a large, beautiful image of an…air conditioner. Connect your images and their use to what your company does and the image you want it to have.

Videos are great too and will draw attention to your call to action and give visitors a better idea of what they are downloading. When using videos, make it clear that a video is playing. It should be front and center, and if there is a lot of other information on the homepage, it might be a good idea to give the user the power to start the video. That way, they can digest the information you have presented at their own pace.

Mobile Ready

More and more people prefer using their tablets and phones to surf the web. There is no point in spending a lot of time and resources creating an amazing website if it looks like doo doo on mobile. While most Wordpress themes are responsive, please make sure to check how your homepage looks on a mobile device. Despite having smaller screens, the homepage should still contain all of the necessary elements in one way or another.

Social Media Buttons

Chances are, if people like your site and content, they want to connect with you. Providing them with social media follow buttons right on your homepage let’s visitors do just that, and quickly. Nowadays, most people interact with each other across platforms such as Facebook, Twitter, and LinkedIn much more than on actual websites. So it is important to make it as easy as possible to connect to your visitors on these networks.

Design: Putting the Elements together

If your homepage is not well designed, it will not instill trust. Before you start designing your page, look around the web at some modern companies and your competition. A good designer will have knowledge of what is “in” at the moment, but if you do not have a designer on board, you need to do the research of what the current trends are. (And if you do not have a designer, we highly recommend getting one).

If your website looks out of date, or is poorly laid out, people will find it hard to trust your company since it looks like the site has either not been maintained or has been put together with little care. And if a company’s website looks cheap, how much do you think they invest in their clients?

Here is a list of standard design best practices when designing a homepage:

Keep The Important Stuff Up Top

Everything on the page that someone can view without scrolling down used to be considered “above the fold”. This expression came about from newspapers, which were folded in half at the news stands. Therefore, customers would only be able to see what was printed on the top part of the newspaper, so editors would put the most eye catching headlines up top.

This carried over to the web design world when people used their desktop computers to surf the web. However, with multiple resolutions, screen sizes, and mobile devices, the concept of “above the fold” no longer applies. You have no control of what device your visitors will use to access your homepage, and you can really only guarantee they will see the top 400 pixels of the page. That is not very much at all.

But, the idea still applies. The best homepages, it can be argued, are able to include the most essential elements at the top, at the very least convincing users to want to read more. The most important elements to put at the top include the header, navigation, benefits, features, and call to action (with an offer image). At the very least, you will have a good explanation of your company, some lead generation, and a portal to the rest of your homepage. While you can’t be sure exactly what your visitors will see, by putting the most informative, persuasive, and converting elements towards the top, you can minimize the chance that someone will miss it.

If your homepage is very long, that is someone can scroll down very far, consider putting your call to action at the bottom of the page, (and in the middle if it is very very long), so as visitors get more information about your company, they don’t have to scroll up to go through your lead generating process.

Choosing a Font

Fonts are one of those things that people often don’t think too much about, which is a shame. Fonts have a subconscious effect on readers, so its beneficial to give which fonts you want to use some thought. Generally speaking, your font should be easy to read and clear. It should also fit your company’s image and culture. A neutral or serious font looks out of place if your company is trying to come off as playful and fun. Likewise, playful and fun fonts don’t fit when stating something very important or if your company culture is very formal and serious.

You can also distinguish between the two types of text content. Some content is meant to be read and digested, other content is meant for decoration. If your homepage has a lot of text that is meant to be read carefully, choose a clear and easy to read font or your visitor’s eyes will tire quickly. On the other hand, if the text is there to beautify a part of your homepage or to draw attention to your offer, a more elaborate and showy font gets the trick done.

And of course, make sure the font size is large enough to be easily read on both desktop and mobile.

Colors

Keep close attention to your use of color, which can also have a subconscious effect on someone’s mind as well as making your site hard to see. In addition:

• Do not use too many colors, as it makes the page look really busy. We would suggest sticking with a max of 3–4 colours.
• Don’t be afraid to use negative space. This is areas on the page with no content (or just the background colour or image). Proper use of negative space can really focus a reader’s attention to the information you want them to see.
• Pay attention to color contrasts. Some colors blend together and can make it hard for text to be read, or to distinguish certain elements of the website.

Have Good Images

I see many small businesses use whatever image they can find on their homepage. A lot of them do not consider the size of the image, the resolution, or even the quality. A great picture at bad resolution looks worse than a bad picture at perfect resolution. When designing your homepage, it is imperative that you consider the visual elements you want to include, and where you will get them from! Images are perhaps the most important part of your website as a whole because people respond to pictures much faster than text.

Keep it Fresh

A homepage that stays stagnant for too long is boring. While a homepage should probably be redesigned every five years or so, it is the best place to post updates about your company and products. By keeping the content of your homepage new, it incentivises people to return again and again. Also, since it is the first page of your site that most of your visitors will see, it is the perfect place to announce major changes, specials, or timely information to your audience.

Keeping the design slightly updated and tweaked in between major redesigns can also prevent your homepage from becoming stale or seeming old.

And now for what not to do

So we have gone over the key elements and some good design considerations for your homepage. To further illustrate how to make the best of your homepage, here is a list of common mistakes that I have seen maybe once too many.

Too Flashy or Busy

When a homepage just has too much stuff going on, it’s bad. If i have to take five minutes of my time just to understand what I am looking at, I am bouncing. This is generally achieved by a high number of colours, animations that generally don’t do or mean anything, too many ads, music or videos that autoplay and I don’t know from where, and too many buttons or areas with bold, striking colors.

If you haven’t focused the visitor’s attention to what you want them to see, then they will refuse to engage with your website. A minimal design that clearly conveys the most important thing is key here.

DIY

A lot of small businesses try to create their own website without hiring an agency or even a designer to help them. What happens then is that the website looks outdated, or poorly laid out, or has bad images, or is missing key elements, or… you get the idea. If you are not a designer at heart, and if you have no experience designing a website, think really hard if you are willing to spend the time and effort in creating a professional looking homepage. First impressions are everything, and hiring someone to design it for you will save you time, money, and most likely be better.

After all, it is your company, your livelihood, and for most of us small business owners, the reason you don’t have a life at weekends. If you do not want to invest in your company’s website to make sure it is done properly, then maybe you should rethink how important your company’s website is to you.

Poor Navigation

Some websites are just confusing. I have seen some websites whose navigation menu went down three levels, and it was really hard to locate the information I needed. Some companies like to cram as much as possible on their homepage, thinking that they are giving visitors unlimited access and a wealth of information. What really happens is that people get confused on your homepage and can’t find what they came there for in the first place.

Outdated Content

Some websites are never updated or maintained. When navigating to a company’s homepage that clearly has not been updated or maintained, it puts doubt in the minds of visitors. Is the company still in business? Is this the right website? Can I trust the information on this page?

In the past, websites were a little more than fancy business cards or marketing pamphlets, but in today’s day and age, your website and homepage is the main way a lot of your future customers will meet your company. You want your homepage to look fresh and updated, to show that your company can be trusted, that you are on top of things, and that you care about the impression you want your company to give.

A Few of Our Favorite Homepages

Grant: One of my favorite websites is Quicksprout.com:

There are a couple of reasons to this, but the main reason is that the homepage is extremely targeted to exactly what he’s trying to help others with. There is no extra fluff, there is just one, blindingly clear, thing — enter your website here and I will give you traffic suggestions.

Then he immediately uses really great CTA’s that really drive home what he’s trying to do.

Peterz: We use Slack as our messaging app, and I see this homepage almost everyday.

I think it is a great example of efficient design. The page says exactly what it needs to say, contains everything it needs to contain, and has no clutter. The background images and copy text work well to sell the product without coming off as obnoxious or arrogant.

Originally published at www.growthlabs.marketing.