Taken from: www.designschool.canva.com

Designing The Perfect Web Banner Ad: 50 Examples To Help You Get it Right

 
 

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

1
 
Dear Miss Modern / Pinterest

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

3
 
Visa / Moat

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

4
 
Google / Moat

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

5
 
Google / Moat

Sometimes, skipping a typeface and writing out your message, like Googlehas 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

6
 
Google / Moat

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

2
 
Envato Studio

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

Screen Shot 2016-01-28 at 11.44.05 PM
 
Google / Moat

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

08. Keep It Simple

8
 
Coca Cola / Moat

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

9
 
Campbell’s / Moat

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

10
 
Campbell’s / Moat

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

11
 
Target / Moat

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.

12. Show, Don’t Tell

12
 
Target / Moat

This ad for Zarbee’s multivitamins lays out fruits in a nice pattern instead of using a generic product shot of the bottle. It shows that the vitamins are fresh and healthy and not full of chemicals.

13. Have a Clear Focal Point

13
 
Target / Moat

Having a clear focal point in your ad is essential, you need to communicate with your audience quickly and efficiently. The focal point in this ad forTarget is the Target logo, due to its position on the page and its bright red color.

The blue backdrop frames it nicely, and serves as a nice break from the vibrant red. Target is known well enough that it doesn’t need much more of a message, and serves as a reminder to viewers to consider Target while shopping for fashion.

14. Make a Reference Using Imagery

14
 
McDonald’s / Moat

This ad for McDonald’s pairs its imagery and message very well. The incorporation of the image allows you to drop the actual mention of coffee, which shortens the text and gives more room to play with type.

The image of the coffee cup could work on its own, but it’s much more effective when the viewer is prompted about how they enjoy their McDonald’s coffee.

15. Let Your Product Shine

15
 
McDonald’s / Moat

This bright McFlurry is the true star of this McDonald’s banner ad, and rightly so.

The vibrant and colorful cup stands out against the grey background, which acts as a nice neutral ground to showcase the product. If the background had been more colorful, the product would have been lost, and the message wouldn’t have been as clear.

16. Create Angles

16
 
Audi / Moat

Creating sharp angles like Audi did in this ad is a great way to break up space and add energy. Sure, regularly aligned boxes could have worked, but the diagonally oriented shapes of color add in movement, which translates incredibly well alongside the speedy car.

17. Use Overlays

17
 
Disney / Moat

Adding in an overlay of color on photographs is a great way to allow your message to stand out. In this banner ad, Disney added a dark grey overlay over a bright and happy image of a child splashing in water at a resort.

A simple white message is laid over the top and really stands out against the photo. If the overlay hadn’t been there, the message would have been too lost in the details of the photo and not been as effective.

18. Set the Scene

18
 
Tiffany & Co. / Moat

This banner ad for Tiffany & Co. is very fun, energetic, and lively. A swirling cocktail glass illustration is paired with beautifully adorned jewelry, and really gives off the promise of a good time.

It suggests the types of situations in which you would wear Tiffany jewelry, and gives the brand a persona of elegance and class with a touch of playfulness.

19. Be Creative With Your Type

19
 
Nike / Moat

Good typography is a great way to grab viewers’ attention. In this particular ad for Nike, the name of the shoe is broken up and sliced away, making it feel light and almost like it’s fading away.

Visually, it’s great to look at, and it helps tremendously that the lightness of the type is related the the actual lightness of the shoe.

20. Use a Stylized Illustration

20
 
Nike / Moat

Illustration in your web banner ads can be simple or incredibly detailed depending on your message.

The illustration style in this banner for Nike is quite detailed, and really tells a story. Power and strength can be felt in the drawing, and the subtle touches of color throughout brings in a nice energy – which is exactly what Nike is about.

21. Use Multiple Elements

21
 
eBay / Moat

Try your hand at including a few different elements in your next banner ad, like this ad for Ebay did.

A photograph, standard type, handwritten type, and illustrative accents all come together to make an effective banner advertisement. Each element has its own strength and contributes something, which would otherwise be missed had it not been there.

22. Make a Pop Culture Reference

22
 
eBay / Moat

Keep up with trends to make your banner ads relative to your consumers. This ad for Ebay took the title of a popular song by Drake and spun it to work for them.

Instead of ‘Hotline Bling’, they changed it to ‘Haute Line Bling’, which introduces an entirely new vibe and can be appreciated by those up to date with pop culture, as well as those who are interested in fashion.

23. Keep It Loose

23
 
Yoplait / Moat

Don’t feel obligated to stick to an incredibly structured style or grid in your banner ad.

In this example, Yoplait took a loose approach not only with their type, but with their grid. The playfulness pairs perfectly with the particular product, and has a nice energy both kids and parents can appreciate.

24. Create a Relationship

24
 
Talbots / Moat

Creating a relationship between the elements in your banner ad is very important. You wouldn’t want people to question why you used a certain image if it doesn’t work with the text. In this example from Talbots, the relationship is simple, but there.

The color for the type was pulled directly out of the photograph, and the text makes a cute pun relating to color.

25. Create Contrast

25
 
