In fact, Banner ads can have a huge impact on users, and when used wisely, they can certainly make a difference. So how do you create great banner ads that don't annoy people and convert well?
Vacant theories may not be enough grounding, may be from the following 50 cases, to learn the design skills of Banner ads.
1, stylized graphic layout
This is a set of Banner ads produced by Dear Miss Modern, and each picture maintains the consistency of temperament and style in both text and image materials. The formality of the fonts and the mix of images and graphics in the stock footage add to the overall feel of the Banner. If the images are not this strongly stylized, but more subtle, they should be paired with a more classic, durable font for the same reason.
2. Create layers
Visa's holiday ad banner takes full advantage of the hierarchy. The selection of photos is the food with depth of field and layers, so that people will be attracted to it at the first moment, while the text typography is covered in a bokeh vista, which ensures readability, but also adds a layer that conveys the message and ensures that it will not be confusing. The button is placed just above the food and below the text, just right to entice someone to click.
3. Use Relevant Icons
This ad banner from Google gives a personalized experience through hand-drawn icons.
Each of the hand-drawn icons in the image is very easy to recognize, although not complex, but creates a feeling of walking through the world. This indescribable but touching feeling makes this ad more than just an advertisement.
4. Add the unexpected
What should a job ad do? Google's job advertisement is also considered surprising, there is no lofty description and beautiful girl, but with the same shape as the community bulletin board handwritten ads like the graffiti handwritten ads. It's not complicated, but it's unexpected, and the familiarity is touching enough.
5, add illustrations
This case is also Google's ads, the addition of illustrations to make the whole ads full of childish and fun, coupled with the flat elements, the overall look is also more unified. This kind of illustration is not difficult to realize, it may look a bit rough, but it is really friendly. Illustration is different from photographic images, it can give the design of the latter can not reach the temperament, of course, you have to use it well.
6. Layout Adaptation
FatCow's ad image was designed by Envato Studio, and the entire ad was created in a number of different sizes in order to fit different ad spaces. After designing the most commonly used ad image, the elements were edited twice to create a size that would fit other ad spaces, where certain elements needed to be tweaked, removed, or added, so that they could be realized.
7, the use of brilliant colors
This Google Music advertisement uses vibrant pink, paired with the same highly saturated blue, which creates a stark contrast and leaves a deep impact. This colorful multicolor pairing is much more eye-catching than a regular monochromatic dominated Banner, but it needs to be used with a little more care to ensure readability and coordination.
8. Keep it simple
If there's one thing Coca-Cola has done that stands out, it's keeping it simple. This Coca-Cola ad Banner design continues this tradition very well: the product image, logo, slogan and iconic color scheme. It's not a lot of content, but it's very effective.
A Banner that's crammed with all the information won't do you much good, because users won't even look at it. Present the most important information, and that's all that matters.
9, pay attention to the trend
Following the pop culture and the trend that is popular is very useful for you to design banner ads, Campbell is like this, it makes good use of the IP of the Star Wars movie, launches the related subject of the product, and attracts the fans of Star Wars to come to buy the product. It's a good idea to use trends and topics that are trending to promote products that are relevant to the movie.
10. Use texture
This Campbell ad is a great example of using texture to enhance the feel of a product. The brushed edges make the visual effect of the ad more subtle, and the other elements in the ad are not as prominent as they could be, but the addition of the texture is like a finishing touch that enhances the overall effect.
11, with the help of niche
The niche refers to the market segmented for the advantages of the enterprise. Advertisements usually need to be placed for the target group so that the best results can be achieved.
Target's ads for its baby and toddler line of products were aimed at mothers, so what could be more appealing to them than a pink, cute scene?
12. Use pictures, not words
Zarbee's vitamin ad banner is quite impressive in its use of pictures, with fruits replacing vitamins and reinforcing concepts rather than describing them in words, which is clever and intuitive.
13. Clear focus
When ads have a clear focus, communication between the brand and the user becomes more direct. This Banner ad image was also designed for Target, the brand logo from the position to the color is conspicuous enough, coupled with the beauty pose in the structure of the guide, Target's brand logo is undoubtedly the focus of the entire ad image.
14, the use of imagery as a guide
McDonald's this ad is very typical of the use of imagery instead of text to convey information, coffee, the word was replaced by the corresponding picture, to convey information at the same time, but also so that the entire advertising map is no longer monotonous, into the graphic mixed rows. Both text and images alone are able to convey the message, but the mix is much more interesting and heartfelt.
15. Let the product speak for itself
In this ad image, McDonald's McFlurry is undoubtedly the centerpiece, both meaningfully and visually. The gray background makes the brightly colored MacFlurry body stand out. By making the product itself stand out in the ad, you can make the entire banner more expressive and relevant.
16. Creating Angles
Audi's graphic splits the space to present different messages, but what's most striking is the unique visual experience created by the small twist in the angle. This tweak brings more attention to a specific message, and with the angle of the car itself in the image, it makes the whole ad graphic more dynamic.
17.Using masking
Using a translucent layer of a specific color to mask the background image allows the foreground text content message to stand out. This design technique is not uncommon nowadays, and it allows the background information to come through from the masking, while making the text content more readable and enhancing the overall hierarchy.
18, set the scene
Tiffany & Co Jewelry's advertising graphic design, called interesting and fun, rotating cocktail glasses and beautiful jewelry combination suggests that they often appear in the same scene at the same time, to create a sense of elegance and sophistication. The combination of related items thus suggests to the user that they can make up their own scenarios.
19, creative fonts
Good typography can attract the user's attention, and Nike's ad in particular is outstanding, it is creative in the design of the fonts, these fonts are dismembered also have a strong degree of recognition, but this design makes them look lighter, but also more rich in a sense of technology. This visual enhancement makes the ads and products that much more appealing.
20, use stylized illustrations
Illustrations can be minimalist, but they can also be full of detail. Stylized illustrations can increase the thickness of the message through the details and style to tell the story and convey the feeling. This kind of illustration is powerful and full of energy, which is quite in line with Nike's brand temperament.
21, use a variety of elements
Though there is a risk, but reasonable will be a variety of different elements in an advertising map, can produce a good sense of form, like this ebay advertising map. Beautiful product images, standard fonts, handwritten fonts, and illustrative elements are harmoniously combined into a single ad image. Of course, each element is there for a reason, and each does its job, not randomly, so keep that in mind.
22. Become a trendsetter
Incorporate trends into the design of the Banner and make it a link between the ad and the user. This ad from eBay does just that. Replacing "Hotline Bling" with "Haute Line Bling" better explains the current culture and attracts more users to the trend.
23. Free Spreading
Not every banner has to be grid-based, with every element precisely aligned, but a free-spreading design can be just as effective, as was the case with Yoplait's ads, which were designed to be more fun and childlike. Of course, the appropriateness of this design depends on the ethos and character of the product.
24Creating a connection
It's important to make sure that the images and text in your ads have enough of a connection to each other, and Talbots' ads are very close in tone.
25. Creating contrast
Contrast is an effective way to grab a user's attention, and ESPN's Banner design is well versed in this technique. The white text stands out against a deep red background. The font was also chosen to be sharp and light, which makes the message even more effective.
26. Symmetrical design
Symmetrical design can be a good way to balance the elements in an advertisement. The designers may have gone through in-depth thinking to come up with this design, but the output is very fast. This ad from Apple is also uncomplicated, with black-and-white photos of musicians essentially symmetrical on an axis around Apple Music, while maintaining a certain staggered beauty. This minimalist design is simple but prioritized and goes the extra mile.
27. Lifestyle guides for targeted users
Like this Chegg ad, if you want to appeal to a specific group of users, you might want to put yourself in their shoes and infuse the ad with lifestyle guides aimed at them. Putting yourself in the shoes of a specific user to express and present your product can be more likely to get ****ed off, which can lead to more clicks.
28, the use of dynamic effects
In a static page, the most likely to attract attention is undoubtedly dynamic elements. If you use dynamic effects to present the content of the ads you want to show, you can make your content faster to be accessed by users. Of course, the premise is that the design should be concise and clear enough, so that you can avoid trivial content and easier to get by the userGet.
29, sharp and distinct
Gillette razor ads are visually sharp and distinctive model, sharp angles, sharp razor pictures on a dark background, angular fonts and strong contrast color scheme, all of which make this ad image visually clear and eye-catching enough to make people want to stop.
30.Creating Visual Depth
Honda's campaign is not a complicated design, but it features yellow line strokes in the background. The car, which seems to be suspended in the air, seems to fall on the ground under the lines. It doesn't take an overly complex design to create visual depth for the ad graphic to make an impression.
31, the use of unique fonts
In the advertising Banner image in the use of personalized fonts can also be effective in attracting the attention of users. The font used in this Pepsi ad is personalized, yet readable, giving a playful and fun feel without compromising the message.
32, the use of a variety of beautiful typography
The vast majority of users are still very good at beautiful typography. This California Pizza Kitchen campaign was designed by McGrath Creative for them, and not only is the typography very sophisticated, but it's also creatively integrated with the pizza itself.
33. Use Simple Images
Simple, intuitive images are very useful on a website, as they often present the content more efficiently and make the message of the ad banner more intuitive. Nowadays, designers often use flat, minimalist illustrations to emphasize the subject matter and add information, like this one from Coda.
34. Use texture to increase visual depth
The Adidas ad is visually very interesting, the texture of the background is not complicated, but the regular and technological lines not only increase the visual depth, but also create a sense of speed that fits the brand's temperament.
35, the use of brand colors
If the ad banner does not use PayPal's iconic blue color, the picture alone will not make a deep impression on you, but it is precisely the use of brand colors, so that the picture and the brand are bound together, promote each other, and make you remember.
36, don't just think about promotions
Advertising Banner image is used to promote, which is fine, but sometimes you don't need to make it so obvious. This ad from Free People encourages users not to just buy, but to look and shop and compare, which also promotes sales, but looks more like advice from the user's perspective.
37. Use Bold Colors
I, Anna's color scheme is bold and full, with a vibrant and eye-catching red, while the addition of yellow makes the entire color scheme more coordinated and more likely to attract the user's attention.
38, to a simple illustration
Sometimes, exquisite illustrations do not necessarily meet your brand or want to express something, Starbucks this ad was born in this case, delicate and exquisite figure does not meet their needs, but rather flat and slightly awkward illustration to more simple in place. It shows the ingredients of the new drink, and the illustration makes you feel like you're at Starbucks looking at the menu.
39.Introducing Dynamics
This Starbucks graphic shows an eye-catching dynamic element in a small area. The ripples start at the center and spread outward, so users can't help but be drawn in when they see this ad image.
40, completely moving
If you are skilled enough in the use of kinetic effects, you may want to make the entire ad Banner elements are in motion, so it is easier to stand out. Designers will be used in the tablet in the use of the process with the help of dynamic effects completely show, just a few seconds to let you get to the static Banner charts can not reach the amount of information, the experience is excellent.
41.Use of geometric textures
Corona's campaign uses the previously popular Low-Poly element in the imagery of an orange, and the geometric texture gives the orange a cold, clear feeling that will keep you interested in Corona's beer.
42.Interesting graphic to divide the space
Brightgreen's campaign uses a diamond shape to divide the space into two different spaces, which makes the campaign form two natural levels. The white part of the campaign carries the text message, while the green part of the campaign carries the image, making the whole image clear and full of texture.
43. Add shadows
Long shadows have been a popular design trend for a long time, and this ad created by Webduckdesign is a great use case. Without shadows, the whole image would look quite monotonous, and the addition of long shadows makes it look less flat and has layers.
44. Use Patterns as Textures
Unlike subtle patterns, textures can be layered on top of the background to create a specific mood, and this campaign by Anne Sophie Hostert uses ice cream and pineapple textures to give the impression of summer.
45. Use color blocking
If you don't want to use the image you have just as a background for your campaign, split it up into different parts and use it with monochrome color blocks to give the campaign a stronger sense of form.
46, the use of line decorations
Advertising map is most of the time pictures and text composition, but the appropriate addition of some decorative will make the advertising map looks more full. Compared with the various highlights, the decorative nature of the line is not weak, and more free, the effect is also quite good.
47, storytelling
The ultimate goal of advertising is to sell products, and the most effective way to do this is to tell the experience of real users. This ad was created for Audible, Amazon's drink e-book app, and the scenes pictured are designed to promote the fact that their product can be used without interruption in many scenarios.
48. Be humorous
Humorous presentations are usually more effective than strong sales pitches, and they're more likely to see content that elicits a laugh.
49. Use simple fonts
Without complicated typography, a few consistent, simple and recognizable fonts, like this Pizza Hut ad, can be equally informative and enjoyable.
50, the use of simple graphics to emphasize the