The Ultimate Guide To Designing Website Ads [Banner Ads]

By Marketing Team Business Development No Comments on The Ultimate Guide To Designing Website Ads [Banner Ads]

What are Banner Ads?

Banner ads are visually enticing ads that can be placed on your website, as Google Adsense ads, or social media advertising. Banner ad design is simple and attractive to share new offers with the customer. They are a fundamental form of advertising on the web. Banner ads are typically used on websites to:

  • Upsell and showcase related products
  • Bring attention and awareness to featured deals
  • Connect visitors to other helpful sites

HTML5 Ads for Websites

Nowadays, it’s pretty much a must for banner ads to be responsive! In 2014, the percentage of mobile device ecommerce traffic reached 50.3% and the rate keeps on rising. Building responsive website ads can be time consuming if you don’t have the right skills or expertise. Using HTML5, it is easier to create these mobile and desktop friendly ads.

HTML5 helps you more easily create cross-device ad campaigns, so that you don’t have to create multiple versions of the same ad for desktops, tablets, and smartphones. HTML5 can include text, imagery, video, and Javascript animations similar to alternatives. In comparison to Flash ads, HTML5 website ads are chosen for use much more often.

TLDR: Banner ads are visually enticing ads. HTML5 helps you more easily create cross-device ad campaigns.

What is the Goal of your Website Ad?

The success of any ad banner depends on the advertisement’s purpose, content and design. An advertisement without a clear purpose or intention will waver and be inconsistent with the company brand.

Advertisements can have many purposes:

  • Encourage the purchasing of goods and services
  • Bring awareness to new products or deals
  • Educate your audience
  • Uplift and reinforce your brand

When you identify your banner ad’s purpose, you can refer back to it to clarify if it conveys the right information.

For example, an ad banner meant to encourage shoppers to join your loyalty program will not contain the same imagery that you might use when highlighting a sale.

How do I find my ad’s purpose?

First, think about previous banner ads you’ve created. Ask yourself these questions. Think about your future ads. And ask yourself again.

  1. What should your customer think and feel after viewing the ad?
  2. Is a specific element of your brand is the key focus?
  3. How will this ad be distinctive?
  4. What benefit will be shown in this ad?
  5. How will customers be rewarded for viewing or interacting with the ad?

TLDR: When you identify an advertisement’s purpose, you can refer back to it to clarify if it conveys the right information. Use questions to identify your website ad’s objective.

We created a Website Ad Design Checklist.
Start creating ads that convert
click here, it’s free!

What will your Website Ad Say?

Your ad banner content should be short and sweet. Use no more than four lines of text to get your visitors attention, convey your benefits, and direct them to the next step. Try a variety of approaches to convey the ad’s intention and purpose for your reader. Apple can successfully convey their product’s benefits in less than five words because they have already built their brand in the audience’s mind. Write your content to be applicable and relevant to both new and familiar site visitors.

Ad Structure

As a beginner, it is better to stick with a previously tested ad structure. This offers you the ability to easily gain effective results from previously tested methods; thus, lowering your risk of poor ad campaign performance.

Your ad structure should be as follows:

  • Logo, then
  • Value Proposition (the benefit you are offering), then
  • Call to Action (text or a button)

Value Proposition for Ads

When crafting your value proposition, remember to keep it short. When deciding on your ad’s content imagine yourself as your target customer. Your value proposition should answer what benefit your Call to Action will give your target customer. Focus on the benefits that will result from their action, rather than the features. As marketers and business owners, we often are lost in the features of our offering, but customers only care about the benefits the offer provides.

Website Ad CTAs

In all of your marketing approaches, have a strong call to action. A call to action is the request or recommendation to your reader of their next step. Some examples include:

  • Try it for Free
  • Get Your Free Report/Discount/Membership, etc
  • Get Started Now
  • Join Millions of Others
  • Sign Up
  • Send Me A Coupon
  • Show Me How
  • Subscribe
  • Buy Now
  • Give it a Try
  • Launch Now
  • Send Me Specials Now

