Above the Fold: Best Practices for Website Hero Design

Website design doesn’t have to be hard. Even if you’re using a sitebuilder and don’t know how to code, you can quickly adopt best practices for design.

This article takes a look at one of the most important aspects of your entire website, maybe THE most important: The Hero Section on the homepage.

We’ll define what this means, walk you through some examples, and give you the basics needed to quickly create a homepage Hero that works.

And what’s the end goal? More time on page from visitors, more clicks, more attention, more conversions, and more revenue for your business.

What’s a Hero Section on a Webpage?

The “Hero” section refers to that area at the top of a page, often just beneath the menu but before you scroll down into more granular details of a website.

On mobile, it may only be a small box with a logo and tagline, while on desktop it could include several lines of copy, perhaps a button or two to click, and images or videos showcasing what the site specializes in.

Designers will often talk about the “Hero Image” and this is the image (or video) that often accompanies this section. Maybe it’s a happy homeowner signaling that this real estate agent helped them find a great home. Or a mind-map image of software for a company that creates software integrations. Regardless, it relates to this Hero area.

A related term you may hear is “above the fold.” This hearkens back to newspapers where the newspaper itself would be folded in half and the top headline would be above this fold so that it could catch peoples’ attention.

Similarly, anything you need to scroll to see is beneath this metaphoric fold on a website. The above/below cut line will be slightly different for users depending on their device type (mobile, tablet, desktop) and screen size.

This section really should be the “hero” of your homepage, and of many individual pages on your site. It’s the section the most people will see, and it needs to hook them enough to want to do business with you.

Elements of a Hero Section

We touched on a few above, but to codify common elements of a Hero section:

Company name - Who are you?
Company services - what do you do?
Audience - who do you serve?
Biggest value statements - what separates your company?
Images or Video - showcasing the company and its products or services
Call to Action - a button, link or other area that prompts the user to take an action on the site

Some of these will be sacrificed on mobile, or depending on what’s most important for you to showcase. Other times you’ll want to expand these out a bit, such as offering 2-3 calls to action in the Hero section.

The Z Reading Pattern

Think about how you read. Left to right, and you read the top line first, then the one below it, and so on.

This is baked into our scanning and reading habits at a subconscious level. This matters for website Hero design.

When a user gets to your website, they’re most likely to scan along the top (reading left to right), then they skip down to the next relevant section and again read left to right.

This forms a Z pattern with their eye movement and attention.

Hopefully you can see why this matters for design. You now know how most users will interact with your website when they first arrive. Your design, copy, and calls to action should mirror this.

Present the information you want the user to interact with in a Z pattern, ending the above-the-fold section with a call to action, usually at the end of the Z pattern in the bottom right.

Can other layouts work? Yes, they can, and website designers will happily tell you about exceptions to this rule that they’ve seen. But it’s a general rule for a reason, and so if you don’t have a compelling reason to lay out your homepage differently, this is a good rule of thumb to use.

Focus, Attention and Clarity

One big thing that people often get wrong about Hero section creation is that it lacks clarity and focus.

Perhaps you offer half a dozen different services and want to talk about them all.

Perhaps you want to proclaim your values as a person or company. This is great, but it’s better served elsewhere.

The advice I usually give is to be as direct as possible. Who are you, what do you do, and who do you do it for? Answer those things as succinctly and clearly as possible, and that’s probably all the copy you need in your entire Hero section.

Confusion kills engagement with your website. A delay in understanding is the same thing as confusion. Tell people exactly what you do, and you’ll keep the users who are genuinely looking for those products, services or information.

Confusion also occurs with too many options. Limit your Hero section to three clickable items at most. And ideally, you’re only asking them to click a single button or areas that leads to one particular action.

Wanting to do too much in a Hero section is the number one mistake I see companies make in this portion of their website. This even includes some websites we've worked on here at Leadflask. It's an easy trap to fall into.

There’s power in focus, and this is corroborated by a lot of studies on how people use websites. Pare down your Hero section until it says only what it needs to, and directs people to the most important action they could take on your site.

Your Call to Action

That last point leads us into a deeper dive into calls-to-action (CTAs).

There will be many of these on your site:

Sign Up For Our Newsletter
Get a Free Quote
Download Your Free eBook
One-Click Purchase
And many more…

Some salient points in regard to CTAs:

#1: To get a user to do an action, you have to prompt them

No one will do anything on your site if you don’t give them the opportunity. Don’t be shy!

#2: Keep asking

If they didn’t click on that “Subscribe” button the first time but are still on the site, keep giving them opportunities to do so. A single CTA is rarely enough to capture a lead or a follower.

#3: Limit your CTAs to the most important on each page

Eight different CTAs on a page will overwhelm the user. It’s considered a best practice to limit your CTAs. Ideally, each page leads to one specific action. Maybe two, particularly if it’s a longer article or page and you can break up the design with CTAs at different points.

#4: Keep them relevant

Someone on your roofing page probably doesn’t want your home HVAC eBook. Think about the audience for a page and cater the CTA to their interests.

Mobile Hero Design vs. Desktop Hero Design

The more obvious fact that there’s less digital real estate on a mobile device compared to desktop leads to a lot of adjustments to the advice above.

It’s even more important that your copy is clear and the user knows what you offer. Several items may need to move below-the-fold on mobile devices. And you’ll want to make sure that nothing important is being cut off on the most popular mobile screen sizes.

Most website builders will let you test the design on various screen sizes, any good website designer should be doing this on their own, and you can also simply visit the site on your phone and have your friends or coworkers do the same for some anecdotal testing.

You can usually get some of this space back by collapsing the menu on mobile. This is why the “hamburger” menu that’s just three horizontal lines is so popular on mobile devices. It allows sites to avoid having to show their entire menu on your mobile screen at the start, which could easily take up the entire screen (or more!).

What’s Beneath the Fold on a Website?

And what comes after the Hero section? Well, everything else. That’s a bit beyond the scope of this article to cover in detail, but a lot of it is just extrapolating on the core items that your Hero image discusses and shows.

You can outline your process, highlight your products, show case studies, tell more about your company or business itself, highlight ancillary services that are outside your core offerings, provide career or contact info for those interested, feature videos, articles, podcasts, and more.

Hero sections aren’t only for your homepage though. It’s the “first impression” for any page, and so while you don’t need to follow these guidelines for every page on your site, major landing pages that cover core products or services should probably be keeping these principles in mind.