top of page

How to craft the perfect home page

Your site's home page is the most likely page a user is going to land on first. So, it's important that your first impression is spot on and you keep them on your site.


The role of your site is to convert users into customers and consumers of what you provide.


It can be challenging to create a home page that works. So, here are some tips to point you in the right direction.


Before we dive into crafting the perfect home page, you must understand how people consume website content (specifically the above the fold content).


The F-Pattern

Users first read in a horizontal movement. Usually, starting in the top left-hand corner of the screen and scanning across the top (this is where the header of your site appears). This first scan forms the F's top bar.


The user will then look slightly further down the screen and again, read-across. This second scan forms the F's second bar.


The final scan, you guessed it, is vertical down the left-hand side. This last scan creates the stem of the F.


It's important to emphasise that the F pattern does not have to follow a traditional 'F' with two horizontal bars. It may consist of having multiple bards, but the F pattern is still obvious.


The Z-Pattern

The Z-Pattern has many of the same characteristics as the F-Pattern. Usually, the content on these pages is a little looser and guides the reader through simplicity. The Z-pattern is commonly used on landing pages where a singular focus is needed to make a user take an action. To take advantage of the Z-pattern, your call to action should fall along the path of the Z to ensure your user sees it; leading to more conversions.


Now that you know how users interact and consume content, we can explore how you craft the perfect home page.


Site Structure

Logo

Your logo is considered the most recognisable part of your brand, so you must include it on your site. The most common place to use your logo is in the top left-hand corner of the screen.


The reason for this is it makes your brand instantly recognisable, affirming to the user that they have landed on the correct site.


Imagine handing a business card with your logo on it to a potential customer. They head to your site to find your logo isn't in the above the fold content. How do they know they are on the correct page?


Using your logo in the first bar is vital to building brand loyalty with your customer. Every time they visit your site, the first thing they see is your logo.


Menu

Site menus (navigation) are commonly found in the top right corner of the screen. Putting your menu there means it is easy to find when you navigate to a new page.


A common mistake I've seen is to have a ridiculous amount of menu options. If your navigation bar has more than 7 options available, then you should consider restructuring your site navigation.


There are exceptions to this rule. Sometimes you will see large companies with more than 7 options, but this is because they are international businesses with budgets for their marketing teams larger than you could imagine. They can afford to take a hit within this area.


Headline

The headline of your home page is the large piece of text that usually sits in the middle (vertically) of the above the fold content. This piece of text should be just a few words to summarise what your website is all about. In addition, make it large to attract the attention of your site visitors.


At the time of writing, Spotify's headline says 'Listening is everything'.




Subheadline

The subheadline is found directly under the headline and expands on what the headline says. If we continue to look at Spotify, the subheadline they use says, 'Millions of songs and podcasts. No credit card needed.'


Primary Call To Action

Your primary call to action is the action you want a user to take. It might be 'Buy Now', 'Contact Us', 'Visit Our Store', 'Order Now'. Your primary call to action is the most important action you want a user to take.


Now, this is just how to structure the above the fold content. There are many more sections that you can, and should, include on your home page, but the most important part is the above the fold content. This section helps the user decide if they want to stay on the site or leave.


Your homepage is not likely to be the most profitable part of your site, but it is the most powerful. It's the page that forces a user to take an action and become a customer and consumer.


Copy is as important as design

When starting to design and build your home page, you can quite easily fall into the trap of thinking solely about the design and how it looks. It's understandable why; good design helps the user navigate the page and leads them to take an action.


While yes, this is true, your homepage copy is equally as important.


You need to understand the role of your homepage, which is to affirm the benefit of your product.


The only way this can be achieved is through your copy.


One thing you should take into consideration is that users don't care about what you sell. They care about how they get value from your product.


Here are a few tips for writing the perfect headline text:

  • Start with an action verb such as 'order' or 'get'. These encourage the user to take the action your verb is telling them to do.

  • Make a bold claim. This doesn't mean exaggerating your product. Make your product stand out from the crowd. Why is it different?

  • Talk directly to your user. Don't make them feel like they are part of the crowd; speak to them directly.

Here's a tip for when you write about the features of your product:

  • Know your audience's problem and target it. If the problem is time management, turn it into a relatable scenario for them. Link the problem they have with the feature that solves it.

Create a sense of FOMO (Fear Of Missing Out):

  • Make your user feel as if they are missing out if they don't use your product. '4000+ free trials started' is just one example of creating FOMO.

Make it easy for your users:

  • Join our community. It's free

  • Free trial

  • Cancel anytime

Motivate a user to take the next step:

  • Be specific about how easy it is for users. Your user doesn't want a difficult solution, they want an easy one. So, it's your responsibility to make it easy for them. 'Join Us' can become 'Start learning'.

  • Reassure them they are making the right decisions.


The 7-second test

If you've read any of my previous blog posts before, you will have seen me mention the 7-second test.


This is the idea that the average person takes 7 seconds to decide if they want to stay on your site or not. In that 7 seconds, you have to keep them on the site.


The best way to perform this test is to find a neutral observer to take a look at your home page. You should give them 7 seconds to tell you these 3 things:

  • What your product is and what problem it solves

  • Why they should care

  • What you want them to do next

The window of opportunity you have to convey these things to a user is small. If you can accomplish this, then a user will recognise your site as trustworthy.


Testimonials

Testimonials are the single most effective way of building trust with your audience. It adds credibility to your business and further removes any doubts that a user may have about your product. It also plays on FOMO as a user reads about how other people think your product is amazing.


Next time you visit an Amazon product page, take a look at how many reviews the page has. You may be surprised!


Things to take away

  • Structure your above the fold content correctly.

  • Include your primary call to action in the above the fold content and at the bottom of the page.

  • Include trust-building elements

These steps are just the beginning! There are many more things you can add to your site to improve it, but following these steps will put you on the road to success.



Looking for your own site? Need an expert to help? Get in touch and we'll help you on your journey.

Noah Lovell

Noah Lovell - Web Designer








Directories

Search And Filter

A Year In Review - Year 1

bottom of page