Here's how to get a jump on your average click-through rate by designing an effective web banner ad

Business Team Corporate Marketing Working Concept

Ah, the humble website banner.

A one-time heralded introduction to Internet advertising, they’re now hated and blocked just as much as their ugly plain-text predecessors.

But they still play a critical role on the online advertising landscape, and ensuring that yours are visually impactful (it’s all about attracting eyeballs fast, remember) is key.

In this article, we showcase 20 incredibly eye-catching website banner ads. You’ll come across Canva banner templates throughout. Clicking on them will open the template in your own Canva account, for you to customize as your own.

01. Spotlight your logo


Showcase a beautiful logo or mark by placing it front and center on your ad. Buatoom show us just how in his banner for Omise.

Edit this Bridal Planning template in Canva.

02. Go flat

Alex Collins

Flat illustrations are here to stay. And they’re also beautiful visuals that’ll liven up any banner. Alex Collins has textured his in the example above but, if you’re not into texture, you can leave them perfectly flat.

Get the look with this template: Purple Website Launch Wide Skyscraper 

We have a lot of illustration options in our library you can use if they’re fitting. Add them to your favorite template or customize one feature flat illustrations already.

03. Play with blurs

Blur are commonly seen in user interfaces. However, they’ve been making a jump into other bits of design, including banners.

Alexander Tolstov

Get the look with this template in Canva: Cosmetics Collection Advertisement Leaderboard

Blurs, like the one in our template above, can help you highlight a headline or logo quickly. They also add a little depth to compositions, which is always fun.

04. Use the grid

Grids are organizational tools you can use to facilitate the design process. They’ll take a few minutes to set up but in the end, will save you loads of time.

Houzz Banner, designing an effective web banner ad


Get the look with this template in Canva: Sports Wear Photo Banner Wide Skyscraper Ad

The solutions you create don’t have to be complex either. Often, it's as simple as lining up a few stunning images.

05. Try a monochromatic palette

Think monochromatic is boring? Take a look at the ad below. Fashioned in brown hues after earth day, its dynamic, fun and anything but boring.

Raquib Ahmed

Get the look with this template: Monochromatic Photo Sale Retail Facebook Post

If you don’t want to stick to one hue only, use variations of a couple of colors as we’ve done above.

06. Stack your type

Type layout can help you direct viewers attention. If you want to highlight your CTA, stack your type above it. Viewers eyes will work their way down towards it.

Starbucks Ad, designing an effective web banner ad


Get the look with this template in Canva: Ice Cream Shop Wide Skyscraper 

Stacked type that is set and styled the same way will result in a boring composition. It’s important that you vary both of these characteristics if you want to work with stacked type. Don’t want to deal with it? Feel free to work with one of our solutions.

07. Try bold, contrasting colors

If you’re unsure of which colors will create contrast, break out your color wheel and select complementary colors. You can also go with unlikely color combos, like red and purple. They’re not complementary but can help you achieve contrast as well.  

Spotify Ad


Get the look with this template: Pink and Yellow Fashion Facebook Ad

To push our template further, we’ve selected visuals that feature contrasting colors. Remember, to edit a template simply give it a click.

08. Go with the classic color overlay

Color overlays offer an easy way to stylize images. They work well in a single shade or using 2+ colors. They don’t have to be solid either. Below, we’ll see examples of gradient overlays.

American Apparel Ad

American Apparel

Get the look with this template in Canva: Blue Cyber Monday Sale Announcement Wide Skyscraper

White copy tends to stand out strongly when set over color overlays. It’s a great pack more color into your design and make sure your copy is loud. Above, we’ve provided a template that does just that.

09. Feature handwritten type

Handwritten type is expressive and charming. Different tools will help you create different feelings, so choose your medium wisely.

Good Eggs Ad

Good Eggs

Have illegible handwriting? We’ve got your back. You’ll find plenty of typefaces in our library that will give you the look you’re going for without sacrificing legibility.

10. Play with patterns

Design playful patterns around the seasons or a special holiday, like Christmas. Swap out the kind of imagery you use to build your patterns and use your layout as a template.

Whole Foods Market Ad

Whole Foods

Get the look with this template in Canva: Congratulations Medium Rectangle

You can build a playful pattern with basic geometric shapes. We’ve gone with solid shapes but outlines work perfectly as well.

11. Design a type-centric layout

If you have an ad you’ve no imagery for, create an eye-catching composition with type alone. Decide which bits of content should be at the top level and style them so that they are the first thing your audience sees. In the case of J. Crew’s banner below, it’s the extra juicy discount.

