12 Critical Elements Every Website Homepage Must Have [Infographic]

Most visitors will enter your site through this page, which acts as a virtual lobby for your business. Nonetheless, many companies still face difficulties in maximising its potential.

Your homepage, you see, needs to serve multiple purposes. Designing it to accommodate users from a variety of backgrounds is preferable to treating it like a singular purpose landing page. And it needs to be purposefully constructed if it is to serve its intended function. That is to say, you’ll need to add features that draw attention, inform site visitors, and encourage action.

If you want your homepage to perform better, consider adding some of these features.

What You Should Include in Your Website Homepage Design

1. Headline

A website has only three seconds to convey the company’s value proposition to visitors. Your headline should reflect this. The few words it contains may be few, but they make up one of the most crucial sections of your website’s copy.

You can’t expect everyone who visits your site to immediately connect with the same words and phrases. To counter this, you should tailor your headline to appeal to just one-third of the people who are most likely to be satisfied with your product.

The headline should be uncomplicated and straightforward. As an illustration, consider Dropbox’s slogan: “Everything you need for work, all in one place.” Dropbox is easy to use, yet powerful, because its features are clearly explained without the need to decipher industry jargon.

2. Sub-headline

Add a brief description of what you provide in your sub-headline to complement your headline. To do this, focus on a specific problem that your product or service solves for the masses.

Mirror’s “Hiding in plain sight” serves as an excellent subheading example. The main selling point of the mirror gym is highlighted: Without taking up valuable real estate in your home, you can have your very own home gym, personal trainer, and exercise programme.

Use larger font sizes to improve the user experience of your mobile site’s headlines. It’s possible that mobile users will have to use the “pinch and zoom” gesture to read and interact with your site’s content because the font size is too small. We suggest Make use of the heading features provided by your page editor. Only one H1 heading per page is permitted, making them ideal for use as page titles. H2, H3, H4, H5, H6, etc., are the proper levels for subheadings. You can have as many of these headings as you like, but they should be sequential. Instead of going from H1 to H3, say, pick H2.

3. Primary Calls-to-Action

Your homepage should encourage visitors to explore the rest of your site and take the next logical step in your conversion process. Add two or three prominent CTAs that lead readers to the next steps in the buying process above the fold.

These calls to action (CTAs) should stand out visually, preferably in a colour that contrasts with the rest of your homepage’s design while still feeling at home. Write the copy in as few as five words as possible, focusing on a single call-to-action to encourage readers to take the desired action. “Sign up,” “Make an appointment,” and “Try it for free” are all calls to action.

Above the fold on Afterschool HQ’s website are two call-to-actions (CTAs) for programme directors who want to use the site to advertise their after-school activities to parents. When a visitor sees the call to action (CTA) “Create Your Free Profile,” they are nudged to take the first step toward becoming an Afterschool HQ provider by the note that follows it.

4. Supporting Image

The majority of people learn best through seeing. It’s important to include a picture (or even a short video) that describes your product or service in detail. Make use of visuals that evoke feeling, motivate action, and add context to what you’re writing.

Use high-quality images with a small file size to maximise your site’s performance for mobile users. (Those using HubSpot can relax, as any photos they add to the service are automatically compressed. TinyPNG and similar tools will suffice if necessary.) Images with descriptive alt text help users of screen readers and boost your search engine optimization.

Emotional imagery to the fore on the 4 Rivers Smokehouse home page: Behind a straightforward headline, subheading, and primary CTA are a series of short, high-definition, mouthwatering videos:

A cheeseburger appears on the homepage of the 4 Rivers Smokehouse website.

5. Benefits

Defining your role and explaining its significance are equally vital. Benefits of doing business with you are of interest to potential customers because they are the reason they will continue to engage with your brand.

6. Social Proof

It’s much easier to put faith in someone when they have the support of their peers. It’s fine to claim that your product or service is the best in the world; however, customers might need independent confirmation before they buy from you. And social proof serves that purpose admirably.

You should put a few of your best (short) quotes on the homepage and provide links to relevant case studies. These endorsements carry more weight with a name and picture attached to them. Customer praise is prominent on Lessonly’s home page, proving the company’s success.

7. Navigation

Bounce rates and conversion rates can be affected by the layout and content of your homepage’s navigation. Giving visitors a simple way to navigate to the information they need from the homepage can help reduce the percentage of visitors who leave without exploring further. Place the menu bar prominently at the top of the screen, and categorise the links accordingly.

Conduct user tests to ensure that it is easy and intuitive for visitors to find what they are looking for on your site; after all, no one knows your site better than those who helped design it. You should add a search bar if possible. (Check out this article on the blog for more information on how to get around online.)

8. Content Offer

Promote an outstanding whitepaper, ebook, or guide on your homepage to attract more potential customers and increase your lead generation. People who aren’t quite ready to buy might rather learn more about a topic of interest by downloading an offer that provides additional resources on that topic. Several examples of content types are provided to help spark your creativity.

9. Secondary Calls-to-Action

If you want to increase your conversion rate and attract visitors who aren’t interested in your primary CTA, you should include secondary CTAs on your homepage. The best way to think of them is as a backup plan: They provide an alternative route for site visitors who may not be ready for what you are requesting.

Your primary calls to action (CTAs) should be displayed above the fold, while secondary CTAs should be displayed below the fold to give visitors additional options as they continue to scroll. For instance, Spanx’s homepage features three CTAs (calls to action) located below the fold, providing visitors who have scrolled this far with additional options. One of these secondary CTAs, over on the far left, will save you $20, while the other, “shop now,” will take you to the website’s product catalogue.

10. Features

Highlight some of your best qualities in addition to the benefits you provide. People will be able to better appreciate the value of your offerings after reading this. Again, remember to keep the writing breezy and simple. For instance, Dropbox for Business flaunts a features matrix on the homepage, below the fold.

11. Resources

Again, the vast majority of site visitors are not ready to buy… just yet. Provide a link to a resource centre where interested parties can peruse related materials. This does double duty by keeping visitors on your site longer and establishing your authority in the field.

Below the fold, Lovesac includes a resources link. You’ll find secondary CTAs for people who aren’t quite ready to buy, such as a link to a credit card form to expedite the payment process, a fabric swatch guide for those who want to make sure they get the right colour, and a link to a catalogue if they’re just window shopping.

12. Success Indicators

In addition to positive testimonials from satisfied customers, external validation in the form of awards and acknowledgement can bolster confidence. Is your business the equivalent of a highly regarded eatery? What did you get for best new app this year? Promote your accomplishments to the homepage visitors. People who don’t already know, like, or trust you will be more likely to give your company a chance after seeing this.

Calendly, for instance, lists Gartner and Dropbox among the notable companies that have recognised them on their homepage.

A Homepage Worth Visiting

Every customer’s first impression of your company will be gleaned from your homepage. People will look at your homepage to learn more about your company, the products or services you offer, and how they can benefit from them before deciding whether or not to become a customer.

An effective homepage will include elements like those discussed above to make a good first impression. And if you need even more convincing, you can get a free lookbook full of visually appealing homepage examples right here.

This article was updated for newness, accuracy, and completeness after its initial publication in January 2012.