Tips for an Effective Homepage Banner

Don’t panic about the statement we’re going to make, but homepage banner is one of the most important tools you can use for branding and if used incorrectly it can actually harm your brand and conversion rates. However, if used correctly it can help you tremendously in regards to your webpage users converting.

Further on, we’re going to explain what matters the most when deciding on a new homepage banner design.

Above the fold

We can’t talk about homepage banner tips or homepage design in general without mentioning the fold.

“Above the fold” in newspapers means the top half of the newspaper, i.e., the content which is visible above the fold of the paper. This concept has been around for centuries, since the very beginning of printed press, and is still present in the digital marketing era of today.

Similarly, when marketers say “above the fold”, what they mean is the part of the webpage which is visible to the user before scrolling down.

It’s essential that the homepage’s main banner is located above the fold, as well as the menu, header and at least one “call to action” for the visitor.

Why is above the fold so important?

It’s always been essential to have the most important content above the fold. The reasoning behind that has changed, though. In the early days of the Internet when connection speeds were low, it was common that Internet users did not read above the fold, because the content below just did not load fast enough.

Nowadays, the reason is mostly the short attention span of the modern Internet “surfer” and the need to get the most out of every website in seconds. Even though scrolling down the page isn’t a problem for today’s tech-savvy user, the content that loads first gets the most of their attention. Therefore this is the part of the page that should guide the user to the next steps of the conversion funnel. The first fold should flow naturally and draw the user in, for him to explore more and eventually convert.

Heat maps and scroll maps also prove this. They usually describe the average fold, which is the portion of the page users see on their screen without scrolling as soon as they land on it as the “hottest” part of the website, with the most mouse clicks performed on it.

This is a harsh truth, but If you don’t give the user what he wants in 5 seconds he might abandon your website completely. Instead they’ll go to search results and find your competitor, and if their page will immediately give the user what he wanted to see, he’ll stay on that page, eventually using your competitor’s services or products. Read this article to learn about 5 second tests and their usefulness in determining if users can perceive the purpose of your page fast enough.

There can even be found websites on the Internet that have fully sided with the “above the fold” strategy by eliminating the lower fold altogether. These websites are compact and fit everything into the top fold, without any content below. Homepages constructed this way usually are aesthetically pleasing to the eye, but may not work for all types of websites.

Homepage banner tips

Include a CTA

The first fold your visitor will see is your homepage banner. First, you definitely need to consider the goal you’re trying to achieve – whether it is to get more downloads to your newest app, learn more about your products or anything else. You must also remember that eCommerce websites are more “action-heavy” than other websites, so this applies to eCommerce sites the most. The goal should be reflected in the call-to-action (CTA) button. And the CTA button should be prominent.

Again, if the CTA button isn’t prominent enough or not visible at all, your visitor could end up simply not knowing what to do after they’ve landed on your homepage. The already mentioned short attention span has a play in this, therefore the bounce rate of your homepage will greatly suffer if there isn’t a visible CTA button.

See the example above from Grammarly.

They have two buttons – their primary CTA, which calls to “Add to Google Chrome” and a secondary one suggesting to “Check a document”. Isn’t it clear which action Grammarly is striving their users to choose? The option to add the extension stands out for most people, as it is more noticeable due to used colours.

Secondary CTAs, of course, are not mandatory, but they can help you lead your prospect into eventually completing the main goal – the desired conversion. It’s important to choose wisely, which of the options is more important for your business and match the visual presentation of your buttons to their importance. The button with greater visual weight (bigger, bolder in colour) will get more attention.

Use a clear headline

Along with the CTA, your homepage banner should include a clear, descriptive headline describing what it is you do. Think about the need to inform your new visitors on what is your site exactly about and what does your company offer. This won’t be essential for returning visitors, but is still a major thing to consider. Try using relevant keywords. That means if you are selling logistic services, use the keyword “logistic services”. It becomes clear instantly.

Avoid using your company’s slogan as the headline, as in most cases it won’t be descriptive enough. For example, what does “We create brilliance” exactly tell about the specific service or products you offer?

The value of your products or services is another component your banner should have. What makes you stand out amongst your competitors? Why should customers choose you? Use these answers.

Check out the example from Ahrefs.

Their main headline is straight to the point and descriptive, and not too revealing at the same time. Your headline shouldn’t tell the whole story, just engage visitors enough to want to read the next chapters and keep exploring your website.

Choose effective imagery

Now, let’s talk about images!

The same way as your headline, the chosen image for the banner should portray your message, product or service in the best, most describable way, bringing focus to what your site is about. Don’t overthink this. If you’re selling shoes, put a photo of a new shoe. If you’re a pet care center – put a photo of joyful pets as your homepage banner.

Selection of the image needs to be done very carefully, taking the technical aspects such as resolution and size into consideration. Don’t forget the proportions of the banner must match the proportions of the banner image window on your homepage, so take care of that by cropping the image exactly.

Oh, yes, and avoid stock images. People do not value fake content. Strive for authenticity. And we can’t stress enough the importance of picture quality. Blurry, pixelated images won’t leave a good impression about your brand and might even scare your future customers away.

Also, take the design of the rest of the homepage into consideration – colours, fonts, sizes, text placement. You should always choose an image that complements the rest of your homepage design.

Here’s an example of AirBnB portraying the accommodation service they offer in a great way. Wouldn’t you be excited to reserve your stay at a spot as nice as this one? While not being too over the top, AirBnB nicely show exactly what they offer.

Think about the homepage banner size

We’ve already explained that the image resolution, size and quality need to be paid attention to. The size of your banner image will determine how much other content you can fit above the fold. The bigger it is, the less stuff you’ll be able to show your page visitors on the first fold.

Sometimes, especially if you’re a company that offers a variety of products or services, you might want to decrease the size of your banner to leave space where you can tease the products or services.

Take a look at this example from Fiverr. They’ve managed to fit all the main components on their main banner and left free space above the fold for their “Popular Professional Services”.

Strive for simplicity

Don’t use too many colours, different pictures or experiment with fonts on your homepage banner. Remember to have counterbalance between the image and headline, so that the main message of your business and the action you want your users to take can be delivered to them without any problems or distractions.

Don’t overcomplicate things. The intent with you banner should be to inform the users about your company, communicate the main message and get those users into the sales funnel. Your homepage banner should never create a first impression of chaos, with users unable to find what they are looking for. “Less is more” and “simplicity is the key” are two rules that you can always apply when creating homepage banners.

Here’s an elegant and simple homepage banner example from Crazy Egg. Everything works just right with no distracting elements that could be considered “too much”.

Conclusion

Here is a quick recap of the tips we have covered:

• Reflect the goal of your business in the CTA button;
• Write a clear, descriptive headline with an explanation of what you offer, and avoid using slogan as the headline;
• Choose a good quality image of the correct size;
• Choose an image that portrays your company profile in a good way, and avoid stock images;
• Think “above the fold” and what you’d want to see there;
• Strive for simplicity (in colours, images, fonts).

Followed all these steps? Great! Your homepage banner is good to go live!

After a while, don’t forget to review it and update if necessary. Just like the values, products and services offered evolve and change for your company, your homepage banner should too. Same goes with technologies – browsers, devices, etc., and the ever-changing Internet user behavior, so make sure to keep up with the latest trends. And don’t just stick with one design. Be adaptive.

Still need some help with your homepage design and content? Not sure about your headlines and CTA? We’re always ready to help! Just drop us a line at [email protected] or click the orange chat bubble in the bottom corner, and we’ll kick off the optimization process for your homepage within 24 hours.

Share on: