Digital GrowthFeaturedUX & Design
Ilze Slukuma

Written by:Ilze Slukuma

Digital Marketing Specialist

Thursday, July 11, 2019

Tips for an effective homepage banner

Tips For an Effective Homepage Banner

The importance of 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.

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.

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.

Grammarly homepage banner 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?

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.

Ahrefs homepage banner 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.

Airbnb homepage banner 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?

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.

Fiverr homepage banner 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.

Crazy Egg homepage banner 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.

Let us help you!

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 marketing@scandiweb.com or click the orange chat bubble in the bottom corner, and we'll kick off the optimization process for your homepage within 24 hours.

loading...
Heart sign
thank you

We will contact you as soon as possible

Warning sign
something wrong

Please check fields and try again

contact us