A website banner ad is a type of advertisement placed on a website, designed to promote a brand and drive traffic to another website that paid for the ad. Today, almost every website features banner ads, so how do you create one that stands out?
With the help of our experts, we’ll go over how to make a website banner, how to measure its success, and more.
Key Takeaways
- Leaderboard banner ads are the most common type.
- Ad placement is key to ensuring visibility and engagement.
- Ensure that every visual element of your ad, including color, typography, and logo, aligns with your brand identity.
- Website banner ads should be uniform across all pages.
- Creating engaging CTAs can boost traffic to your site.
- Monitor the CTR rates of your website banner ad, as they can point out potential issues or areas for improvement.
Table of Contents
10 Steps for Creating Website Banners With a High CTR
To help you design a banner that captures users’ attention and encourages clicks, we’ve compiled 10 steps used by top PPC agencies:
- Get your banner sizing correct
- Placement is crucial
- Understand the importance of hierarchy
- Keep your banner consistent
- Have a clear, simple, and effective CTA
- Keep your fonts and styles appropriate
- Consider animating your graphics
- Instill a sense of urgency
- Weight in the colors and how they impact the user
- Test, test, test!
1. Get Your Banner Sizing Correct
The first step in designing an effective banner ad is to ensure you have the correct sizes. Understand which dimensions you need to design the graphics and copy. For a comprehensive guide on sizing, you can refer to Google AdSense. However, here are some commonly used banner ad sizes for quick reference:
- 728×90px — Leaderboard
- 300×600px — Half Page
- 300×250px — Medium Rectangle
- 336×280px — Large Rectangle
Among these, leaderboard banners are the most commonly used. Here's an example of a captivating leaderboard ad:
However, leaderboard ads aren't the only format driving conversions. Medium rectangle banner ads, even though they're not the most popular, usually have a high CTR rate.
2. Placement Is Crucial
The second step is to consider where you’ll place the website banner ad. Rather than guessing where your users are looking and placing ads sporadically, you can use analytical data to take the guesswork out of your banner placement. Try using CrazyEgg or other user-tracking software.
For example, although your banner might be “above the fold” that doesn’t necessarily mean people will click on it if their attention is drawn toward a different section of the page. So, consider shifting the banner ad to the more engaging part.
Look for unsuspecting areas to place your banner ads that don’t interrupt the UX but still manage to gain attention and drive higher engagement.
For instance, a good test is to visit one or two of your favorite online news sites or publications. On Entrepreneur.com, for example, you can find a banner ad from WordPress strategically placed just below the featured news section on the homepage:
3. Understand the Importance of Hierarchy
The next step is to consider the website hierarchy. For a web banner to make sense, you must structure your site appropriately. The website banner design relies heavily on balancing three key components:
- Company Logo: This should be visually dominant to build brand awareness.
- Value Proposition: This section, which showcases the product or offer, usually takes up most of the ad space.
- CTA (Call-to-Action): This is a clear, simple action that you want the user to take. It’s typically placed at the end of the ad, making it the next obvious step after the user has absorbed the visuals and copy.
Adobe provides excellent examples of web banners that make use of strong hierarchical structure:
In these ads, you’ll immediately notice how the layout allows you to quickly point out the company logo and brand, the value proposition (such as an offer or discount), and the CTA, which is in a contrasting color that differentiates it from the rest of the coy.
4. Keep Your Web Banner Consistent
The fourth step is to focus on consistency. Your web banner will link to a page on your website, so you want to start telling your brand’s “story” from the moment the user sees the web banner. To achieve this, it’s important to align the design and messaging of your web banners with the branding on your website.
Why is this important? If your banner looks entirely different from your website, there’s a risk that customers might think they’ve arrived at the wrong place, leading them to leave.
Consistency in web banner design, when aligned with the company’s branding, can be incredibly powerful and compelling. A great example of this is Microsoft’s banner ads:
These ads do a great job of resonating with their audience because they mirror the design elements of Microsoft's operating system at the time. Using similar icons, fonts, and colors adds a familiar feeling to the ads. Not only does this make people recognize the ad, but it also reduces any potential friction between the ad and the website.
5. Have a Clear, Simple, and Effective CTA
For the fifth step, let’s go back to CTA. The CTA is your chance to clearly and concisely guide users on what to do next.
Without this element in your ad, even the most well-designed ad can leave users uncertain about what to do next. Here’s a good example of how to use a CTA to its optimal capacity:
Skype used its own brand colors to ensure that the CTA on its banner ads stood out above all else. What’s more, it’s a clear, simple instruction: “Watch the video.”
6. Keep Your Fonts and Styles Appropriate
The next step is to make sure that all elements are cohesive in terms of aesthetics, particularly the fonts and styles used. These should be appropriate based on the type of ad you’re running.
For example, consider the font used in this Starbucks:
Normally you might associate energy with colors or vibrant graphics, but Starbucks has carefully selected a font that allows them to align the banner with their brand colors and still evoke a sense of urgency, energy, and power. You can also easily do this with the help of good graphic design software.
7. Consider Animating Your Graphics
While animation is not a necessity, incorporating moving content can enhance your banner ad, as people today are more drawn to dynamic content. When used alongside effective copy and clean imagery, animations can create eye-catching and powerful web banners that capture users’ attention.
A useful tip is to use the animation to direct the user on what to do next, such as prompting them with messages like "Watch the video now."
Gamification can also work well on banners. For example, Volkswagen created an amazing expandable banner that lets you build the road for their car in under 30 seconds:
8. Instill a Sense of Urgency
The eighth step is crucial: creating a sense of urgency is one of the most effective ways to encourage users to click on your banner ad immediately. By using a sale or a promotion, you can drive more traffic to your website with phrases like “limited time only” or “24-hour sale.”
Presenting users with a short window of opportunity is exactly what you see in Cyber Monday or Black Friday banner ads. For example, this banner ad uses the “once a year” phrase to convey urgency:
9. Weigh In the Colors and How They Impact the User
Colors play an important role in the effectiveness of your web banner, often more than you might realize. For this next step, carefully evaluate the colors you use.
Color serves as a form of nonverbal communication and can greatly influence reading and comprehension. As a visual element, the brain can perceive and understand color a lot faster than text, so it’s typically the first thing people notice about your banner.
There’s no universal right or wrong when it comes to choosing colors. However, it’s helpful to consider which colors suit the context you want to build and ensure there's enough contrast to make the rest of the banner stand out.
For example, DELL uses a bright, distinctive color in its banner ad to grab your attention. It highlights the copy of the banner, while also separating it from the other visual elements:
10. Test, Test, Test!
Last, but certainly not least, make sure you test your web banner ads to make sure they actually work. Ask yourself these questions:
1. Are the colors displaying correctly?
Make sure you test your banner ad on several monitors.
2. Can you see all of the copy?
One of the most common mistakes is overloading a small banner with too much copy or designing it in a way that the text doesn’t display properly in the final version.
3. Is the font size right?
Play around with several font sizes and types. Choosing the right font can set the mood of the entire banner.
4. Are the visuals offensive/unappealing?
If the banner simply isn’t working, maybe the visuals are wrong. Or maybe they're on-topic but too boring to notice. Change up the visuals and play around with imagery to see what works best.
5. Does the CTA make sense?
Maybe it would be better to use different words or phrasing if your CTAs aren't getting any clicks. The difference between "buy now," "learn more", and "claim offer" can all yield wildly different results.
6. Does the link to the website actually work? Does it track the user?
Even the best ad banner design is ineffective if the link is broken or doesn’t display correctly. These issues can lead to a failed ad, and no brand can afford that.
7. Are the headings bigger than the normal copy?
Even banner copy must follow the right hierarchy. Ensure that the heading size corresponds to its importance. You can also partner with one of the top advertising agencies if you need help setting up website banners that bring results.
Measuring the Success of Your Web Banner Ads Using Click-Through Rates (CTR)
A widely accepted method to measure the success of a web banner is by assessing its click-through rate (CTR). The CTR is calculated by dividing the number of clicks on the web banner by the number of times it’s been viewed. The formula to calculate CTR is simple:
CTR = (Number of clicks / Number of impressions) x 100
For example, if your web banner has been viewed 100 times and received 5 clicks, the CTR would be CTR = (5/100) x 100 = 5%.
However, don’t always take the competition’s CTR as a benchmark. What works for one company may work for another, especially if your business works in a slightly different niche.
For example, in the machinery industry, part manufacturers might achieve a CTR of 5% due to less competition. In contrast, companies selling a specific machine might see a lower CTR, such as 1%.
To improve your CTR and enhance the success of your website banner ad, you can:
- Work on your copy
- Segment the audience into groups based on gender, age, sex, etc.
- Conduct A/B testing
Why should you focus on improving your CTR rates? Here are a few benefits:
- Brings more traffic to your landing page and brand
- Improves organic search and ranking
- Increases conversion rates
- Boosts Google Ad Quality Score
Tip: Use Google’s free tools to refine your criteria and identify the best ads and placements for your needs.
How To Make a Website Banner Takeaways
With digital banner ad spending projected to reach $227.4 billion by 2029, we can safely say that website banner ads are here to stay.
To make sure your website banner design works well, check these boxes:
- Correct banner sizing
- Good placement
- Hierarchy
- Consistency
- Clear and effective CTAs
- Appropriate and consistent font and styling
- Animated graphics
- A sense of urgency
- Adequate colors
Once these elements are in place, don’t forget to test your website banner ads. Consider partnering with top web design companies to help you place your web banners effectively and generate the most traffic.
Creating Website Banners FAQs
1. What is a good CTR for a website banner?
A good CTR for website banners generally falls between 0.5% to 2%, but these are just general benchmarks, and what is considered "good" can vary depending on the context. Effective campaigns also assess metrics like conversion rate and return on investment (ROI) for a comprehensive evaluation.
2. What is the best size for a website banner?
A commonly recommended standard is 1200x300 px for desktop banners and 320x100 px pixels for mobile banners.
3. Is banner blindness real?
Yes, banner blindness is a real phenomenon. Countless studies have been conducted on this topic, only to prove the same: banner blindness is real.
Internet users have become adept at ignoring banners due to their familiarity with Internet usage patterns. When they land on any page, their brains are already wired to go to the most logical places where they can find the information they need.
4. Are web banners doomed?
No, web banners are not obsolete. When done right, web banner ads remain a powerful way to reach your target audience. You shouldn’t throw them out the window without careful consideration.
5. How Much Do Website Banner Ads Cost?
In general, a website banner ad costs around $0.5 to $2 per click, depending on the payment model:
- Cost-per-click (CPC): You pay a set amount every time someone clicks on your ad. For example, if you set a CPC of $5 and aim to drive 100 users to your website, you would spend $500.
- Cost-per-impression: You pay based on the number of times your ad is shown, rather than clicked. This means you’re leaving it to chance how my clicks you get through to your website, but if successful you’ll get more value for your investment if the ad performs well. For example, if you set a CPM limit of $500 and your website is visited 150 times, then in theory, the CPI would be less than the CPC model.
-preview.jpg)
