In the digital era, online advertising is taking on an increasingly important role. One of the most significant forms of online marketing is banner ads. These are the graphic advertisements that lead to landing pages that you might notice displayed on all sorts of websites. The question then becomes do you click or continue scrolling? A great web banner will entice a reader to click by advertising a promotion, using a great image, being informative, or all three.
Before creating banner ads, you’ll need to ensure that you have a stellar website or landing page for viewers to reach after clicking the ad. To create a website, we recommend utilizing the professional tools that Wix has to offer. Once you’ve done that you can draw inspiration from your website for the design of your banner ads. This guide will take you through the best banner ad design practices and help you build a marketing strategy and create ads that demand clicks. We also include some great advertisement examples for inspiration.
What are banner ads?
A banner ad is an online display ad that directs traffic to a specific landing page. They appear in prominent locations on websites and can be static or dynamic. Typically banner ads can be found across the top or down the side of a web page although they occasionally appear in the middle of texts as well.
Banner ads are usually used as a business promotion tool. They can build brand awareness, highlight sales or promotions, generate signups and generally bring more traffic to your website. Importantly, banner ads enable website owners to directly measure results by understanding how many people clicked on a given banner and whether the ads led to an uptick in business.
Another aspect that makes banner ads appealing is how they work. Most web banners are delivered as programmatic advertising, which means ads are served to users who are most likely to be interested in the content of the ad. Algorithms match user preferences and browsing history to get the right ads in front of the right people. This is why that pair of shoes you looked at online a few times keeps sneaking onto sites where you read the news or look for recipes.
This type of targeting helps increase the return on investment, or ROI, of your ad budget. By presenting your ads to already interested or likely interested parties, you are more likely to get promising results.
Banner ads can function in a couple of ways depending on the service you are using to advertise. You might have a deal with a specific website, in which case you’ll likely pay a set price for your ads being on their site for a given period of time.
More commonly, advertisers use platforms such as Google Display Network which enables advertisers to have their web banners displayed across many websites. These types of platforms often run on a pay per click (or PPC) basis, meaning you pay based on the clicks your ads receive.
Types of banner ads
Banner ads can be static or dynamic with exact specifications determined by the ad delivery system provider.
Static web ads are designed as a single image that is most commonly uploaded as a JPG, GIF, or PNG to the ad network. For each different ad size that will display in a campaign, a separate piece of creative is necessary.
Dynamic ads, on the other hand, adjust to responsive designs. Rather than uploading a static image or graphic, you submit a logo, images or video and text that are algorithmically combined to fit banner ad sizes as they are served. These are often referred to as responsive ads and are the default ad type on the Google Display Network.
Banner ads sizes
To maximize the impact and ensure that banner ads appear properly, it is important to consider size specifications before you get into the actual ad design. Different size ads will show in various locations of websites and mobile apps and not all sizes will show at equal prominence or frequency. Here are some of the main web banner sizes that are typically included in banner ad campaigns:
Leaderboard: Position at the top of a page; common sizes include 728x90, 970x90 (large), 970x250 (billboard), 1920x600 (poster)
Skyscraper: Vertical ads placed in the sidebar position; common sizes include 300x600, 160x600
Rectangle: The most popular ad format because it can appear almost anywhere on a web page; common sizes include 300x250 (medium rectangle), 336x280 (large), 180x150 (small)
Square: May appear in the sidebar or spread throughout content; common sizes include 250x250, 200x200 (small)
Mobile: Many mobile ad sizes are scaled down versions with the same aspect ratio of desktop browser specifications but because of the small size separate creative is often recommended; common sizes include 300x50, 300x100 (large mobile), 300x200 (mobile full page), 250x250
Popular ad display networks such as Google, YouTube, and Facebook use common sizing and are considered some of the best sites for online advertising. If you place ads with a specific website rather than an ad network, they may have varying specifications. Always ask for ad specs before starting a banner ad design or use a tool like an image resizer to help you.
Banner ad design tips
In order to ensure that your web banners are competitive and enticing, we have compiled some banner ad design tips to guide you through your creation process. The key to a great banner ad design is ensuring that it stands out from surrounding content and that the design is easy to read at a glance. Generally speaking, banners should be light and have a high visual impact. They should also have a small amount of text and a direct call to action. Here are some more specific guidelines to consider when creating a banner.
Start with a high-quality visual
The basis for a great banner ad is the visual it is designed around. This could be an image, video, or background effect. Whichever you choose, it is vital that the visual element is high-quality with a high-resolution.
A high-quality visual is:
An identifiable image that’s in sharp focus
Easy to understand at a glance
Isn’t offensive
Adheres to ethical advertising standards
Directs focus to product or what ads is about
Unique to your company or brand
Not stretched or sized improperly; 1.91:1 (1200x628 px) or 1:1 (600x600 px) aspect ratios are most common
Design with brand in mind
The goal of any banner ad is to bring attention to your product, business, or brand. Ensure that your brand is represented in the creative material by designing with brand standards in mind. Consider using your logo, colors and brand voice in ads. A secondary, icon style, or wordmark version of your logo might work best for smaller ad sizes.
Use standard sizes and placements
Standard ad sizes exist for a reason. Unless you are placing banner ads on a specific website with unique specifications, create ads using the most common standard sizes first and then expand from there. The three most popular sizes are medium rectangle, leaderboard and mobile.
Include a prominent CTA
While banner ad impressions can be an important metric, nothing is more valuable than a click. A prominent call to action is one of the most surefire ways to help people see the ad and then interact with it.
You can design the call to action as a button which opens the door for engagement. An effective CTA button will likely be large, stand out in color and include microcopy that instructs users on what to do next. Some good CTA examples include “learn more,” “shop now,” “sign up,” “free trial,” or “get discount” inform users on what will happen after they click the button.
Use simple, easy-to-read fonts
Banner ads can flicker on and off a screen in an instant. It’s therefore crucial that you use fonts that are clear and quickly legible to ensure that your message is delivered in a split-second.
Sans serif fonts such as Open Sans, Lato, or Roboto are a good place to start. Opt for a medium or bold weight and avoid thin or condensed fonts that increase reading time. It is also advisable to avoid fonts smaller than 12 points.
You can also consider designing a font hierarchy with two font options – one for the headline and one for all other text – to enhance readability. A best practice is to stick to one font and create hierarchy with size, a bold weight, or all caps for headlines.
Keep text to a minimum
Banner ads aren’t designed to handle a lot of content with an ideal ad containing less than 10 words. This means you should aim to write direct and succinct copy to help readers digest your ad instantaneously. Typically ad text should follow the rules below:
Ad headlines should be less than 30 characters
Ad body copy should be less than 90 characters
Mobile ad copy should be less than 35 characters
Use keywords
Ad copy should use some of the same keywords as your website text. Similar phrasing, value propositions and taglines can help create a strong brand connection.
Put ads in a box
When designing an ad, put the content of the ad inside of a box or frame. A frame can make the ad easier to see directing the eyes to the right place. It also keeps design elements together in an orderly fashion.
Many brands include a .5 to 1 point black or gray border on ads to establish this separation. Another option for boxing includes using a colorful background for ad content. This can create an innate boxed design without having to include a defined border or frame.
Animate it
Moving images are attention grabbing and easy to implement. Turn your ad image into a GIF with a subtle bit of motion to draw attention.
Animations could include product images that slide to another view, a person smiling or waving, or a simple text movement or color change. You should also aim to create natural animations and avoid flashing or blinking ad designs. Flashy designs tend to look like spam and can be rejected by some ad networks.
Use appropriate file formats
A banner ad must be capable of loading quickly to ensure that users don’t miss it when they scroll. Use appropriate file formats sized to specification and saved in the most lightweight manner possible so that your ads are built to render at lightning speeds.
Banner ad deliverables may include:
JPG
PNG
GIF
SVG
HTML5
You should also consider compressing PNG or JPG files before submitting.
Design a campaign
Design banner ads in multiple sizes that can work together across the web as one campaign. While each ad may look a little different due to varying aspect ratios, using similar imagery and language can create a more lasting connection with users as they see ads in different places, increasing the chances of a click.
Some websites will also allow you to run multiple ads on the same page at the same time for more of a blanket impression, so it is key that the ads are consistent.
Consider size and scale
While it is possible to adjust a leaderboard ad to the corresponding mobile size, it’s probably not the most ideal. Instead, design each ad while thinking about the viewing size, placement, and readability on each given platform.
Images, video, and HTML effects have the most impact at the largest sizes. Many mobile ads however, do not include images because they are so small that they can become difficult to understand. Text and color are better visual tools when it comes to the smallest display sizes.
Test multiple ads
Create multiple design options for campaigns that allow you to test which designs are most effective. Look for commonalities that you can use in future campaigns and ask yourself the following questions:
Do certain colors generate more clicks?
What sizes are most popular for your campaigns?
What CTA microcopy generates engagement?
Do ads with images or videos prove more effective?
Did animation increase click-through rates?
Running a design test can help long-term ad campaigns perform better and give you the tools you need to develop higher-performing banner ads for your business or brand.
To truly solidify your ad efforts and complement your banner ads, you might also consider learning about other types of advertising outlets and paths. You can learn the specifics of how to launch a Facebook ad campaign, how to advertise on YouTube and how to advertise on Google to start mastering the online marketing world.
9 examples of great banner ads
The best banner ads stand out because they do something different. It can be due to the design, placement, message, or even timing. We’ve compiled a list of great banner ad examples to showcase some of the best practices in web banner design.
01. #MAKESMALLBIG
This holiday market ad by Goldman Sachs uses a hashtag in the ad copy. This not only helps the ad stand out from others, but can also help connect campaigns across the web and help your ad gain traction.
02. Sperry
This vertical banner ad excels in its simplicity. It provides an easy to understand visual, direct language that appeals to anyone needing boots, and a link to shop.
03. Comcast Business
Some advertisers opt to take advantage of their banner space with great copy. With a simple background, this horizontal ad benefits from a text-only design with a CTA and logo.
04. Spanx
Spanx chose to amplify a special promotion in this banner ad. They chose a fun text and a high value proposition which can drive clicks. Note the color connection between the headline and “shop now” button.
05. AdEspresso
This banner utilizes a button that sells the benefit of a click which can encourage users to take more immediate action.
06. Investopedia Express Podcast
This banner promoting a podcast provides understandable text hierarchy and a clear image as well as a descriptive CTA.
07. Allbirds
When it comes to banner ads for products, the design should focus on the item with a simple background that doesn’t get in the way. This Allbirds banner does just that as it opts for the most basic colors and prioritizes the product over the text.
08. M&Ms
This M&M ad uses a staged image which can create a more natural campaign. It also uses a light background to help the product pop.
09. Hulu
With an all-text display, this Hulu ad stands out because of the contrasting colors, a strong value proposition and witty text.
Looking to explore more types of advertising? Check out this guide to native advertising.