Web banner design tips to get more clicks

Most people who try to boost their online traffic with banner ads, are always asking: How can I create a web banner ad that people will want to click on? Web banner design focuses on the systematic creation of effective banner ads through the careful application of basic design guidelines. In this blog article I will guide you through all the information you need to create successful web banner designs.

First of all, what is a web banner?

Web banners are among the most effective forms of marketing used in today’s online world and come in all shapes and sizes. Web banner designs are all about creating the most clickable banner ads possible.

Most companies use them because they’re an affordable, measurable and effective medium to increase brand awareness.

So, how can you design and create web banner ads that will get you those desirable clicks? Below you can find tips and general guidelines for designing banner ads.


Always create the most effective, standard banner sizes

According to Google Adsense, the top performing ad banner sizes are:

300×250px — Medium Rectangle

336×280px — Large Rectangle

728×90px — Leaderboard

300×600px — Half Page

320×100 — Large mobile banner



Maintain hierarchy

The company logo

The company logo must be always included for brand awareness. Make sure it’s visually strong, but not as dominant as the value proposition or the call to action.


The value proposition

The value proposition showcases the service or product you provide and draws attention to with attractive offers and prices. “High quality” or “50% off” or “Limited time offer” are some great examples of value proposition. This should cover up the most space in your ad and be the first thing that viewers will see.


The call to action

The call to action (or CTA) is the text or button that invites users to click. Phrases like “Learn more” or ‘”Get started” or “Watch Now” are great examples. The call to action should be a clear focal point of the ad.


Keep it simple

Keep content and visuals simple. Most viewers only glance at web banner ads for a second.


Use buttons appropriately

Buttons will often increase the click-through rate (CTR) of your ad. Buttons should be placed after your copy on the lower side in (tastefully) contrasting colors. Always keep them consistent throughout the whole set of ads.



Have a clearly defined frame

People’s eyes are naturally drawn to a subject inside a frame. Effective banner designs have a clearly defined frame with graphics extended to the edges of the box. If your ad is white, it’s a common practice to put a 1 pixel gray/black border around the ad.


Make your text instantly readable


Make your headline and body copy different sizes. The whole text should be four lines or less.


Use calligraphy/script fonts, extremely thin font weight, all uppercase copy, or font sizes smaller than a 10 px.


Use animation

Animated banners usually out-perform static banners, and can be very effective in website banner design, but make sure that they don’t distract from the message of your ad. HTML5 animated banners are definitely the best choice.




Use simple animations that last no more than 15 seconds, and make sure that they don’t loop more than 3 times (In google ad environment). A good practice is making the last frame of the animation a clear call to action.

Be consistent with your brand

Your banner ad will link to a landing page that includes your offer. Make sure the ad matches your branding and the landing page so potential customers don’t get confused. Consistent branding earns your viewers’ trust.



Use imagery well (and only when you need it)

Choose relevant graphics and photos that are directly related to your product and enhance your message. Avoid abstract concepts!

No budget for professional photography or supermodels? No problem. 

Remember, it’s not always necessary to use images in a banner. Killer copy and good typography can create equally effective results.


Choose the right colors

Every color has a different association, and it’s important to consider what types of emotions you want to evoke in your audience. Color will be the first thing a user notices in a design.


Keep the file sizes small

When it comes to file size, the smaller the better!  (The maximum file size for Google Adwords banners is150 kb). Your ad needs to load fast on a page before viewers scroll down and miss it.


Export in the correct file formats

JPG, PNG, GIF or HTML5 files are the working deliverables. Many designers will typically work in Adobe Illustrator or Photoshop to deliver JPG, PNG, or GIF files. Google Web Designer or Adobe Animate are the most advanced tools for HTML5 files.

Important, Flash ads are out of date!


There you go! These are the basic banner ad design guidelines, but it takes a lot of practice and experience to create truly awesome and high-performing ads. If you’re not a professional designer (or too busy running a business), consider hiring a talented creative team to design the perfect ads for you.


Related posts

Search Τα Brands, οι Marketers και το lockdown  
Social Media tips during COVID-19 lockdown Search