How to Design a Banner

Before you start working on creating your client’s banners, you’ll need to understand who they are targeting, see now how to design a banner

By Claudio Pires
Updated on July 12, 2023
How to Design a Banner

Before you start working on creating your client’s banners, you’ll need to understand who they are targeting and what they wish to achieve with their banners. Objectives can include the following: generating brand awareness, product awareness, increasing website traffic, generating leads, making a sale, signing up for an event. See now how to design a banner.

The audience the client wants to target is just as important as their objective. If you can understand their audience, you’ll be able to create ads that resonate with them. Below are two adverts from IT companies in the same market but target a different customer base.

How to Design a Banner?

How to Design a Banner?

How to Design a Banner?- Brands

Microsoft’s advert focuses on consumers, and their message is written in a simple, jargon-free way that anybody can understand. IBM caters primarily to B2Bs and has used professional and business-like words such as regulatory and compliance that will resonate more with c-level executives than everyday consumers.


75% of consumers say they are frustrated when a business serves them content, such as ads, that are not relevant to their interests, whereas marketers who do use personalization notice, on average, a 19% uplift in sales.

Personalization and localization is the key to creating successful banners. With the average consumer consuming thousands of ads per day, anything that is not relevant to their interests will be ignored.

How to Design a Banner?

How to Design a Banner? – Localization

Here’s an advert from Southwest targeting consumers living in Austin, Texas. This banner hits on three points of personalization and localization. Their advert shows the state’s national stadium, and it also has the state, city, and nickname of Texas to catch the customer’s eye. During the Chinese New Year, they leveraged the national Asian holiday to set up a sweepstake (lead generation campaign) to win free flights for four people. You can personalize an advert based on what you know about the audience, the geo-location of that audience, or tagging in relevant seasonal holidays or current pop culture trends.


You need to consider two things when choosing the right colors for your client’s banners: brand colors and color psychology.

Brand colors: these are the colors used by your client on their website, logo, and other marketing materials.

Color psychology: this is the effect certain colors have on our minds; different colors have been proven to evoke various emotions in the human brain.

How to Design a Banner?

How to Design a Banner? – Color

For example, the color green is known to relax us and is often the color used to indicate an environmentally friendly approach. This color psychology has been leveraged to full effect by Nature Box, who use green as their advert’s primary color.

Blue Apron is another food brand that promotes healthy eating, with one of their USPs being that there is no food leftover. However, unlike Nature Box, they tend to focus more on their brand colors (blue) than color psychology.

Sticking to their brand colors, Blue Apron can still convey the message of healthy eating by using relevant images.

Argos, whose brand colors are red and white, also plaster their fitness-related advert with the color green to further empathize their health message.


There is no right or wrong answer. Look at your client’s past adverts and view the colors and images they used so you can keep their brand consistent across all platforms.

This should also be discussed before work begins so you know the parameters that you can work within.


Words and images go hand in hand. The image should further emphasize the text, and the text should further emphasize the image.

How to Design a Banner?

How to Design a Banner? – Words

Take this Nikon banner advert as the perfect example. It uses images and word psychology to portray how powerful its camera is. Birds are known for their great vision, with many having the ability to see for miles. The text “I am a bird’s-eye view lover” is reinforced with the bird’s image as the focal point of the advert. At the bottom of the advert is a small call to action, which showcases the camera’s power with a built-in 83x zoom lens. You can get creative when mixing words with images, and you needn’t limit your image choices to your client’s product range.

Argos, who was running a huge sale, used the words “THE BIG SALE” with a colorful red explosion in the background. Notice that when they don’t focus on health, they have gone back to red (brand color), which has also been proven to increase urgency.

During your project’s communication stage, ask your client what words they would, and would not like mentioned in their adverts. Certain brands want to retain their hard-to-obtain and luxury status and avoid using words like discount, free, sale, or save. Some may not want you to use cartoon graphics or certain animation effects because it may damage their brand.


Not every advert you create will need a call to action, but most will. A call to action must be easy to see and match the page the user is sent to.

When using the call to action, you must analyze the page you’re sending traffic to to create your advert’s base.

To reach your client’s objective of securing a sale, signing up to their website, or reading a blog post, you need the user to stay on their website once they click the advert. Customers may leave directly after clicking if there is no ad scent. The experience they see on the website is totally different from the advert banner they viewed.

How to Design a Banner?

How to Design a Banner? – CTAs

Sony’s banner ads and website have a strong ad scent as they use the same color, font, and white space in both their advert and website.

The call to action should also pass the squint test.

Extra Examples to Design a Banner

The squint test is a simple way to detect whether your call to action stands out or not. To perform the squint test, take three steps away from your monitor, squint your eyes, and if you cannot clearly spot the call to action button, your call to action needs to be adjusted.

Calls To Action

How to Design a Banner? – Calls To Action

Here’s an Acer advert. Does it pass your squint test? Nope, ours neither. The entire background is green, and it’s hard to identify where the call to action is as nothing in that advert is popping out, urging us to click. What about Target’s advert leading users to their online shop? Does this pass your squint test? Yes, we can see it too.

To create a clear call to action button, ensure it stands out from the background and, if possible, use a unique color that hasn’t been used in the image. Position the button away from the feature image and let it breathe so it can stand out more. Most calls to action buttons are directly underneath the image and text; As the customer first consumes the content and is with a decision to click or not.

You will rarely see the call to action button at the top of the advert with the text and image at the bottom of the left of an image.


Your clients’ primary objective will be to win more business. Most will do this by offering some offer or discount on their products. As a designer, you may not have data on your client’s bestselling products or most viewed items. You may end up choosing a product image that you think looks good but actually doesn’t sell that well.

As a creator of images, one of your tasks should be to learn more about your client’s customers and products. The difference between showing their bestselling item and an item that hardly anyone buys can be huge for click-through rates and conversions. The more data you have, the better you can choose product images to reach the client’s desired goal.


As websites become more flexible, dozens of widgets and pieces of content attract the human eye. In most studies, animation banners always outperform static banners, but they can also end up annoying the user and devaluing your client’s brand if done incorrectly.

While you want customers to click your banners, you don’t want to turn your banners into what we call ‘eye-bait’. Similar to click-bait. Eye-bait is when you use contrasting background colors or fast flashing images for the sole purpose of getting users. To view your advert when on a website.

As a general rule of thumb, the background of the image should not change color. Only the text or images on that page should.


How to Design a Banner? – Animations

The best animation adverts lead the customer through a quick story, as seen by this Samsung advert.

It first reveals the product, and our eyes focus on it; then comes the text that redirects us to the second part of the story. Finally, we have the call to action button, which jumps out at us. Telling the user’s subconscious mind that the next appropriate action is to click and learn more.

Claudio Pires

Claudio Pires is the co-founder of Visualmodo, a renowned company in web development and design. With over 15 years of experience, Claudio has honed his skills in content creation, web development support, and senior web designer. A trilingual expert fluent in English, Portuguese, and Spanish, he brings a global perspective to his work. Beyond his professional endeavors, Claudio is an active YouTuber, sharing his insights and expertise with a broader audience. Based in Brazil, Claudio continues to push the boundaries of web design and digital content, making him a pivotal figure in the industry.