10 Quick Tips: How to Make Your Website Homepage Design Better | Envato Tuts+ (2024)

For the small business owner, your website homepage is like your shop window: It entices people into your store, gives them an idea of what you provide, and it's their starting point for exploring the rest of your shop. This also means that how your website homepage looks greatly affects both your branding and your sales.

Unlike a shop window, however, improving your website homepage shouldn't cost much, especially if you're running a small business. There are many website homepage tweaks you can make without spending a lot of money or waiting several weeks for a redesign.

In this tutorial, we'll show you how to make a website homepage that attracts customers. You'll explore website homepage design ideas and look at some of the best website homepage examples.

Let's dive into those website homepage design tips.

1. Use Lightweight Image Files

Having beautiful, high-quality images is a must-have if you want to make your products look as good as possible. But there's an important trade-off: Usually, the bigger the image or the higher the resolution, the longer it takes for these images to load for your visitors. The longer the load times, the more likely it is that your visitors leave.

According to research from Google, 53 percent of website visits are abandoned if a mobile site takes longer than three seconds to load. In fact, their model predicts that the longer it takes for your page to load, the higher the probability that your visitors leave. The same research showed that it would make a lot of difference if website owners simply compressed their images.

Find the balance between providing beautiful images and having a fast loading site. Use Google’s PageSpeed Insights tool to see whether your images need further compression. If they do, you can use a tool like TinyPNGto compress them further or learn more about image optimization through these guides:

• Image Types and Usage in Web DesignJarel Remick03 Dec 2010
• Save For Web: Better JPEG Compression with Adobe PhotoshopMarie Gardiner05 Feb 2015
• Speeding Up WordPress: Image OptimizationBarış Ünver08 Apr 2015

2. Have a Single, Prominent Call to Action

When a visitor arrives on your homepage for the first time, there should be no ambiguity about what their next step should be. This is where your call to action (CTA) comes in. A CTA usually appears in the form of a large button. Clicking on it should convert your homepage visitors into a lead or a sale.

Make sure your call to action located above the fold — the top part of your homepage that's visible without scrolling. In one case study, an online store selling trampolines increased their conversion rate by 11 percent just by adding a CTA above the fold.

Still, you shouldn’t confine your call to action to this area only. You can repeat it throughout the rest of your homepage copy. For example Rumpl, an online store selling specialty blankets, highlights their featured product above the fold with a call to action.

But if you scroll down the homepage further, you’ll see another CTA button to add that product to your cart. While Rumpl displays other items on their website homepage, none have a prominent CTA except the featured product. Visitors focus almost exclusively on purchasing the featured product.

Avoid other distracting elements on your website homepage. The main focus should be the call to action. If you need to put navigation items, social media buttons, and other elements on the website homepage, make sure they don’t distract your visitors’ eyes from the main CTA buttons.

If you don’t have a strong call to action button on your website homepage, check out some of these attention-grabbing button templates from Graphic River.

3. Clarify Your Value Proposition

Apart from being clear about the action your visitors need to take, you also need to be clear about why they need to take that action. Consumers across all age groups value clarityin online marketing communications, more than great design or perfect grammar and spelling. So, when it comes to your website homepage copy, ask yourself the following:

• Do visitors know what they’ll be getting in return for clicking on your CTA?
• Does your headline, subheads, and body copy contain a major pain point and the solution you provide?
• Will visitors be able to easily repeat your message to others?

If you want to clarify your value proposition on your website homepage copy, try the techniques in the following examples:

1. Repeat the Value Proposition

Throughout your homepage copy, repeat the benefits your visitors will get after clicking on your CTA. You can use different words and visuals to reiterate these benefits. In the example below, Gossamer Gear, an online shop selling lightweight travel gear, their value proposition of "ultralight gear" is explicitly stated in their headline. It's also alluded to in their company logo ("Take less. Do more.") and the banner photo shows two hikers that are carrying backpacks that are smaller than usual.

2. Specify Why the Proposition Is Important

You can state that your business makes high quality products, has good customer service, or is socially responsible. You can make it even clearer for your audience by being specific about why. On their website homepage, apparel retailer United By Blue emphasizes their social responsibility both in their tagline ("Responsible durable goods") and their content (links to their blog posts on cleaning public spaces and their responsibly-built stores). But their website homepage copy goes the extra mile by specifying the company's efforts by the numbers.

Think about waysyou can be more specific in expressing your value proposition. If your unique value proposition is that you help customers save money, note how much they could save. If your business prides itself in making durable products, specify how many years the products tend to last or subject the products to various tests and show your audience the results.

4. Make Your Website Homepage Copy Easy to Scan

Whether your website homepage has long or short copy, it’s important that the text is easy to scan. This is because people tend to scan and skim text online. A study from the Nielsen Norman Groupshows that only 16 percent of people read online text word for word.In a more recent study, they also found that people tend to scan heavy text in an F-shaped pattern, which leads them to miss essential information.

If you don't want your visitors to miss out on your persuasive words or your product's most important features, make sure that the text on your website homepage is easy to scan. Here are some tips you can follow:

• Break up your homepage content with subheads.
• Use lists to outline details rather than describe them in paragraphs.
• Add captions to your images.
• Use short sentences.
• If you can present the information faster through visuals, do it rather than relying solely on copy.
• Avoid small type sizes.

One good example of this principle is found on Barebones Living, which sells outdoor gear. Rather than list out their product categories and elaborate on them with long descriptions, the copy merely states "How do you spend time outdoors?" Pictures and single-word category names do the heavy lifting. Even without reading the words, you can tell which box you're supposed to click. Let's take a look at the website homepage example:

