Skip to content
(314) 849-6969 (314) 849-6969

Your website’s homepage is most often the first point of contact customers have with your brand. As such, it needs to be the best it can be: on-brand, easy on the eyes, and effective. Let’s talk about 7 crucial design elements every website homepage should have.

If you think of your homepage as that first impression you never get a chance to repeat, bear these seven design elements in mind. They will help you make the right one and boost both your engagement and your conversion rates. 

The Actual Product

First and foremost, your homepage should feature your product. If you have several products, you can set up a carousel, or you can create different sections for different product categories. 

If you have numerous products, select the ones that will appeal to your target audience the most. Your goal is to show visitors what they can expect and how your product will help solve their issues. 

Focus on showcasing the benefits of your product rather than its features by adding some descriptive copy to your product images. As for the images themselves, aim for as many angles as possible. Needless to say, the image quality should be as high as possible. 

Take a look at Tortuga Backpacks. They feature their hero item – the backpack – on their homepage, and they’ve shown it from every angle. They’ve also focused on the benefits – travel light, stay organized, save your shoulders – instead of the features (sturdy material, lightweight fabric, plenty of packing space).

Product page showing a back pack. One of the design elements every website homepage should have.
Source: tortugabackpacks.com

An Accessible Feature Summary

Finding out what your SaaS product does is one of the main reasons potential customers visit your website. Don’t make them click around to find this critical information. Let them find a description of your product’s core features within seconds of landing on your homepage. Look at Hi5’s homepage and see how they’ve listed their main features for Team managers as well as Team members.

When discussing your product’s features, it’s incredibly important that you Stick to the important stuff. There’s no need to do a deep feature-dive on your homepage.

Visitors want a friendly high-level view of your core functions, not a knowledge base. Take the lead from Workplace and stick to four things the software allows your customers to do.

It’s also important that you avoid getting too technical. Discuss features in language that everyone will understand. Don’t use industry jargon or terminology that only you and your customers understand.

Remember that many of the people who land on your homepage have no concept of your product and the context it operates in. Spores does an amazing job at keeping its feature summaries highly accessible.

An Accessible Feature Summary

Evocative Visuals

Literal messaging alone doesn’t sell anything. Humans need to invest emotions into a potential purchase – especially one that involves a subscription.

Visuals – photographs, art, animations, and videos – help web designers trigger feelings with site visitors. These feelings aren’t what convinces a lead to become a customer, but it helps build a stronger connection between them and the brand.

To do this effectively, your brand needs to establish a consistent voice that resonates with its target audience. The key here is in understanding who you’re selling to and what their emotional needs are.

What feelings do they want a new product to make them feel? Security? Confidence? Motivation?

What feelings do they want your product to take away? Frustration? Worry? Inadequacy?

If answering these questions wasn’t part of the process when developing your brand’s buyer personas, I highly recommend revisiting it.

Brief your designers on these feelings. Ensure they’re populating your website with visuals that hit as many of these emotional notes as possible.

Xero’s header image does a great job of evoking a sense of busyness and the fear of not “getting to everything.” Their product is smartly positioned as an antidote to this emotion.

Evocative Visuals

A Clear CTA

Your homepage hero CTA needs to hit just the right note, both in terms of design and message. You want your customers to have a very clear idea of what you want them to do and what the action will result in. 

Designing a good CTA means blending it in with the rest of the page and ensuring it stands out just enough to be the first thing a visitor notices. The shape of the button, as well as the color and font of the copy, will all depend on the rest of the homepage’s design. 

When it comes to the copy, you are aiming for short and to the point, using on-brand power words and highlighting the benefit of the action for the user. 

Make sure to carefully consider what you want the action to be. For example, Unscramblex uses its CTA to give users direct access to their products. If you have a cloud-based service, this is something you can do as well.

A Clear CTA
Source: unscramblex.com

Alternatively, you can either direct traffic to your pricing page, your features page, or to a category page that is most likely to interest first-time visitors.

An Even Clearer Tagline

Alongside your CTA, you also want to ensure that your tagline is as clean and as impactful as possible. Think of it as added space to convince a visitor to convert: it gives you the room you don’t have within a button to provide more valuable information.

The tagline should also stand out as much as possible, so aim for larger fonts and a color scheme that will draw attention. You can also try using a different font from the rest of the page, as long as it’s in the same font family. 

Pretest Plus has a great example of a good tagline. They describe themselves as the secret weapon of successful students and then go on to provide more information about the types of tests they can offer assistance with.

A Clear Tagline
Source: pretestplus.co.uk

The white font on the dark background also means it’s easy to read but does not distract the eye too much, nor is it too loud and garish.

Plenty Of Negative Space

Negative space is another important element on modern website homepages. It makes pages less cluttered and anchors your main elements. Essentially, it’s a great way to highlight the most important elements of your homepage and direct the visitor to your next point. 

You don’t have to make your negative space white, even though this is what most websites choose to do. You can even use a dark color to achieve the same effect if it matches your brand’s tone of voice more.

Also, make sure that you use micro negative space in order to make the page “breathe” and feel lighter. This refers to the bits of space around your CTA, titles and headers, images, and every other visual element.

An On-Brand Color Story

Speaking of colors, you should also aim to tell a story with the colors you choose for the homepage, as they can significantly impact the emotions the page will evoke. 

For example, a bright and vibrant color story on the homepage will send positive vibes and enable users to associate the brand with fun. Mailchimp is a prime example of this kind of homepage, as its vibrant colors speak of a laid-back company.

An On Brand Color Story. Bright yellow MailChimp homepage.
Source: MailChimp

On the other hand, Fire Pit Surplus is trying to appear more aspirational with their homepage featuring their products with a soft muted mountain background. And Backlinko has kept its website even more minimalistic and evokes even deeper feelings of professionalism and trust. 

As you can see, there are a lot of different ways to design a homepage and it’s important to read up on color theory before you do. Then you can choose the accent and main colors you want to associate with your brand while experimenting with different hues until you land on the perfect combination for your target audience.

Some Human Touch

In order to humanize your brand, you also want to add a bit of that human touch to your homepage. You can either quote your customers, feature case studies or success stories, tell your own history, or use photos of your staff to make yourself more relatable.

Your aim is to show your target audience that you are not that much different from them and that you work with and help people who are just like them.

Images of your customers are usually the best choice, as they are the most relatable and the most effective. Capella knows this, so they chose to show their students on their homepage, which helps prospective learners imagine themselves studying there.

You can use models or stock images, but custom photos of real customers usually work best. 

A Word From Previous Customers

Finally, you can also boost your homepage appeal by featuring reviews from your satisfied (and slightly less satisfied) customers. 

Social proof is a great way to ease some of the fear that future shoppers and clients may have about working with a brand for the first time. If most of the people who’ve done business with you before are satisfied, chances are they will be too. After all, most people can’t wait to blast a negative experience online.

There are countless ways to incorporate reviews on your homepage: testimonial videos, comic-like blurbs, etc. Dress Forms USA did something a bit different by adding a Reviews button to the left side of their hero section. This makes them highly unobtrusive but also easy to spot, so visitors can browse them at their leisure.

A Word From Previous Customers
Source: dressformsusa.com

Final Thoughts 

Designing homepage elements can be tricky to nail. But with a bit of trial and error and a well-researched buyer persona, you can create a winning combination that fosters clicks and conversions. We hope these design elements every website homepage should have will help you.

Contact Matchbox Design Group Today!

If your website could use a refresh or you’re looking to drive more traffic to your site, fill out the form below and we’ll contact you to learn more about your digital needs.