It is important to use a call to action. Call to actions generate curiosity and anticipation and can increase your conversion rate by 22% (Source).

TLDR: Include your 1) company logo, 2) a value proposition, and 3) a CTA. Your value proposition should answer what benefit your CTA will give your customer.

What will your Website Ad Look Like?

In this last section, we help you understand why website ad design is very important. The design of your ad banner will capture and hold your visitor’s attention. To capture your audience’s attention, use small amounts of contrasting color and Javascript animations. This bright, yet appealing pop of color can draw more attention from the eye. Animations that make new content to appear in the ad will catch your visitor’s attention because something new will have appeared on the screen.

CTA Design

Design your Call to Action to be a contrasting color to your website and/or your ad. This will help it draw the eye of your reader. Although your Call to Action button should catch the eye, make sure the flow of your content makes sense by placing your Call to Action after your value proposition. Otherwise, the website visitor may not be swayed to engage with your ad.

Banner Ad Colors

Design your ads to align with your company’s brand. If you have yet to create a brand manual for your company, now is a good time. Choose a color scheme for your ad that complements your logo and the emotions you want to evoke in your customer.

The Meaning of Color in Marketing

Banner Ad Size

If you add an ad banner to your website, you can make the ad any size you would like. To remain as non-intrusive as possible, we recommend using the following sizes for your banner ads. This approach makes your ad rank well and easily find room on others websites:

Ad Banner Sizes by Limegrow

If you plan to showcase your ads on Google AdSense, design your ad to be in the Leaderboard (728×90 pixels) or the Medium Rectangle Style (300×250 pixels). These ad sizes were chosen most often in comparison to their counterparts.

  • The Medium Rectangle Style saw a 33% ad impression rate, and the Leaderboard style saw a 32% ad impression rate.

Ad Images

Any imagery you use in ads should help reinforce your value proposition. So, your imagery can help offer explanation to humorous content or trigger a vision in your audience’s mind.

  • For online food delivery ads, including a delicious close-up of your fresh food is an excellent idea.
  • Hotel advertisements could include imagery of vacationers enjoying the luxury and relaxation that comes with their hotel stay.

Choose your images wisely. Use simple graphics or icons that can reinforce your brand, product benefits, and your culture. If imagery can’t be chosen to support your value proposition or brand, don’t use it! Use typography and color choice to capture your ad’s purpose.

Animated Ads

Javascript animations can be used to:

  • draw attention to your ads,
  • to bring character,
  • and to provide more information to your site visitors.

Why animated ads?

Animated advertisements outperform static banner ads. Their duration should be no more than one loop at 15 to 30 seconds. Keep your animations simple and subtle to avoid being aggressive or pushy. You can also try changing your ad content along with your ad imagery. This approach typically is seen as more engaging.

Animated ads are perfect for social media advertising. They grab attention and are entertaining – entertainment is the reason why most people visit social media websites. Furthermore, animated ads engage site visitors for longer periods of time and have higher conversion rates.

Ad File Size

Have you ever reached a webpage just to find it lagged and was slow? This is one of the biggest reasons why websites have high bounce rates. After four seconds, half of your site visitors have already left your webpage.

It is important to keep your ad file sizes small. This will keep your website (or anyone else’s) fast and speedy. The Interactive Advertising Bureau (IAB) recommends a website ad file size of no more than 200 kb.

– Choose a color scheme for your ad that complements your logo and the emotions you want to evoke in your customer.
– Use ad sizes of 728×90px (Leaderboard) or 300×250px (Medium Rectangle).
– Animations should be no more than one loop at 15 to 30 seconds.
– Also, keep your website ad file size to no more than 200 kb. Design your Call to Action to be a contrasting color to your website

We created a Website Ad Design Checklist so you can create ads that convert – click here, it’s free!


Follow the Limegrow blog for more information on making your website shine!

  • Share: