As a web designer, many businesses ask me what they should include on their home page to create the perfect website home page design.
While my clients get specific help to try and identify what to include, I wanted to share my thoughts with anyone in the same position and is struggling to know how to structure their home page and what to include.
If you have seen some of my brand story posts, you will know that I am a big fan of following the StoryBrand framework detailed in Donald Miller’s book, Building a StoryBrand. This gives you a brand story script from which to create your content.
This script follows a pattern to quickly transfer into a structure for your website home page design. Here is a summary of the ten sections to include on your home page following this framework:
- A navigation header.
- A hero statement that spells out precisely what you offer.
- An explanation of the value you offer.
- The process the customer has to follow to do business with you.
- Authority to show you are the expert in your field.
- A more detailed explanation about why customers should do business with you.
- Optional pricing section.
- A transitional call to action or opt-in.
- An extras section where you can place anything else that might be pertinent.
- A footer that includes all of the links you didn’t fit in your main navigation.
Before we start
- Generally, when you hire a web designer, you pay for them to create your website and all of the technicalities that that includes. This does not include creating your content. Your web designer might help give you an idea of what to include, but they won’t be responsible for writing your website content (unless this is covered in your quote). Therefore, it is good practice to have a good idea of what you want to include BEFORE you start working with your designer.
- If you need help with your content, you usually use a copywriter. The copywriter will help you with the sitemap, the number of pages and what to cover on each page. Then, your web designer will take the content and put it on your website.
What is the perfect website home page design?
Your home page is possibly the first interaction a potential customer has with your business, and as such, it needs to get the message across of what you can do for them as quickly and succinctly as possible.
The potential customer needs to know that your business is the exact business for them and that you have something valuable to offer them.
To do this, we will be using your brand story. This means that your home page should consist of the sections described below.
The image below shows a possible layout of how a perfect website home page design could look.
The significant sections to include are as follows:
At the top of your website, you have the option of creating a top Admin bar. The Admin bar usually runs along the top of a website in a small font. It is generally used for a phone number, social media icons, shopping cart functionality, search or your opt-in offer. The Admin bar is optional.
The navigational header should include a simple menu that includes your logo and gives quick access to your important pages. Ideally, this should also have your primary call to action so that the customer knows immediately what they need to do to do business with you.
The same call to action should be repeated as you scroll down the page and throughout the website.
This section is repeated on every page of your website.
A hero statement
The hero statement of your home page is the first area to get your message across.
It is the area that is ‘over the fold’, meaning it is the screen section visible before the user starts scrolling.
This is the area you want to be clear about what transformation you can offer your potential customer. It should spell out exactly what your offer is in a punchy title. Then, you can expand on this with a summary line, a list of successes that the customer can expect, and a list of potential fears the customer may have that you can overcome.
The aim is to give the potential customer enough information that tells them you can give them what they want and allay their internal fears.
Try not to be cute, clever, or vague. If you confuse people here, they’re gone.
In addition, add another call to action button. This is a repeat of the call to action in your navigation.
The hero section also typically includes a great image. How big you make this is up to you, but it should give the impression of a happy customer using your product or service.
The value proposition
The value proposition is about telling your customers what you offer. This doesn’t just mean the physical product or service but more about their transformation from using your product. They are asking questions like:
Will I save money or time?
What’s in this for me?
Will I reduce risk or frustration?
How will I feel afterwards?
Will I gain status?
In this section, spell out the value you offer.
Use the plan section to describe the process (or plan) the customer follows to work with you. It should be a simple plan that consists of about three or four steps.
It gets confusing if you have too many steps, which will put off the customer, as they will think it is too much effort. If you have a more complex process, describe it at a higher level, or find a way to describe it that makes it seem effortless.
Use icons, images or graphics to help explain the steps.
The Authority section includes customer testimonials or social proofing to add trust and credibility. The testimonials should speak to your target customer by removing their significant objections.
You can also add some seals of approval or certification, such as professional logo endorsement or associate logos.
Also, include big clients you work with or if you have been featured somewhere, add the logos here to build up your position as an expert.
The Explanation section lets you write a longer description of the benefits you can offer your customer.
A web page should contain over 300 words for good SEO, so this section gives you somewhere to put this keyword-rich text. Use it to tell your customers and Google what you do and how you can help them.
If you are concerned that this text will look odd on a clean and simple design, then remember that you can free up space by simply showing the first few lines of the text followed by a “read more” button that people can click to expand the rest of the text.
If you have a fixed cost pricing structure for your services or products, detail it in this section. First, describe the cost of each product, followed by bullet points of what the customer gets at each price point.
The same could be done to detail any packages or bundles you may have, even if a quote will provide the pricing.
You might also consider explaining the cost of not doing business with your company. For example, will customers experience more significant inconvenience? Will they lose money? Will they lose social status? This makes their buying decision about more than the cost.
Transitional call to action
In all of the sections above, you can, and should, add your standard call to action on how to do business with you.
However, sometimes a customer is just not ready to buy yet, but are interested enough in your company that they want to stay in touch. So don’t let them go without capturing their details.
It is good practice to create an opt-in that the customer can request, giving them some value for free, and you collect their email address.
Having their email address is a good source of potential customers. Over time you can send them more valuable information and offers so that when they are ready, they will remember your business and come straight to you rather than your competitor.
This is called a transitional call to action as it does not initially result in the customer doing business with you but does provide a means of you staying in touch.
This final section is just a placeholder to fill with anything else you think is valuable.
This can include sections for:
- Blog Posts to keep your customers in the loop
- Portfolio items to showcase your creations
- Social Media posts,
Many websites contain too many navigational options at the top of the page.
To keep your navigation simple and draw attention to your Call to Action, relocate unnecessary navigational items to the footer. This might include links to Contact, FAQ, About, T&Cs, Shipping and Delivery., etc. These areas are easy to find for those looking, but they don’t clutter up the top section and confuse potential customers.
Don’t be afraid to change things.
It’s easy to get attached to your ideas the longer you work on them. But while you are planning out your content, take the opportunity to edit ruthlessly to make sure your website stays on message. Feel free to play around with the order of all these sections, stepping back frequently to consider how they all relate and flow.
Ask the right people their opinion.
Sometimes you get so caught up in the weeds you forget to see the bigger picture. Asking people to review your work is good practice. It will help you see the content from other people’s perspectives.
Just make sure you ask the right people. Opinions will vary wildly. Make sure everyone you ask knows the broader business goals behind the design and understands who you’re trying to reach.
Make sure you can justify everything.
The primary purpose of your home page is to tell your potential customers what you do and not confuse them with surplus information. Therefore, make sure you can justify every section and even every word on the page to make sure it gets your message across. If the reason it exists is “I like it,” then it needs to go. Don’t be afraid to remove whole sections and cut out significant elements.
The process of creating a new website home page design can feel overwhelming, but hopefully, with this guide, I have given you an idea of what to focus on.
With this guide, a knowledge of your customers, and some creative, focused work, you’ll be well on your way to having a website home page design that’s clear and effective. Once you have completed this upfront work, you’ll be able to hire a great web designer to bring your design to life quickly, easily, and on budget.