Get more clicks with these web banner design tricks
Web banners are one of the most popular but also one of the most poorly executed digital marketing assets out there.
Being on the net means encountering an endless stream of web banner ads. The problem is that if you ask consumers which ones they remember, the chances are they wouldn’t be able to answer you. This is because most web banners go unnoticed due to poor design.
If you are a designer or a business leader hoping to improve the click-through rate (CTR) of your web banners, then you’ve come to the right place.
In this article, we'll go through all the boxes you need to tick to ensure your web banners get attention and are noticed by the right people—the target audience that’s more likely to click through to your website.
We’ll explain what you need to do to take your banner ads to the next level of creativity and impact, even if you have only basic resources.
What’s a web banner, and why should you care?
Most people know them as display ads, but web banners are only one of many types of display ads.
In short, they’re adverts embedded on web pages that promote a product or a brand. The aim is to get visitors to click on them to navigate to the company’s website and buy its products or services.
Web banner design involves following specific design criteria to enhance its effectiveness. It has become one of the most popular digital marketing strategies because you can tangibly measure its impact. These ads are also more affordable than other options like billboards or TV commercials.
Web banners consist of an image, your logo, text, and, most importantly, a call-to-action (CTA) button that prompts your audience to click on the ad to make their way to your website.
Consider the following benefits of using web banners:
- Increase traffic to your website: An effective web banner will attract more people to your website while they browse the internet. And, let’s face it, people spend a lot of time online, so this is a great space to be in.
- Spread your latest news: Whether you’ve introduced a new service, feature, or discount, web banners will spread the info far and wide.
- Enhance sales: If you promote a specific service or product on your web banners, you are likelier to increase your sales. Of course, how much more depends on the quality of your web banners.
- Retarget website visitors: Most people won’t be convinced to click through to your website or make a purchase the first time they see one of your ads. But if you post them consistently, you can retarget users and gradually convince them to take action.
- Promote brand awareness: As we’ve mentioned, web banners do a great job of getting more eyes on your brand. So, if you are a new company trying to gain traction, web banners should be a crucial part of your marketing strategy.
Web banners are an asset to your marketing campaign, so you’d better get the design up to standard. The campaign's goal should drive your approach, as this will determine your chosen CTA and design direction.
If you only have the time and skill to create simple web banners, we’ll start by walking you through the basic design elements that must be in place to make them clickable.
The basics of web banner design
The technical requirements
Here are the technicalities you must consider before considering the creative side. First, you need to know the different sizes for web banners. According to Google Ads, these include:
- 300 x 250px (inline rectangle)
- 336 x 280px (large rectangle)
- 728 x 90px (leaderboard)
- 970 x 90px (large leaderboard)
- 468 x 60px (banner)
- 300 x 600px (half-page)
- 160 x 600px (wide skyscraper)
- 250 x 250px (square)
- 200 x 200px (small square)
- 300 x 50px (mobile banner)
Of these banner sizes, the most effective and frequently used sizes that will make for the ideal banner size are:
- 728 x 90px (leaderboard)
- 300 x 600px (half page)
- 300 x 250px (medium rectangle)
- 336 x 280px (large rectangle)
As such, your first consideration will be whether your web banner conforms to the standard banner sizes, making it a high-performing banner.
Next, you must ensure that your banner ads are placed correctly on the relevant webpage. Make sure you buy space on a website where your design is guaranteed to appear above the fold and near the central content on the page. This makes it more likely that users will notice your ad.
Another technical requirement is to keep your file sizes as small as possible. According to Google Ads specifications, your web banners should be less than 150 KB. This ensures that your adverts will load fast so that users see them before they scroll past.
If your designer uses Photoshop or Adobe Illustrator, they’ll create web banners with image files in PNG, JPG, or GIF file formats, but if they use Adobe Animate or Google Web Designer, the source file will be HTML5. Keep in mind that Flash ads are no longer in use.
Finally, become acquainted with online platforms that have banner creators. If you don’t have a skilled web banner designer on staff, you must use a banner template library.
Linearity’s software suite has built-in sizing options for every kind of digital and print asset.
We also offer an expanding library of static and animated design templates you can customize for free. Try one of the online ad templates below:
Using templated ad designs means you don’t have to create branded banners for your business from scratch. It simplifies your digital marketing banner design process.
With these technical requirements in place, it’s time to move on to the creative requirements for online banner ads.
The creative considerations
From a holistic perspective, your banner design elements should be balanced. As we’ve mentioned, the relevant components of a web banner include the logo, an image, text, and the CTA button.
The logo shouldn’t be as visually dominant as your CTA or value proposition. The value proposition can consist of a line of text that presents what the consumer has to gain, such as a business promotion.
This can be a new service or perhaps the latest feature of your product. Keep this as short and punchy as possible, as your space is limited. You want to ensure your audience gets the message after quickly looking at the ad.
The most dominant element is the CTA button, which motivates people to click through to your website to access the value you have to offer.
Again, concision and impact are the order of the day. Examples include “Learn more,” “Get started,” “Discover how,” etc.
Change the size of your headline and body copy to make your text more readable, and ensure the copy is no more than four lines long.
In terms of the design of the copy, avoid a thin font weight and cursive fonts or scripts. We also recommend staying away from making the copy uppercase.
Ideally, your font size shouldn’t be smaller than 10pt. The only exception is if it’s a copyright notice or a disclaimer.
Each element should adhere to the principle of simplicity. Your audience will likely only scan the web banner as they consume other content. The more streamlined the web banner, the more likely they’ll get the message and know what to do.
This placement should be consistent across your various ads to make it easier for users to see.
A frequent mistake designers make is disregarding the visibility of the frame. Since people’s eyes automatically go to the subject within a frame, it’s crucial to have a frame that stands out. Make sure the graphics extend to the box’s edges. If you have a white banner background, considering including a 1px gray border around the ad image.
It should also come as no surprise that your color selections will play a significant role in the effectiveness of the ad. The general guideline is to create a web banner with color combinations that complement the website's colors but not to the point where it fails to stand out.
Lastly, let’s talk about image selection. The images you select must make sense in the context of your message. And if you don’t have access to a professional photographer or designer, you can always use stock photos or banner design stock illustrations.
Linearity Curve has a built-in Unsplash Library with a million royalty-free stock images for you to use and manipulate.
Jumpstart your ideas with Linearity Curve
Take your designs to the next level.
What may surprise you is that images are not always necessary. Depending on the brand and message, compelling copy accompanied by appealing typography can accomplish much.
Don’t limit yourself to what other brands are doing. Think carefully about what you want to communicate and how best to do this for your brand and audience.
Finally, consistency is vital. Your web banners must predictably reflect your brand's nature, meaning the advert must fit your branding and the landing page it directs people to.
Going above and beyond with your web banner design
Once you’ve mastered the basics of web banner design, it’s time to enter the big leagues by upping your creativity for even more impressive results. Here’s some banner design inspiration to create premium quality banners that perform better.
Add imaginative imagery
The most effective artistic principle is “show, don’t tell.” And in this regard, the right image can do much of the talking for you.
If you’re promoting a new menu at your restaurant, a creative, high-resolution photo of the food will reach your audience much quicker than text stating you’re offering novel dishes.
The more captivating the image, the more easily your web banner can be consumed. What’s even better is that you can alter your images, whether they’re photos or illustrations.
Play around with making the image sharper, brighter, or even adding some blur? Bring it to life using distortions, filters, or a glitch effect.
Another strategy is to create a photo collage rather than settling on one image. Naturally, this also depends on whether the size you’re going for allows this, but for lifestyle brands, this is a powerful way to evoke memories and emotions.
Also, don’t be hemmed in by standard imagery. Experiment with colorful shapes, lines, gradients, and textures to create abstract web banners that draw the eye. To see what this might look like, use an abstract design template.
Sometimes, we get so used to seeing images of products and scenes that we might forget how powerful a personal connection with a brand can be. To this end, why not create effective banner ads that display the face of your business or brand?
This could be an excellent way of getting users to make contact with the personality behind the brand, which is likely to be more memorable.
Use effective typography
Consider experimenting with overlaid text blocks. This enhances the readability of the text, especially if you’ve opted for a busier image in the background. Another option is to blur the image so the text stands out more.
The imagery must ultimately support the text, especially the CTA button.
You can also make the text more engaging by utilizing impactful fonts. Try something a little different to give your banner more personality. And, just as with imagery, you can add some artistic flair to the text with text effects. There are several platforms out there that offer this service.
And as long as we're breaking with convention, why not opt for a more creative design? For example, you can layer a small type over a more significant type or place the text design over background images. This works particularly well for sports and entertainment brands.
Finally, consider adding an interesting quote that captures the message you want to convey. You can make it more visually appealing by using an unusual font or combining it with a powerful image.
Get creative with the design
While simplicity is the rule of thumb for designing web banners, this certainly doesn’t mean you have to be boring. Here are some ideas for changing things up.
Whether you’re working with a square web banner, a geometric banner with triangles, or a vector illustration banner design, consider layering the various components creatively.
Just because you have distinctive elements doesn’t mean you can’t integrate them in unconventional ways.
Another effective strategy is to go minimalist all the way.
Sometimes, stripping the banner ad design down to its bare essentials can have the most significant impact, so don’t be scared to do away with components you don’t have a use for.
For example, on a realtor website design, you may decide that you don’t need any copy other than the CTA plus the image of the property for sale.
Either way, your only true task master when creating a banner for advertising is whether it communicates the core message, so don’t include unnecessary clutter just for the sake of it.
Consider using vector icons over complex images. Icons communicate concepts quickly and work well to create consistency across your marketing material. You can customize them and integrate flat-color icons into your background images.
Don’t underestimate the power of a simple branded web banner, especially if your goal is brand awareness.
There’s nothing wrong with an advert that communicates the brand and what it stands for.
Play around with company images of events and leverage some of the above creative techniques to tell the company story more unconventionally.
3 web banner examples
Let’s see examples of how other brands have applied the above principles to create clickable web banners.
Example 1: Under Armour
Under Armour’s logo is prominently displayed. In fact, it’s bigger than the CTA, which is quite unusual. This indicates that one of the primary goals of this web banner is to raise brand awareness.
The image is another dominant factor that works well because it shows their brand ambassador, basketball player Steve Curry, wearing the product. This gives the brand and product much more legitimacy.
At the bottom, we have the CTA button, which includes their web address. While this is a more traditional web banner, it effectively balances all the elements.
Example 2: Adobe
What makes this web banner so impactful is its minimalism. Rather than overcomplicating matters, Adobe opted for a simple, witty message that gets straight to the point: "Acrobat's got it."
The brand logo sits in the bottom-left corner. It’s prominent enough to be noticed because there’s a striking contrast between the brand’s red background color and the logo’s flat white hue.
The central message draws our attention to the CTA button, which offers a value proposition: you can try the software for free.
This shows that you don’t need complex layouts and that your design decisions must always be motivated by the core message.
Example 3: Mrs. Meyer’s
This cleaning product brand has taken a completely different approach by using a playful and whimsical illustration to display its limited-edition hand soap. The core message is showcased in large text, making it instantly visible. It also contrasts with the soft pink background, making it stand out even more.
The brand logo features on the product illustration at the center of the frame. At the bottom, the CTA stands out thanks to the white text on the dark red background, creating an impactful contrast.
The crafted illustration, classic lines, and limited color palette capture the brand's tone.
Crafting captivating web banners
Ready to create eye-popping web banners that capture views and clicks? You need the right design tools to build web banners quickly and easily.
Linearity’s platform excels at creating online ads with our extensive library of various industry-standard templates. You can also learn how to create a banner ad by following our step-by-step tutorial.
With these tools, you can select from a wide variety of predesigned templates, including:
- Vertical banner stand template
- Abstract design banner template
- Geometric banner with triangles
- Banner template vector
- Square web banners for social media apps
- Social media post banners
- and so much more.
It’s a fast, easy way of developing your marketing design skills.
Ready to try innovative marketing design software for your ad campaigns? Get started for free below, or check out our Pro and Org pricing.
Frequently asked questions
What’s a web banner?
A banner is a graphical display typically used for advertising or conveying a message. It often consists of images, text, and sometimes animations or interactive elements.
What are the key elements of effective banner design?
Effective banner design should include clear and concise messaging, eye-catching visuals, a strong call to action, legible text, proper use of color and contrast, and branding elements to reinforce brand identity.
What are the standard sizes for web banners?
Standard sizes for web banners include leaderboard (728 x 90px), skyscraper (160 x 600px), rectangle (300 x 250px), and wide skyscraper (300 x 600px). Sizes may vary depending on specific ad networks and platforms.
How do I choose the right colors for my banner?
Choose colors that complement your brand identity and evoke the desired emotions in your target audience. Consider factors like brand guidelines, the psychology of color, and contrast to ensure readability and visual appeal.
Should I include images in my banner design?
Yes, incorporating relevant images can enhance your banner's visual appeal and effectiveness. Use high-quality images directly related to your message or product, and ensure they’re properly optimized for web.
How can I ensure my banner stands out on a crowded web page?
To make your banner stand out, focus on creating unique and visually engaging designs. Experiment with creative layouts, bold typography, striking imagery, and animations. Consider the placement and context of your banner to maximize its impact.
How can I ensure my banner design is mobile-friendly?
When designing web banners, consider responsive design principles to ensure they display effectively across various devices and screen sizes. Opt for simple layouts, legible fonts, and scalable graphics that adapt well to different resolutions.
What are some common mistakes to avoid in banner design?
Common mistakes in banner design include overcrowding with excessive text or images, using low-quality graphics, neglecting readability, lack of a clear call to action, and inconsistency with branding elements. Be sure to review your design thoroughly to ensure it’s legible in various formats.