If your website’s homepage looks like everyone else’s homepage you’re making a fatal mistake.
Imitating what you see others do is a great way to learn when you’re getting started, but if you’re still relying on what you see [insert influencer’s name here] does with their homepage you’re missing out.
And if you’ve not thought strategically about what you need to do with your homepage, your site is probably hemorrhaging conversion opportunities and you’re frustrated with your online efforts.
Does that sound familiar?
The stuff I cover here is equally applicable if you’re a small business, a brick & mortar business and you’re trying to grow your online business, or you’re a new blogger who is looking to start your website the right way.
So many website owners never dreamed that they could get great results from their homepage. So many times it’s just an afterthought.
You cannot go wrong when you implement the layout and strategies I cover here.
So if you’re interested in taking your website to the next level, winning new customers, building your list and growing your visitors and readers to your website, then keep reading.
I’ve got several tools and strategies I use to build out a killer homepage on the new website projects I start. I’m going to outline one of them for you today and show you how you can use it to design the best homepage ever for your website.
If you want to learn all the tools and strategies I use to build out new WordPress sites then you need The Ultimate WordPress Start-Up Checklist to get your website started the right way. It doesn’t matter whether you’re an aspiring blogger, or just want to start a new WordPress site. If you struggle with figuring it all out by yourself, my guide will help you get your WordPress site done the right way, and fast.
You ready? Let’s jump in.
Homepage Design Layout | The Header Section
The best homepages start by presenting great visuals, compelling calls to action, and a clear message in the header of the homepage.
The header section is where you get to make your first impression. This is where you start to tell your story to your visitors and you want to capture their attention fast.
When a visitor arrives at your website you have to get their attention fast. The first thing they’re going to see when they land on your homepage is your header section, so it’s vital that it communicates clearly and quickly captures their attention to encourage deeper engagement with your site.
The hero image
The image you use in your header should be part of telling your story and show the win that your client is going to experience by working with you. Stay away from corny, impersonal stock photography here.
I hate to break it to you, but visitors may not be all that interested in seeing your staff, or pictures of your building, or other stuff like that if it doesn’t help tell your story and the results they can experience by working with you.
This isn’t the place where you talk about you. This is where you answer the visitor’s question: “what’s in it for me?”
One big thing to keep in mind here is how this image is going to work when you overlay text on top of it. You don’t want text on top of busy parts of the image.
You also don’t want awkward positioning of the image’s subject in relation to text either. An example would be text that covers the face of a person in the image.
And since we’re on the subject of the header image, please don’t use sliders or automatic image carousels. Peep Laja from ConversionXL points out that they’re not effective, distracting, and users tend to skip over them. This is one of those features that sometimes look cool, but doesn’t really deliver results.
Your main headline needs to communicate clearly what problems you solve. Don’t be clever, or try to be witty here. Communicate clearly. Tell your visitor exactly what they get and what benefit they’ll receive by working with you.
Your subheadline is your opportunity to succinctly elaborate in a couple short sentences your solution is delivering. Think of this as a subtitle for a book. This is short, succinct, and gives a little more context.
The call to action
You should be able to clearly see and know what your main call to action is. Sometimes we get cute and try to make fancy buttons. There isn’t anything wrong with fancy buttons so long as they stand out clearly and are prominently featured on the page.
Make sure your fonts work well with your image. The placement and font family you choose to use for your headlines in this section should really work well together. Usually, a sans-serif font along with a great serif font can make for a stunning visual presentation.
Jeremiah Shoaf and typewolf.com is a great resource that I’ve learned a lot from about font pairings and I highly recommend checking out his site and resources.
You’ve probably heard the debate if you’ve spent any time thinking about your homepage:
What goes above the fold? What if a user doesn’t scroll? How do we get people to see what’s below the fold?
A great way to encourage visitors to dig deeper is to include in your header section a visual cue that there is more to the page than what just loads in the browser frame.
An effective cue is a nicely designed arrow pointing toward additional content. It’s a nice feature to use, especially when you delay loading it for a second or two. The appearance of the cue is a nice visual reminder that there is more to explore.
Another effective cue could be a section displayed just inside the bottom of the browser showing more text to read. I’ve used several different options to encourage visitors to explore down the page by scrolling and there are several good ways to do it.
Here’s the deal:
Whatever cues you choose to encourage your visitors to engage it should be simple, and elegant, and not overly intrusive. We’ve all seen those ridiculous flashing ads on some sites that are visually screaming for attention. That’s what you want to avoid (and a key reason why ad blockers are a necessary browser tool these days, but that’s a subject for a different post).
Overall, for your header section, less is more here. Too many things going on will distract and take focus away from helping your visitors learn what’s in it for them when they visit your site.
Homepage Design Layout | The Intro Section
Visitors to your site want to know you and what it is that you can help them with, so taking the next step in telling your story is to tell them about how you deliver value through the products and services you offer.
This is where you can display a short, succinct, value-laden elevator speech for your homepage. This should be roughly 3-4 sentences of dripping with value that your target audience will resonate with.
A great formula for this would be to build a statement using the S.I.R. framework by Richard Fouts:
S – Situation: Communicate how you understand the conflict or pain that your customers face.
I – Impact: Illustrate how that situation impacts your customers and the effects it has on their lives.
R – Resolution: Explain how you remedy these situations with the benefits and advantages your business delivers.
The focus of this section is your value statement, so this isn’t a place where a lot of elements are needed. A section title, a short paragraph, and a call to action button inviting them to learn more is the most you need to have here.
Homepage Design Layout | The Process Section
Sometimes, it’s hard for your visitors to understand what you do, and what it’s like to business with you so creating a simple process map can go a long way to illustrating how easy it is to work with you.
People rarely, if ever, buy when they’re scared or confused so the point of creating this process section is to alleviate their fears and objections by laying out your process and walking them through the plan.
Remember, our goal is to engage visitors so we’re going to help them by showing them how easy the process is. Then for those who still want to dig deeper, you can link up your FAQ page here.
Once they’ve seen how easy it is and you’ve laid out the process and plan for them, don’t just leave them hanging there, give them a strong call to action and get them clicking through!
Homepage Design Layout | “How We Help” Section
This section relates closely to the intro section above, but there are a couple key differences.
This is where you provide more detail to your site visitor referencing the specifics of how your products and services address the pain problems they have and how you deliver solutions.
This section works well when your services can be clearly defined into three of four distinct different categories. A common feature on well-design homepages is icons that represent each of the different service areas with a short, concise, description of the category and a call to action to learn more.
Pro tip: One of the things to keep in mind here when using icons is how you construct your copy. Your copy’s word count and character length should be pretty uniform across all the categories you display here.
Homepage Design Layout | Validation & Social Proof Section
If you want to establish credibility and gain trust from your target audience then your homepage has to have a social proof section. According to Entrepreneur Magazine, social proof is a huge benefit to building connections with your audience, so you will want to show some social validation on your site.
It’s no secret that people will look around to the experiences others have had before making a decision as to whether or not they should purchase a product or service. Adding in testimonials from your clients adds a level of credibility to your business and is an essential part of any homepage design.
So what’s the bottom line?
Social proof shows your site visitors and potential customers the results others have had when using your products or services and that that the solutions you offer work and that those same solutions can work for the site visitor too.
In addition to testimonials, depending on the type of business you’re in it can be a good idea to show logos from known brands that you’ve worked with. These logos tell prospective customers that your business is worthy of trust by those brands, and your products or services can be a great solution for them too.
Since we’re talking about building connections and helping our potential customers to know us, trust us, and like us, another great tool to build credibility is to use case studies in this validation section.
Case studies spell out in greater detail the specifics of how you helped a customer go from where they were to the success that they now enjoy having worked with your business. It’s a way to demonstrate proof of concept and your ability to deliver results.
Conversion Rate Experts are a great example of a business who leverages great case studies on their homepage to demonstrate credibility, authority and the ability to deliver results.
Homepage Design Layout | Resources Section
The last section we’re going to talk about is a resources section. This section is where you provide a free resource for those that are testing the fences and trying to decide whether or not you can help them.
If you can help them with something that relates to their current struggles through a free downloadable guide, email course, or white paper it opens the door to being able to communicate with your ideal customers and site visitors.
Want to know the best part?
This is a fantastic opportunity for your visitor to download value-rich resources you have created. It can, and should be, the beginning of a relationship that you can cultivate and nurture via email where you can continue to build the relationship and deliver value. When your visitors give you their email address in exchange for a free resource they’re opening the opportunity to continue the conversation with you about how you can help them.
By presenting a great opt-in opportunity for something valuable to your target audience will help you build your relationship with an ever-growing audience and deliver value while helping you build your sales funnel.
Homepage Design Layout | What “Section” Means
By now you’re probably thinking about how all this fits together so here are a couple thoughts.
The most important part of your homepage design is whether or not it effectively serves your target audience.
So each of the sections mentioned here could be small or large. How the page is laid out, and in what order you place these sections is based on your priorities, your target market, and your design approach. No doubt, you’ll have more than a couple revisions as you work to get things just right for your homepage design.
A lot of times the best way to begin the discussion regarding your layout is to sketch out some ideas on paper. No need for fancy tools unless you’re really quick with getting the concept added there. Getting the idea captured is vastly more important than the tool you use to capture it, so don’t waste time getting bogged down in choosing a tool to use.
Use a pen and paper to sketch out initial ideas and concepts with your designer. Figure out how and where you’re going to add each section. Figure out what visuals you want to accompany them.
Don’t be afraid to change things and move stuff around. But you also don’t want to get caught in the paralysis of analysis.
Get the right people involved in the discussion. That doesn’t mean everyone. Too many opinions can derail you from your objective.
Making sure that your homepage loads fast is a prerequisite for every homepage design. If your home page doesn’t load in under 2 seconds you’re too slow. Don’t run the risk of people bouncing off your site because the site took too long to load.
I’ve got seven primary strategies and steps I use to build out new website projects, from big sites with custom post types, custom fields and fully bespoke custom themes, to small sites and personal blogs.
If you’d like to learn about how I implement all seven strategies and steps to build a new WordPress site then you will definitely want to download the Ultimate WordPress Start-Up Guide here.
In this guide, I show you the behind-the-scenes things I use every day as a web developer so you can see all the things you need to start a new website project with WordPress right at your fingertips.