ESPN / Moat

Creating contrast in your banner ads is a good way to draw attention to them, like in this ad from ESPN.

The background is dark and textured, while the text is light and crisp. The contrast between the two really makes the type stand out, which is important when you’re relaying time sensitive information.

26. Create Symmetry

26
 
Apple / Moat

Achieving symmetry and balance in your ad is something many designers strive to do, but come up short.

This ad by Apple uses a simple grid, the photographs are in black and white, and the area where the images would intersect houses the branding and message. It’s very cut and dry, but it works wonderfully, and allows the music to speak for itself.

27. Make a Reference to Your Target Market’s Lifestyle

27
 
Chegg / Moat

If you’re trying to appeal to college students, actually take a step into their shoes, like Chegg has done in this banner ad.

An all too familiar statement of ‘wait, that was due today?’ is positioned over top of an image of a busy student. This is something all of us can relate to, and it certainly resonates with the college students who would be using the service.

28. Use Motion

Screen Shot 2016-01-28 at 11.44.58 PM
 
Chegg / Moat

Movement catches your eye outside of the web, so why wouldn’t it while you’re online? This motion oriented banner ad by Chegg moves just enough to stand out on the page and grab attention. It’s message is simple and straightforward, which helps to not overcomplicate it as a whole.

28. Use Motion
Screen Shot 2016-01-28 at 11.44.58 PM
 
Chegg / Moat

Movement catches your eye outside of the web, so why wouldn’t it while you’re online? This motion oriented banner ad by Chegg moves just enough to stand out on the page and grab attention. It’s message is simple and straightforward, which helps to not overcomplicate it as a whole.

29. Be Sharp and Edgy

29
 
Gillette / Moat

Gillette used angles, dark colors, and interesting image overlays to create a nice edge in this web banner.

The image overlays allow you to see how the product functions without animating it, and the darkness of the background allows the razor to shine through. The design feels clean and sharp, just like you’d want your razor.

30. Create Depth

30
 
Honda / Moat

This web banner ad for Honda is simple. The quick stroke of yellow behind the car helps to add in depth and ground the vehicle. If the yellow accent wasn’t there, the car would look like it was simply pasted on and was floating, and wouldn’t pop out quite as much.

31. Use a Unique Typeface

32
 
Pepsi / Moat

Using an interesting and unique typeface can really draw attention to your web banner ad. This ad for Pepsi uses a fun, yet slightly structured typeface. It’s clear enough to read, yet has just enough personality to relay a sense of playfulness.

32. Use a Variety of Beautiful Typography

33
 
California Pizza Kitchen / McGrath Creative

People go crazy over lettering and typography. McGrath Creative created some beautiful typography for this California Pizza Kitchen ad, and not only is it beautiful to look at, it also acts as a slice so you can see exactly what’s inside the product.

33. Use Simple Graphics

34
 
Coda / Stopbreathing

Simple graphics are very effective on websites and other applications, and they’re very effective on banner ads as well.

This ad for Coda by Stopbreathing uses some very simple and flat graphics, but they pair perfectly with the detailed image of the car. The simplicity of the graphics balances the photograph in a wonderful way, and really allows the car to shine.

34. Create Depth with Textural Dimension

35
 
Adidas / Moat

This Adidas banner ad has some very interesting dimensions going on. The closeness of the lines in the background provides texture, while the reflection in the lines provides depth. The two work together to create a sense of speed, which makes perfect sense considering the product being displayed.

35. Use Accents of Color

31
 
PayPal / Moat

Accents of color help to offset the photograph in this banner ad for PayPal.

If the photograph had been used all on its own with no accents, the banner wouldn’t have been quite as impressive. The color acts to tie in the brand, and to help give the type something to lean on – literally.

36. Don’t Just Try to Make a Sale

36
 
Free People / Designspiration

Yes, ultimately banner ads are trying to make some sort of sale, but they don’t need to do it so obviously.

This web banner ad for Free People encourages viewers to not just shop, but to check out the trends they have on their site. It doesn’t just seem like a sales ploy, yet it will surely create sales when customers visit the site.

37. Use Bold, Analogous Colors

37
 
I, Anna / Designspiration

Bold, rich colors are used in this web banner ad for I, Anna. The red is vibrant and eye catching, and the yellow is just subdued enough to not strain your eyes. This colorful banner really pops on screen and grabs attention, which is exactly what you’re aiming to do.

38. Use a Simple Drawing

38
 
Starbucks / Moat

Sometimes elaborate drawings and illustrations won’t suit your message or brand. In this particular ad for Starbucks, instead of a detailed and fully rendered illustration of their new drink, a more simplified and flat drawing was used instead.

You can clearly see what the new drink is made of, and it’s portrayed in a way that makes you feel as if you’re looking at in directly on the Starbuck’s menu boards.

39. Create Movement

39
 
Starbucks / Moat

Movement is incredibly important in design, and web banner ad design is no exception. This web ad from Starbucks has a lot of movement in a small space.

Ripple lines emanate from the center of the product, and the product can be seen splashing through the frame. It looks light and refreshing, which is exactly what the product is.

40. Utilize Animation