J.Crew Ad

Get the look with this template in Canva: Pink Bridal Shower Gift Wide Skyscraper

Chances are, you want to advertise your great sale too. Cut down on the time you spend designing by using our template as a foundation.

12. Show, don’t tell

You can describe your product a million ways. If your audience can’t see it, they won’t buy it. Design your banner ad around excellent product photography to showcase all its greatness.

Tiffany Co Ad

Tiffany & Co.

Get the look with this template in Canva: Pink Wedding Cake Banner Wide Skyscraper 

This doesn’t mean cutting out all your copy. We’ve still included it above. However, our yummy cakes are the dominant element within the banner.

13. Save time with templates

Chances are, you’ll be creating the same kind of banner a few times. You’ll have sales every so often and having to create a new design for each is a pain. Define what kinds of banners you’ll need to design often and create simple templates for them. Madewell uses playful borders in theirs.

Madewell Ad


Get the look with this template in Canva: Beige and Red Christmas Retail Large Rectangle Banner

Borders offer great flexibility when it comes to templates. You can easily swap out whatever is in them to create a new feeling. Above, we can quickly replace our Christmas imagery to produce a new ad in no time.

14. Highlight your CTA

It isn’t enough to use a bright color on your CTA. It must look like an actionable element. You can style it to look like a button or underline it to make sure your viewers know it’s a link. Label your CTAs accurately too and use simple language. Just a word or two is more than enough.

Nike Ad


Get the look with this template in Canva: Travel Retirement Wide Skyscraper

Placement and hierarchy within your banner are also important. Don’t bury your CTA and use other elements in your layout to guide viewers towards it. If you’re still learning how to build hierarchy, feel free to use our template above.

15. Use eye-catching color

If you want to use color to make sure your banner garners viewers’ attention, you have to consider your banners context. Consider a banner being a designer for Facebook. Using a blue hue, no matter how bright, will ensure it goes unnoticed. In this context, a bright orange would be a much better call.

Slack ad


Get the look with this template in Canva: Blue and Red Christmas Retail Wide Skyscraper Ad

Bright hues alone won’t do the trick either. You’ve to be mindful of how you use them within your composition. Don’t restrict eye-catching color to small details on your banner. Use them in larger blocks, like we do above.

16. Curate your photography

Your imagery choices should be of the highest quality. They should be stunning but should also read perfectly at all sizes. We’ve a great library with dozens of options, feel free to check them out.

Herschel Ad


Get the look with this design in Canva: Winter Resort Website Medium Rectangle Ad

Photographs should also work well with your copy and help convey your banner’s message. If you have more than one option, create variations and see which banner does better. Learn from the process and improve your designs in the next round.

17. Work with gradients

Gradients are hugely popular these days. We see them in print pieces, on digital media, and all over user interfaces. Some are monotone. Others, like the one below, combine a couple of hues.

Spotify Premium Ad, designing an effective web banner ad


Get the look with this template: Modern Gradient National Teacher's Day Event Instagram Post

Gradients make interesting backgrounds. They’re also lovely as photo filters, though. You can vary the intensity of a single color across a plain or use two colors that turn into one another.

18. Play with textures

Often, we see textures as backgrounds. However, you can apply them elsewhere and in other ways. Textures can be used as fills for letterforms, applied to design elements, or even as photo filters.

Zara Ad


Get the look with this template in Canva: Blue Knit Christmas Large Rectangle

Make sure your content doesn’t get lost on a textured background. Busy backgrounds can make text difficult to read. To make sure our content reads easily, we’ve used color to bring our text out.

19. Shapes, shapes, shapes

Shapes are extremely versatile design elements. You can use them to create textures, illustrations, or purely as decorative devices.

SAP ad


Get the look with this template: Pink Blue Shapes Electric Music Concert Program

We’ve chosen to use shapes in more than one way in our template. The pink shapes in our composition add visual interest to our piece. All other elements are used to help structure our copy.

20. Feature bold headlines

Banners featuring loads of tiny type are tough to read. Keeping your headlines short and sweet lets you set them at a large size, increasing their readability. Craft your copy with this in mind.


Get the look with this template: Yellow Cyber Monday Coupon Wide Skyscraper

When you have a sale, you want to make sure that a.) your audience knows you’re having one and b.) they’re hooked when they see how much you’ll be saving. Set either detail in big bold type to make sure they’d don’t get lost in the web.

Your secret weapon for stunning design