How To Design Magnetic Banner Ads for the Web
Advertising is a massive industry with a lot of money and agencies vying for attention. But the purpose of this industry is generally to drive people towards something whether it’s a product or service. Great ads will draw your attention even if you don’t have a need for the product.
But poorly-crafted ads will come off as revolting and insincere. Nobody wants to deal with the metaphorical used car salesman, and this type of advertisement can be an immediate turn-off.
For this post I’d like to examine a few design techniques for polishing beautifully-magnetic advertising banners. Although designs can vary from each website the general techniques remain the same. Take a look at the BuySellAds marketplace to see some of the most creatively and well-designed banner ads online today.
Text is an important part of all design. Originally marketing would have been in print on billboards, magazine pages, or telephone pole fliers.
Nowadays the Internet has created a large marketplace for digital text to be used for advertising purposes. The text on an ad block should be concise and specific. It should not feel too promotional or sales pitch-y.
Instead use text to expand upon the product or service. What does it do and how can it help people? Is there a special feature or discount going on? Beautiful typography in combination with vector graphics can build a powerful item for attracting attention.
Take a look at the above advertisements found in the sidebar of Codrops. These ads are mostly small squares which rely on very little space. This is why text style is just as important as the content.
Fonts need to stand out and really draw attention. Color choice is also a big deal related to typographic style and tone. Visitors will notice bright text with a contrast against the ad’s background. But remember to keep it simple and most of all readable.
Your goal shouldn’t be just selling because then your content may come off as insincere. Don’t focus on advertising purely from a sales perspective, but also consider the consumer’s perspective. Think about what they’d want to see and build from there.
Colorful Vectors & Cartoons
Without question my favorite ads tend to be the ones combining vector artwork or illustrations with the company design. I attribute the use of a vector cartoon chimp as one reason for MailChimp’s marketing campaign success.
Cartoony vectors and mascots are light-hearted in nature. They can feel childish but it’s not always the case. Vectors are a great way to demonstrate what the company does visually while also drawing attention from people who are just browsing a website.
People so rarely take time to look over at the ads that you often need a gimmick to draw attention. In this scenario a small cartoon figure or mascot can really fit the bill and deliver.
Take a look at the screenshot above from Concept Art World. You’ll first notice that most of the ads directly target those who may be working or want to work in the entertainment industry. Targeted advertising always obtains more attention.
But also take note how most of the ads are visually appealing. Specifically TrackMaven and the Vancouver Animation School which both use characters to draw attention. Does TrackMaven have a lot to do with a dog? It doesn’t really matter because the connection has been made and visitors will now remember(even subconsciously).
Your choice of branding doesn’t always need to be specific to wordplay. You just need to design a cartoon person, animal, or personified object which is memorable. People should recognize your ad over various websites and have the thought “boy that looks familiar”.
Often times the ads which capture my attention are more subtle in design but loud in branding. The above shot from Feel Desain has a large square banner for Panorama9. The ad is so well-designed that you may believe it’s part of the layout.
Natural blending is a big part of drawing attention rather than pushing it away. Learn how to combine elements, icons, and/or vector characters to craft a wonderfully balanced composition.
Design for Strong Suits
Each advertisement should work towards its own strong suit. This is why branding is so popular because the ad feels like an extension of the company or product. So when designing a new ad try to focus on the goal of representing the product in the simplest but most lucid way possible.
I love the example above taken from the AppAdvice sidebar. Storm & Skye is a mobile iOS game which has both a lite and premium version. This ad uses concept art from the game to advertise the lite version. If enough people download the free copy it could lead to greater sales later on down the road.
But the reason I love this ad block is because it works towards its own strength. All games typically have some form of concept art whether they’re for environments, characters, or even just promotional materials. Game art is often beautiful and highly appreciated by the audience who would play these games.
Stick to whatever your product does well and give visitors something they would expect. You only have so much space to attract attention so you need to use it wisely.
Similarly you can see the inverse of detailed art in the screenshot above taken from PSDCovers. Each of these ads rely on minimalism, simple colors, and basic text. This can be an excellent way of capturing attention without any flashy gimmicks or talented artists at your disposal.
The key here is to avoid areas which are not your strong suit. If you’re not good at designing vector cartoons then hire an artist or just design a different type of advertisement. People would rather look at a minimalist ad rather than a botched vector cartoon.
Play to your strong suits and trust your design instincts. Visitors have similar instincts and will most likely react in a similar way.
Don’t Be Too Pushy
Avoid the feeling that your ad block is too “promotional”. This will come off like a sales pitch more stale than cookies from 1999. Instead just show the product and offer a quick glimpse of what it could do/how it can help.
Keep in mind that all marketing is ultimately meant to sell. But the point is to sell discreetly – focus on what the person may want to check out instead of bombarding them with prices and different signup plans.
The above screenshot is from Vecteezy which has a lot of design-related advertisements. The top ad block for “Free Adobe Tutorials” links to Skillfeed which is a great online learning community. The ad targets the right audience and uses a simple pitch.
But the advertisement design is also phenomenal. The background is bright and whimsical using icons to portray design techniques. There are two icons for Adobe Photoshop/Illustrator which are the two most popular programs that designers would recognize.
The orange call to action button is absolutely fantastic. This can work swimmingly when used in a context where the button doesn’t always imply buying something. Just try to keep the CTA text within reason and don’t appear like you need a sale.
Instead demonstrate potential value to visitors by showing them what’s being advertised.
The online advertising industry is enormous with a lot of potential. Crafty designers will take these ideas to heart when building future advertising banners. While you can’t drive 100% conversion rates you can at least familiarize people with the product being advertised. This is why money spent on quality advertising is a smart move because design helps to build the brand while also driving people’s curiosity.