This home page design guide was created to help you craft the content and structure for your home page as a web designer.
The structure I'm following here is one that I've used for over 100 websites.
Most importantly, it works for any niche. I have used it for hotels, resorts, SaaS, E-commerce, and much more.
The structure or sections, as I prefer to call them can be placed in different order, and some sections, like testimonials, can be used multiple times throughout your home page.
In this home page design guide, you will also find examples that you can use to guide the conversation.
Recommendations before you start using this web design resource
- Do this entire workbook during one session.
- Prior to the call, ask the client to gather testimonials and content that you will need.
- Request keywords and what they are looking to rank for during the kick-off call.
Let's get started with the Hero Section.
Designing the Hero of your home page
The top part of your website, the hero, should not have much text. It should tell people:
1. What you offer
2. How what you offer will make their lives better
3. What they need to do to buy it - A.K.A your call-to-action
Elements you will need:
- One H1 tag
- One paragraph with 65 characters max
- One or two call-to-actions
Pro tips:
- Include your main Keyword in the H1.
- Make your H1 as descriptive as possible.
- Make your description be able to tell the users what you do, for whom you do it, and how you make their lives better.
- Keep your CTA consistent from this point on
CTA Examples:
- Book a 30 minutes Meeting
- Schedule a Demo
Examples of home page hero sections:
Value Proposition - Section 2:
What are your top 3 value propositions: This part works nicely when it is placed right below the hero.
Elements you will need:
- One icon for each VP
- 3 value propositions with no more than 3 words for each
Examples of value propositions:
- Launch in 5 Days
- Raise your prices
- Take control of your XYZ
- Scale your saas
- Raise more fundings
- Simplify your accounting
Pro tips:
- Though this is nice right below the hero, you can bring this content to be inside the hero section itself.
- Make sure they provide value.
- You can A/B test the vps you have here.
Examples of Value Proposition sections:
Your customer’s pain - Section 3:
The pains of your ideal customers (First time founders, inexperienced founder, not working out founder) Let’s think about their pains as internal, external and philosophical pains. This section is meant to connect you with your target audience.
Elements you will need:
- One H2 Tag, include Keyword.
- One introductory paragraph. Keep it no more than 65 characters long.
- 1 to 3 external pains
- 1 to 3 internal pains
- 1 to 3 things they just shouldn’t be going through
Pro tips:
- Though I am working on the customer's pain points, I don’t want to be overly negative. Find a way to make it positiveThough this is nice right below the hero, you can bring this content to be inside the hero section itself.
- This is a great time to look at your buyer personas
- You are going to need this section for the following section, as you will be solving each of these pain points with your products.
- You can also substitute these 3 pain points with a paragraph, and an image of your product being used. (This is my favorite way to do this)
Introducing your product - Section 3
Why is working with you game changing for your clients?
In a few sentences outline the importance of your grants. Be empathetic about it, so they understand that just like them, you have also gone through this process and you understand what they are feeling and going through.
Elements you will need:
- One H2 Tag, include Keyword.
- One introductory paragraph. Keep it no more than 65 characters long.
Pro tips:
- Keep it simple.
- Include keywords on the H2 and paragraphs.
- Position yourself as the company that can solve the issues described before.
Your Product/Features/benefits- Section 4
Now, it is time to show off your services, products or features. It is important to match these features of using your product with the pain points they are experiencing.
Elements you will need:
- One H3 tag for each feature.
- One paragraph for each feature.
- One consistent call to action “Learn more about XYZ”.
- An image of the product or something that is relatable.
- Consider having bullet points. At least 3 bullet points below the short paragraph below the title.
- If you only have one product, this can just be one main section. If you have multiple products, you can use a tab layout or a left/right content to image flow.
- Add an eye-lash text above each H3. This is great for keywords
Pro tips:
- Keep it simple.
- Include keywords on the H2 and paragraphs.
- Position yourself as the company that can solve the issues described before.
- I like to have at least 3 to 4 features/products/benefits
- You can run A/B tests on this section. For example, scrolls vs tabs
Examples of home page product sections:
Testimonials - Section 5
Social Proof is everything. The testimonial section your home page, is one of the most important parts for your website.
It doesn't matter whether you are a small business owner, startup founder or an enterprise level company.
You need as many of these testimonials as possible!
Elements you will need:
- One H3 tag for each testimonials.
- A testimonial from the client.
- Their headshot, do not edit these. If they send you something that is completely off, go to LinkedIn, and download their profile photo.
- Use their full name and business position
- Use video testimonials when possible.
Pro tips:
- Keep it simple.
- You can send your customers a template for testimonials.
- Use video testimonials as much as possible.
- I'd recommend you add your videos to Wistia.
- You can use sliders for this.
- You can also have testimonials on your hero, and one testimonial on it's own section.
Examples of home page testimonials sections:
The Plan- Section 6
The most common question, I ever get asked as a designer is "What's next?".
When a lead or customer asks you this, they are simply saying "I'd like to know what we will do next, so I can be ready for it".
So the more straight forward your plan is, and the less risky it feels, the more people will want to move on to the next step.
Your plan should outline:
- What they need to do right now to move forward
- What will happen next
- How will their lives look after they have worked with you.
Elements you will need:
- One H2 tag with a line that shows them these are their next steps.
- A paragraph with a short description, making yourself or company look like the least risky option.
- No more than 3 steps!
- An H3 for each step.
- A short paragraph for each step.
- An icon or number for each step.
- One call to action
Pro tips:
- Keep it simple
- Most importantly, do not make this part confusing or use jargon that will make it difficult to reach.
- For companies that showing a Demo, you can implement this inside your lead form. You can use steps on top of the form, so they will know what happens after they have clicked submit.
- You can build a CMS collection in Webflow, here you can set up filters to use throughout your home page and website. This way you can place specific testimonials in specific sections, without the hazel of building new testimonials components over and over again.
The Bonus - Section 7
Some times people are ready to move forward.
They need a little bit more of value from you, to see what it is they can experience.
This is why the Bonus section is a great asset for your home page design.
This can be:
- Resources downloads
- eBooks
- Guides
- Templates
Anything that will act as a lead-magnet.
Elements you will need:
- One H2 tag with the benefit this resource will bring to their lives or businesses.
- A paragraph with a short description helping them understand more about the resource.
- 3 to 4 bullet points outlining benefits.
- One call-to-action.
- A thank-you page.
- An email template that will be triggered when the form is submitted.
- And of course, the eBook or resources you'd like them to download.
Pro tips:
- It is important to make sure they will only get this resource if they submit the correct email. Avoid, redirects to the download page.
- Use this list to nature your new lead. Send them an email asking them about their needs etc and include a low ticket offer or demo here.
- Make sure the resource's cover is catchy!
- Outline the benefits clearly
One Last Opportunity to book a call - Section 8
If they have scrolled all the way here, there is a big chance they are interested in your offer.
So, we can invite them to a special offer, or at least invite them to move on to the next step again.
Elements you will need:
- One H2 with the offer you have available.
- A paragraph with a short description inviting them to the offer.
- One CTA ONLY.
Pro tips:
- I like to make the offers look better here. So if you offer a trial, make the content about the trial really stand out here.
- Keep the contrast between elements here. You want the CTA and offer to standout.
Your home page, may not be the web page that you run ads to. But it is most likely the page that is first found on Google and other search engines.
It will also be the page that will be found when someone searches for your brand.
Hence, making this page works for you and move users through your buyer's journey is very important.
Keep in mind that not everyone will be willing to become a client. That is why a good lead-magnet here is so important.