Screen Shot 2016-01-29 at 10.34.04 AM
 
Alexey Tyulin

If you’ve got animation or motion graphics skills, utilizing them in your banner ads is a great way to stand out. In this ad by Alexey Tyulin, the motion and clean graphics work together to draw attention and tell a story.

At the end, the animation even directs you on the next action you should take, which is to learn more. It’s a great way to influence viewers to do what you need them to do as a brand.

41. Create Geometric Texture

41
 
Corona / Vasiliy Yusov

The geometric pattern in the limes in this ad for Corona by Vasiliy Yusovmakes it very unique. Instead of a simple photograph or regular illustration, the sharpness and angularity of the fruit adds in edge and a unique twist you don’t see too often.

42. Break Up the Space with an Interesting Shape

42
 
Brightgreen / ckarlo tquintana

Use shapes to break up space like Ckarlo Tquintana did in this banner for Brightgreen. They could have left the white area flat and square, but bringing in the shapes from the other side helped to tie the two together, and not have too much overwhelming negative space in the ad.

43. Utilize Shadows

43
 
webduckdesign

The shadow in this banner ad created by webduckdesign really helps to anchor the image down.

If the shadow wasn’t there, the photo of the show would have looked too ‘stuck on’, and wouldn’t have had the nice heaviness it does here. The shadow adds in dimension to the ad as well, ensuring it isn’t too flat and two dimensional.

44. Create a Pattern with Repeating Elements

44 (1)
 
W / Anne-Sophie Hostert

If you’ve got an attitude you’re looking to portray, drive it home with reiteration. In this ad by Anne-Sophie Hostert you clearly understand the vibe because of the popsicle-and-pineapple pattern. It’s cool, it’s summer, and you know exactly the type of content you’re dealing with.

45. Use Monochromatic Blocks of Color to Break Up Photos

45
 
TripShock / Patrick Mead

If you’re using a photo in your banner ad, don’t feel as though you have to use it in its entirety. Take a leaf out of Patrick Mead’s book and do what he did in these ads for TripShock – break up photos with color. The blocks of color add in angles and shape to the ads, which would have otherwise been too stiff and standard had they not been there.

46. Use Linear Accents

46
 
Shutterfly / Moat

Sometimes adding a flare to your design is as simple as adding in a few linear accents. In this banner ad for Shutterfly, four lines are stacked at the top and bottom of the text.

These lines help separate the text from the image, and allows it to be its own element and stand out. Without the lines, the text would look as though it was simply placed on the wall, but with the lines the placing of the text becomes much more deliberate.

47. Tell a Story

47
 
Audible / Moat

The ultimate goal of an ad is to sell a product, and the most effective way to sell a product is to tell a story using that product.

This ad for Audible tells a story within a story. Audible is an app that allows you to purchase and listen to audiobooks, and here it shows how you can get lost in everyday tasks while listening to a good book.

48. Have a Sense of Humor

48
 
State Farm / Seth DeCroce

People love to laugh, and if you can get them to do it while looking at your banner ad, why wouldn’t you?

This ad for State Farm by Seth DeCroce provides viewers with a nice chuckle. It’s specifically addressing Coachella, a popular multi-day music festival, and how you can watch it in the comfort of your own home (while having a shower, if you wish), instead of camping out at the festival for days, sans shower.

49. Use a Simple Font Pairing

49
 
Pizza Hut / Moat

Bringing together multiple typefaces or styles of typefaces like Pizza Hut has done in this ad is a great way to amp up a simple design. In this instance, different line weights of the same font are used in the initial message.

Had these words all been depicted in the exact same weight and size, it would have fell flat and not had as much impact from both a design perspective and in message effectiveness.

50. Accentuate with Simple Shapes

50
 
MTV / Moat

This banner ad from MTV is super simple. It’s simply a flat color with text on top, but the shapes used throughout the type add in dimension and movement.

The message would have looked incredibly plain had the shapes not been in there, and it wouldn’t have resonated with MTV’s audience very well.

Conclusion

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.

 

In this challenge you will make a banner ad that promotes one of your organization's content offering.
 
Here are some ideas to get you started!
  • Promote your upcoming video PSA campaign
  • Promote your audio PSA campaign
  • Promote an upcoming app your organization is releasing and its core function
  • Promote an upcoming event hosted by your organization
  • Promote a clothing line which also acts as a fundraising mechanism
  • Promote a donation page
  • Promote a tour your organization is responsible for

 

The criteria:

The banner can be vertical or horizontal - size chosen is dependent on your wireframe/dreamweaver/website design.

Standard sizes here --> http://designerstoolbox.com/designresources/banners/

Banner must have a minimum resolution of 72pixels

Banner design must "fit" your web design. This means the colours and fonts should be similar to your primary fonts and colours used on your website.

Banner must clearly identify its purpose.  It needs to communicate what it's important.

Banner must have a "call to action"

Banner should not be noisy.

Below are some great examples along with the rationale for how and why they're effective.

**Choose a banner below and apply its design style and rationale for your banner.  Be prepared to discuss this with Mr. Basile** 

DESIGN AND MAKE A BANNER AD!