The website homepage also makes use of subheads. In the screenshot below, the subhead "Why Barebones?" is followed by smaller subheads such as "Farmers in Africa," "Providing shelter in Nepal," and "Providing food in Utah." Having subheads like these means that visitors will have a concrete idea about the company's projects even if they don't read the short body text.

5.Have People in Your Photos

Even if you've got the most photogenic product in the market, it’s best to have people in your product photos — especially on your website homepage. Tests from Visual Website Optimizershow that using human photos instead of illustrations or icons can boost conversion rates.

More importantly, use real photos of your customers or your staff. Website visitors tend to ignore stock photos of people, according to research from The Nielsen Norman Group.

A good example of this is from the online seed store Renee's Garden. On their website homepage are multiple photos of people on their farm, photos of people they've donated seeds to, and a photo of the owner. Apart from these photos grabbing the eyes, they also build trust since you can see the people behind the business. This instant trust-building is essential for small and micro businesses that don't have as wide a reputation as more established brands.

6.Reduce Risk

Since online small businesses aren't as well-known as bigger brands, consumers might feel that there's some risk buying from them compared to buying from Amazon or Walmart's online stores. Because of this, you need to eliminate any potential risk for your customer.

W&P Design, a design shop from Brooklyn, makes it clear in their copy above the fold that they offer "Free Returns. No Hassle." If a customer is hesitant to buy because they might end up not liking the product, they know upfront that they can return it without any hassle from the company and without paying extra fees. Here's a look at the website homepage example:

Hand-in-hand with reducing your customers' risk isproving that you do deliver on your promises. This is where social proof, such as reviews, case studies, and testimonials come in. Display these on your website homepage if you want customers to trust your business.

Wynd, which sells smart air purifiers, accomplishes this by having a "Reviews" tab above the fold on their homepage. When you click the tab, product reviews pop out. These reviews also show up again in a separate section on the website homepage.

For detailed advice on how to gather and use feedback on your website, review the following guides:

• How to Use Feedback From Customer Reviews (In Your Small Business)Celine (CX) Roque02 Feb 2022
• How to Write a Case Study That Attracts ClientsCeline (CX) Roque27 Jun 2022

7. Reveal Your Navigation Menu

While it seems neat and modern to hide your website homepage navigation with a dropdown menu or hamburger icon, this makes it less likely for users to navigate the rest of your site. Research from the Nielsen Norman Group found that the discoverability of a site's pages is cut in half when navigation bars are hidden. It will take longer for visitors to find the other key pages on your site.

If there are too many pages on your site, and you can't put them all on your homepage menu without overcrowding, you can opt for "combo navigation." In this format, there are static menu links to important pages on your site, but the rest show up via a dropdown menu. This was the approach used by Johnny's Selected Seeds, an online seed merchant. Since they've got dozens of seeds in their online shop, the main navigation only lists the major categories. The other subcategories are revealed on a dropdown menu.

8. Try Live Chat

One thing you might want to experiment with is the use of live chat on your website. Live chat is a feature that lets website visitors chat in real-time with you or your staff. You can use live chat to answer their preliminary questions, help them navigate your website, or directly make a sale. For customers, this is easier than calling or emailing your business, since they can chat with you as they're browsing the site.

JSI Signs, an online sign supply shop, uses live chat toreduce the volume of calls they receive in their store. This also helps the owner multitask, since she could answer questions from potential customers as she's doing other tasks. Let's look at chat in this website homepage example:

But there are other important benefits to adding live chat to your website homepage. Live chat can increase conversions by as much as 40 percent, according to a study by Apex Chat. It also provides the highest customer satisfaction levels, with 73 percent of consumers satisfied with the service they get from live chat. Email comes in second with a satisfaction rate of 61 percent.

If you're interested in giving live chat a go, here are some live chat services you can use:

• Live Help Now
• Liveperson
• Pure Chat
• Olark

9. Embed a Video

Adding a video to your homepage can increase conversions. This is true across several product categories, according to a study from Treepodia. Because of this, it might help if you add even a video clip on your website homepage. Keep it short, since engagement tends to drop off when the video is too long. It's best to keep your video shorter than two minutes, according to statistics from Wistia.

As for the video's content, it could be an explainer, customer testimonial, product demo, or even a quick tour of your store. It can be live action or animated, whatever works with your needs and budget. In the example below, Four Sigmatic, a mushroom coffee company, has a video on their homepage where the founder demonstrates how to use their product. Video is especially important for unusual products such as mushroom coffee, which most people might not be familiar with.

10. Simplify

If the above list makes you think that improving your website homepage means adding more elements, that’s not necessarily the case. Each new item you add could distract from your main message and call to action. Also, it can leave a bad impression on your visitors.

Research from Google shows that high visual complexity — the presence of many elements — can affect how appealing your site is to visitors. Sites with low visual complexity were found the most appealing, even if people were only exposed to these sites for 17 milliseconds. In other words, the first impression of your website homepage counts, and this impression should be as simple as possible. Keep this in mind when you're following the above recommendations. Replace unnecessary or ineffective elements rather than add new things to compensate for them.

A Website Homepage That Brings in Business

You've just learned about website homepage design ideas. We've explored some website homepage examples. You should now have some ideas on how to make your website homepage more effective.

Remember, your website homepage should never just be a decorative part of your marketing strategy. Instead, it should play an active role in bringing in sales and repeating your branding message to potential customers.

If your website homepage doesn't seem to be delivering on that promise, work on some of the recommended changes above. You can start with the ones that are the easiest for you to implement. By making these simple changes, your website homepage might even become one of your most important customer acquisition channels.