You’ve seen three real-life examples of some of the best homepage designs on the Internet, but what can you take away from them? And how do you design the best homepage for your business?
Believe it or not, homepage design boils down to five simple elements. You have lots of room to play with creativity, but make sure you’re presenting your offer clearly and without distraction.
Here’s a handy checklist of things to include on your own homepage to improve it and boost conversions.
1. Write a strong and clear headline
Each of the three examples I mentioned above has a clear, specific headline to anchor the page. Let’s look at each headline here:
- Build Your Online Authority With Powerfully Effective Content Marketing
- Get There — Your Day Belongs to You
- The only language software with TruAccent™ — the world’s best speech recognition technology.
They’re obviously very different, but they have several things in common.
First, they use power words. These are words that immediately evoke an emotion or connect with the reader.
Copyblogger focuses on words like “authority” and “powerfully effective.” They’re not impressive on their own, but when built into a concise headline, they help send a stronger message.
Uber takes a more emotive approach. Instead of stating its value proposition outright, Uber appeals to what their target customers want: freedom, efficiency, and a destination.
Then you have Rosetta Stone, which uses words like “only” and “world’s best” to convey credibility and authority. Those words imply that Rosetta Stone is all you need to accomplish your goals.
Write strong headlines by putting yourself in the customer’s shoes. What would impress him or her? What would connect with that person enough to convince him or her to explore the rest of your site? Or to fill out a form?
2. Don’t confuse your users
One of the most common issues I notice on homepages is conflicting CTAs.
Avoid conflicting CTAs as much as possible. You can have more than one option, but make clear that there’s a single CTA you want your visitors to follow through on specifically. You can see how both Uber and Rosetta Stone did this in the examples above by making the alternate CTAs smaller and less obvious.
More importantly, you want to avoid visual clutter. Just like you pick up toys, clothes, scattered magazines, and other detritus at home, you want to remove any confusing visual elements from your homepage.
In other words, keep it simple.
You want enough on the page to attract attention, but not so much that readers don’t know where to look.
3. Add a direct and big CTA button for the offer
Your CTA is where you want your visitors to focus their attention. It’s an invitation: Here’s what to do next!
The CTA button shouldn’t take over your entire screen, but it should get the visitor’s attention. Consider using a unique font if you don’t think it’s captivating enough.
Additionally, make sure you use a call-to-action phrase that makes sense and conveys value. A CTA like “Subscribe Now” doesn’t thrill me. Change it to: “Subscribe Now to Get a Free Case Study.” Now I’m interested.
4. Use contrasting colors
I’m a big fan of contrast when it comes to my sites. You’ll see my signature orange color on NeilPatel.com and Neil Patel Digital.
Contrast doesn’t mean a loud or obnoxious color. You can create contrast in numerous ways.
For instance, a bold color for the background and a neutral color for the text on a CTA will work well. You don’t want lime green on electric blue — that’s hard on the eyes.
In a CTA, you can also use a color that isn’t found elsewhere on the page. Just make sure it doesn’t strike too much visual discord. Learning the color wheel and how colors complement one another will make you a better designer.
5. Keep the offer above the fold
Your website visitors might never scroll beyond the fold. That’s just a fact. If you bury your offer underneath the fold, many of your visitors will never see it.
As you can see from the best homepage examples I mentioned above, every one includes the offer or USP (unique selling proposition) above the fold. It’s obvious from the moment the visitor arrives.
How to Find Out What’s Working and What’s Not on Your Homepage
Web design is extremely subjective. I might love a site’s design, while you might hate it. There’s no way to please everyone.
However, you can please most of the people who visit your site. How? You figure out what’s working and what’s not, based on what the majority of your site visitors respond to positively.
Crazy Egg lets you run user behavior reports on your site. You’ll see where people click, scroll, and otherwise react to design elements.
A heatmap, for instance, lets you see what people care about on a web page, and what they don’t even notice (even when they should). On the other hand, a confetti report shows you granular information about referral sites and how people who come from different places engage with your site.
Do people tend to skip over your CTA when they come from Facebook? Maybe your Facebook posts aren’t aligning with the design of your site.
Other user behavior reports allow you to view visitor patterns in different ways. For instance, a standard heatmap shows areas of “hot” activity and “cold” inactivity. Positioning your homepage elements to align with eye tracking can make it more effective.
After you collect this information, create two versions of your website. Present one version to half your visitors and the other to the remainder. This process of A/B testing individual elements will help you refine your site so it’s ideal for your target audience.
Good homepage design doesn’t require you to follow a specific formula. As you can see from the homepages I highlighted above, some website homepages share common elements, but they’re all different from each other.
In fact, stretching the boundaries of modern design conventions can work in your favor, but only if you don’t obstruct the visitor’s user experience. It’s fine to make bold design choices, but don’t do so at the expense of usefulness.
You don’t want to copy someone else. Build the best homepage design for your specific audience, and make sure you’re presenting your products and services well by highlighting their unique qualities.
Once you accomplish this, you’ll have built a website conversion machine.