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
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.