Taken from: www.designschool.canva.com
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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.
- 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**