The content of a website homepage requires a range of content to engage the user.
Header
The header is largely constant throughout the website. It should not change from page to page.
Logo
The website logo will usually sit in the top left corner. A centred position is also popular. It should be linked to take the user to the home page from any page.
Primary navigation
The navigation will usually sit top right in line with the logo. It may also sit either side or below a centred logo. There are many exceptions and different placements according to individual designs.
Shopping cart
Further right is the shopping cart icon.
Search field
The search icon is most commonly placed in the farthest right position.
Hero section
The hero section is a large, eye catching area. It should sit above the fold.
Hook or primary value statement
The first line of text in the hero section is large and bold. It can take the form of a hook such as a question or statement. It can also form the primary value statement spelling out the core value of the website offering.
Supporting or secondary value statement
This will be in a less substantial font, and will be wordier than the primary value statement. It may consist of one, two or sometimes even three sentences. It will support or expand upon the message in the primary value statement,
Primary call to action
The primary call to action is one of the most important elements on the front page. This button begs the user to click / tap it. For example, it may ask the user to sign up to a premium subscription. The primary and secondary value statements seek to convince the user to interact with this button.
Secondary call to action
The secondary call to action button isn’t always used next to the primary call to action button. It may also appear below the fold in a different section (or may not be used at all). Whereas the primary call to action may ask the user to sign up to a premium subscription, the secondary call to action button may be to sign up to a free subscription.
Image
The hero section should contain an image that alludes to or supports the written content. It should be eye catching, and meaningful.
Body
Services or products
The products on offer may be listed. This is pretty straightforward. For example, a digital design company may list their services in a row of icons such as web design, app design, etc.
Features
The feature content is closely aligned to the services or products. They may even be mutually exclusive. The feature content simply spells out the features of the product or service on offer.
Benefits
The benefits are also linked to both the features and services / products. The befits section will talk about the advantages the offering will provide the user, or perhaps how it is better than a competitor offering.
Problems solved
A different and perhaps more relevant way of looking at benefits is deferring to problems that the product or service solves. This indicates why the user needs the product in a similar way.
Purchase options
The purchase options may include the range or product offerings, a feature and price comparison, and the ability to purchase.
Trust building
Word of mouth has always been an effective method to spread good or bad experiences about a product or service. This is achieved on the home page by displaying the statements of the experience of other users. Social proof and trust building elements include:
Testimonials
Reviews
Statistics
Client logo list
Awards / certifications
Secondary call/s to action
Secondary calls to action may exist below the fold. This may be a repetition of the primary call to action, or a lesser action.
Link to resources / learn more
For the user to learn more about the product or service, there may be a link to a resource centre or another page within the website that provides more in-depth information.
Offering e.g. free article, subscription
Providing the user with some sort of free offer such as a free newsletter or white paper will validate the product or service.
Footer
The footer is similar to the header but in a more compact form. Additional information may be displayed such as social media and direct contact information. E.g.
Logo
Navigation
Contact information
Social media
Layout
The order of the content will form a hierarchy in terms of its relevance. However the layout may form a path which the eye follows such as:
Z model
Zig zag pattern
F pattern
Conclusion
Not all of the above needs to be included. The home page may be quite crowded if it was. However careful consideration of each of the elements above is worthwhile in deciding what to place on the homepage.
