When you consider content and layout of your website homepage there’s two main concepts you need to consider. Firstly the homepage should be an overall summary of your website with links to reinforce your message, products and or services. Secondly is to “tell a story”. You should be providing an engaging story that entices your customers to take action.
In this article I’m going to be explaining how to achieve this. Plus, I will provide screen-shots from my own homepage to be used as an example. So let’s get started.
Your website goals
First thing you need is to have a set of goals that you want your home page achieve. Then define those goals. So an example could be:
- Placing more emphasis on increasing signups.
- Visually show-casing a product or service
- Going deeper into explaining your story
You should be thinking in terms of telling a story. And this can come in the form of visual cues. If we think about a page from top to bottom, you should be thinking in terms of:
- Who are we talking to?
- What do we want our users to think?
- What’s the intended goal?
This all funnels down to a clear CALL TO ACTION or payoff.
Consider User Patterns
With the evolution of the web over the year’s user patterns become more clear from research. Here are some common user behaviours when someone is viewing your website homepage.
- Traditionally the navigation sits in the header at the top of the page.
- The Logo is used as a home button. So in-turn you would not need to use the text “home” as a menu link in your main navigation.
- Users scroll down the page. Apps like Facebook and Twitter have allowed users to embrace the idea of scrolling. As with mobile, has also created the pattern of scrolling. So now not as much emphasis needs to be placed on “above the fold”.
- Another is the hamburger icon. Most users are now aware this is used for navigation. A necessity on mobile, some websites now also use this on desktop.
So we can consider these user patterns in our design. And we don’t want to really break away from these because that’s where we can lose users if they have to think too much.
Your Layout Strategy
So we already have our header with our logo and navigation. And our footer with reinforcing information. Let’s create our layout in between starting at the top.
Above the fold
Start with a hero image. This is considered like the front door, or cover of a book. Then we would have a headline or UVP (unique value proposition). Together, both convey the business’s high level goal and story. Lastly include a “Call to Action” button for users who have already visited the website and are ready to take action straight away. See the image below for an example.
USP’s, Business Bio, Services, Products
As we scroll down the page, we use the idea of the “Z” pattern movement of scanning a page. Research has shown the users scan a webpage in this fashion. So logical flow should follow this.
Continue telling the story with visual cues and copy. Go into the key elements that make up your product or service. This can be done through the use of USP’s (Unique Selling Points). Then a descriptive element. An example could be a paragraph of copy explaining the product or service. Just be a simply story that back up the USP’s above.
Social Proof
As you continue the next section should be about social proof. Social proof provides evidence that shows you are the expert or authoritative in your field. It’s really important to use social proof when telling your story because it’s used as a convincing mechanism.
People will be more willing to signup or invest in something when trust has been built. Examples could be testimonials or client logos.
Lastly from our first point of a homepage as a summary for the whole website. Each section should have links that go into the finer details to help users dive deeper before committing. Which helps reinforce the message or features. This flow isn’t a hard fast rule, but can be used as guide for general principles to follow.
*This article references Dennis Fields video on “Creating Marketing Homepages That Drive Results”
