Web Design and Designing The Perfect Web Banner Advert laptop and phone

Web Design and Designing The Perfect Web Banner Advert

At Rouge we just live for design, always striving for the perfect way to show our customers services and products in just the right, ‘perfect’ way. So, when we came across this article about designing banner adverts we just had to share it with you, so much about their design also being true when it comes to website design.

The reason for this is simple, both are web based and both are trying to engage you and make sure that the viewer takes in the message, and in the case of a banner advert, then click the link so that they can continue the ‘conversation’ with you, and perhaps get you to buy something from them etc etc.

The same is true to some degree with web design, but here, when dealing with that first, initial all important visit the ‘job’ of the design of website is to make sure that you do not immediately click away.

In short, like the banner advert, the website has to engage with the viewer and make them feel totally comfortable that they are in the right place.

But what sort of things do engage the visitor, what ‘tricks’ can be played to ensure success?

Looking at the article we can see a whole range of methods, some being more suited to some areas than others. The first idea calls upon the designer to pair typography (the art and technique of arranging type to make written language legible, readable, and appealing when displayed) and images. The first example shows how each typeface is reflected in the photographs used, thus creating a ‘partnership’ that appeals to the way that we humans view things.

Another useful ploy is to use ‘Hierarchy’ to ensure that any image used supports the theme of the advert, but that the type faces are used to make sure that the main message gets across and is not lost (as it would be if the all the type was the same).

Google of course are past masters at the creation of banner adverts, the one shown in the article using hand drawn icons to give that personal ‘human’ touch. They do the same by using unexpected elements like using type that looks hand written.

The use of illustrations is another great way of putting a message across, the one in the article demonstrating how adding a bit of fun can be a really great way of engaging users.

Two other methods are well known to all designers, the idea here being to keep it simple and to use bright colours.

One of the biggest messages in the article is that about appealing to your niche. Most websites are all about niches, which means you have to work out what people in that niche like to see. Once you know this you can design around these ‘needs’, something that we at Rouge truly understand….

There is a lot more to read in this interesting article about banner advertising, so please do read on.
Banner ads – we see them everywhere.

Normally they’re bright, flashy, and encroach on your internet experience. We’ve all tried our best to become immune to them. It’s safe to say they’ve got quite a bad rap.

In actuality, web banner ads are great tools to spread a message to a large audience. But with so many terrible examples of banner ads pummeling us every day, how do you stand out (in a good way) and really make an impression?

To save you some time, we’ve taken the liberty of curating 50 great examples of web banner advertisements to help and inspire you to create your own.

01. Use Stylistic Typography and Image Pairings

This set of banner ads by Dear Miss Modern pairs together text and photography in an effective and beautiful way. Each typeface in every individual banner is a nice reflection of the photograph within it, and they form a relationship that works very well together.

The photos that are more fun and playful have more playful text, and the images that are more sophisticated sport a classier typeface.

Does your typography need some work? Check out this article, 10 Ways to Improve Typography In Your Designs.

02. Create Hierarchy

Visa’s holiday banner ad uses hierarchy to its advantage. The photo is front and center stage, while the type (particularly the main message) works alongside it just enough to not get lost.

The offer button is positioned smartly right above the focal point of the image, which allows your eye to be drawn up and into the message.

03. Use Relevant Icons

This banner ad for Google brings in a nice, personal touch with its hand drawn icons.

They’re all images we recognize, yet it feels exclusive to the ad, as though the person in the photo was writing out their actions for the world to see. The hand drawn features adds in an incredibly personal touch, and makes the ad feel more than just an ad.

04. Add in Unexpected Elements

Sometimes, skipping a typeface and writing out your message, like Google has done here, is a great solution.

It works particularly well in this advertisement because Google is looking for new employees, and the style gives off a vibe similar to those you’d find on community boards. It makes the notion of working for Google much more personal and attainable rather than intimidating.

05. Incorporate Illustrations

Adding in illustrations to your banner ad is a great way to have an element of fun and playfulness, like in this ad for Google. Many looks can be achieved with illustration, whether it’s edgy and modern or childish and friendly.

Illustration adds an element that can’t always be achieved with photography, and is a great alternative if you can’t swing a photoshoot for your ad.

06. Adjust Your Layout

This banner ad for FatCow by Envato Studio shows perfectly how you can design your layout to work with a multitude of banner sizes.

Design in the size that you’ll be using the most and really perfect it, then take elements from that design and reflect it in your other sizes. Some elements will need to be shrunk down, others removed, and new elements may also need to be added.

07. Use Bright Colors

In this ad for Google Play Music, you can’t help but be drawn into it. The vibrant pink paired with the contrasting blue really draws your eye’s attention and makes a great impression.

Sometimes, incorporating bright pops of color in your banner ads will help make them stand out against more monotone, standard banner ads.

Interested in learning more on color theory? Take a look at this great resource.

08. Keep It Simple

If there’s one thing Coca Cola does well, it’s keeping things simple, and this banner ad is no exception. You have the product, the logo, and a short message – that’s it, and that’s all that’s needed.

Cramming a banner full of information that consumers don’t care about won’t grant you any favors, so omit what you can and only include what’s important. Your viewers will thank you.

09. Stay Current

Staying current with trends and pop culture is a great way to get clicks on your banner ads.

Campbell’s created a product line featuring characters for the globally anticipated release of the new Star Wars movie, and they displayed it in banner ads. The streak of red is undeniably recognizable, and it attracts Campbell’s lovers both new and old.

10. Use Texture

Campbell’s created another successful ad by incorporating texture. It’s subtle just around the edges, yet adds in a nice homey, grounding touch. Campbell’s is a comfortable, relatable brand, and by adding in this texture they help drive that image through.

11. Appeal to Your Niche

The ultimate goal of any ad is to appeal to your audience, and that’s exactly what this ad for Target does.

Their nursery line mostly communicates to mothers, so a cute little scene of a picture perfect pink nursery is shown – like in a storybook. The lines‘ your nursery your style’ are shown underneath, which encourages mothers to decorate their child’s nursery however they want.

There is a lot more in the actual article, so please do go and have a read


Hopefully after seeing all of these awesome examples of web banners, some new life has been breathed into them. Sure, there will always be obnoxious ads online, but with enough creative people (like you) making expertly designed ones, they’ll soon just be white noise.

Related blog articles