The following content is translated and sorted by the Copycat team, only for learning, communication, design + collaboration, copycat is enough!
Banner ads are important for driving online traffic, but how do you design Banner pages that people want to click on? The focus of web Banner design is to systematically create effective Banner ads by applying basic design principles. In this article, we’ve compiled 15 tips for creating a successful web banner design.
What is a web Banner?
Web Banner is one of the most common marketing forms on the Internet. It exists in various forms. Banner pages are also the most likely to generate clicks.
Banner ads are advertising images embedded on a web page, showing a product or brand, and linking to the advertiser’s website. Most companies use them in one form or another because it’s a cost-effective, traceable, and efficient form of publicity that’s perfect for brand awareness.
How to design an excellent Banner advertisement?
How to design and create web Banner ads to bring clicks? Here are some tips and general guidelines for designing Banner ads.
- 1. Use valid, standard Banner sizes
According to Google Adsense, the most effective, standard Banner size is:
Navigation Banner — 728×90 px
Screen Banner – 300 x 600 px
Medium rectangle Banner — 300×250px
Long rectangle Banner – 336 x 280 px
2. Select the right Banner advertising space
It is recommended to buy the top of the page or near the main content of the page.
3. Keep the hierarchy
Banner AD design depends on getting the balance right between each AD, so be careful with your hierarchy. Effective Banner ads are designed to increase brand awareness and traffic to the site. They have three basic components:
(1) Company Logo
A company Logo must build brand awareness. Make sure it’s visually dominant, but not as dominant as a value proposition or CTA.
(2) Value proposition
The value proposition focuses on showcasing the product or service you offer and attracting attention with attractive discounts and prices. Such as “high quality,” “half price,” or “limited time offer.” These keywords should take up most of the space in the AD and are the first thing the viewer sees.
(3) CTA button
A call to action /CTA is typically a text or button that invites the user to click. Phrases like “learn more,” “start acting,” or “start now” are good examples. This should be the focus of our Banner ads getting clicks.
4. Keep it simple
Keep content and visuals simple, as the viewer may only get a glimpse of the Banner on the page.
5. Use buttons appropriately
Depending on the Banner type, buttons usually increase the click-through rate (CTR) of the AD. If you use buttons, place them in the lower right corner of the text and apply tasteful contrasting colors. Note that style and color need to be consistent throughout the AD.
6. Have a clear framework
The viewer’s eye will be attracted by the theme within the frame. Successful Banner ads usually have a clear frame. If your Banner background is white, it is common practice to place a 1 pixel gray border around the Banner.
7. Keep the text readable
Set the heading and body to different sizes; All text on the screen should be less than 4 lines long. Do not use cursive/script, very fine fonts, all caps, or fonts less than 10 points (except for disclaimers or copyright notices).
Use animations
Dynamic web Banner ads are generally better than static Banner ads and can be very effective in web Banner design, but you have to make sure they don’t distract the message of the AD.
If it’s a long animation or video, keep it under 15 seconds, and consider having a clear call to action at the end of your frame to increase conversion. If it is a short loop, do not repeat the animation more than 3 times.
Complement, but stand out
If your Banner is visually integrated into your site, you are more likely to win the trust of your visitors. However, don’t let it blend in too much and lose the viewer’s attention. Banner ads always need to be prominent and clickable.
10. Be consistent with the brand
Link Banner ads to a landing page that includes your discount offer. Make sure the AD matches your brand and landing page so potential clients don’t get confused.
11. Create a sense of urgency
Give the text a sense of visual urgency by using contrasting bold colors. Banner ads don’t always need to be soft.
12. Use imagery (only when needed)
Select relevant graphics and photos to enhance your message and directly related products. There is no abstraction here.
Can’t afford professional photography or supermodel photos? Choose a cheap gallery image. If possible, use original illustrations or graphics created by the designer.
Remember, you don’t have to use images in your Banner ads. Top-notch copy and beautiful typography can create equally effective results.
13. Choose the right color
Different colors will bring different associations, and you need to think about what emotions you want to evoke in your audience. Color is the first thing the user will notice in the Banner.
Colors are also subjective and have different associations in different cultures. Always research your target audience when choosing a color. Below is a list of colors and the typical emotions they represent in western audiences.
- Red: Passion, anger, excitement and love. This strong color will appeal to most viewers, but use it in moderation. Avoid red if you want a classic, mature or serious look.
- Orange: Full of energy. Orange isn’t as overwhelming as red, but it’s still remote and radiates energy; This is a nice CTA button color.
- Yellow: joy, sunshine and love. Yellow is eye-catching and radiates a vibrancy that is both young and acceptable.
- Green: health, freshness, wealth, environment, growth, nurturing and new beginnings. It’s also good for the eyes.
- Blue: security, trust, clarity, maturity, serenity, wisdom, formality, coolness, indifference and masculinity. Blue appears in more than half of the logos.
- Purple: luxury, dignity, luxury, wisdom, magic, femininity, creativity. It has a calming effect on the viewer.
- Pink: Love, sweetness, femininity, youth and baby. Pink is generally associated with all women, but there is a real range based on brightness and hue.
- Black: exclusivity, mystery, modernity, power, prestige, luxury and formality. It is traditional, with black text on a white background being the most readable color combination.
- White: pure, clean, modern, barren, simple, honest, innocent. White creates a sense of economy and youth.
- Brown: natural, wood, leather, serious, manly, tough, humble. Brown neutralizes strong colors and works well with background colors and textures.
- Gray: neutrality and practicality. When used as a background, gray sets off other colors.
14. Keep your files small
According to Google Adwords, when it comes to file size, the smaller the better — preferably under 150 KB. To prevent visitors from scrolling down and missing it, Bannner, with its small files, completes page loading quickly.
15. Use the correct file format
Usually, the result is a JPG, PNG, GIF or HTML5 file. Keep in mind that Flash ads are obsolete at this point, so try to choose a few other image file formats.
Get ready to design better Banner pages!
These are just a few tips for Banner AD design, but creating a really great, effective Banner requires a lot more thought. If you’re not a professional designer or don’t have the time to design, consider hiring a talented creative to create your perfect clickable Banner AD.