Landing Page Design: How to Create High-converting Heroes
Welcome to the first post of a blog mini-series about landing page design. This series will use lots of live website examples to highlight common themes, best practices and tips for designing a landing page that converts.
In this first installment, we will be looking at “Website Heroes”.
What is a website Hero?
A website hero is usually the first thing visitors see when they land on your site. The hero is a large, prominent section at the top of a landing page. It is designed to quickly show who you are, what you offer, and what users should do next.
Hero sections are usually made up of (or include):
A Headline - a main headline that clearly explains what's on offer.
Sub-headline - A secondary supporting headline that complements the main header, but gives more detail or context about the offer.
Call-to-Action Button (CTA) - Should clearly show users what to do next using action words (eg “Get my free guide”).
A visual element - This could be an image, illustration, video or an animation that supports the message and makes the page engaging.
Below is a good example of hero message structure.
This example also includes social proof under the CTA. This is less important than the headline and CTA, but including review statistics near the top of your page adds instant credibility without detracting from the main message.
The Visual Element
An important part of the hero composition is the visual element. This is often what has the initial impact when a user first lands on the page. Depending on the landing page offering, this could be a product visual, screenshot (for an app or online service), video or illustration.
A good visual engages the user and further supports your messaging. The visual style and background should also reflect your branding.
Below are some examples from Beer52, Go Henry, SEO Monitor and Runna. These examples show a good mix of product imagery, illustration, photography & screenshot based visuals.
Considering the fold
The “fold” refers to the part of the page that is immediately visible before the user scrolls. The term originally comes from newspapers. The most important headlines were placed on the top half of the front page so they were visible on newsstands.
Due to the nature of a hero section, they are typically always within the fold area. One thing to consider is should your hero area be shorter or fill the available screen space.
A shorter hero area will bring subsequent sections of the landing page into view, which can help encourage scrolling. Whilst a full screen hero view can be more impactful and be more focused on one main message.
Take this Interesting example from simmereats.com. The Simmer homepage has various media logos as part of its hero area. However, they intentionally split the scrolling logos over the fold line (at all desktop screen sizes).
These well known media outlet logos are still instantly recognisable and add credibility. However, the fact the logos are partly cropped out of view teases page continuation. This encourages users to scroll down the page and learn more about what Simmerats has to offer.
These 3 car buying sites (We buy any car, Motorway and Carwow) all have a shorter hero area, which brings other content into view.
All 3 landing pages have a very similar approach. The Reg input & CTA to start the car selling journey are the focus of the hero area. This is then followed by an explanation of a 3 step selling process, which breaks over the fold and leads to the rest of the page. Trustpilot stats are also included in the hero composition.
Be clear, not clever
It is important to use simple language in your hero that quickly explains what your landing page offers.
Canva’s hero area is a great example of simple language. The question-based headline alludes to unlimited possibilities of what their users can design, whilst the sub-headline adds clarity with some of the most common design outputs.
The call-to-action button language is also very effective. It encourages users to “Start Designing for free”, making it clear the service requires no financial commitment.
Hero Checklist
To summarise, here is a quick checklist for creating high-converting landing page heroes that will drive interactions and showcase your credibility.
A clear main headline that explains your offer
A sub-headline that adds detail using simple language
A clear CTA with one main goal
An engaging visual element
Consider the fold
At Evoluted we understand the importance of designing a landing page that resonates, engages and converts. If you want to improve your landing page, contact us today to learn more about our web design services.
Creative Director Will has been with Evoluted since 2011. In his role leading the design team, he continues put his extensive experience to use on an impressively-diverse array of websites. Will’s core skills include UX design, creative direction and responsive web design; whilst he’s also earned a renowned reputation as Evoluted’s chief provider of internal, novelty animated gifs.
