Home > Technical & Creative Skills > Design - Imagery, Banners & Landers

---

How to create the banners that convert? (5)

---

Hi, everyone! It's time to cover the theme of promo materials for your ads - how to design a great banner that will attract users and convert.

Don’t have any designing skills?
Not a person who can really understand colors?
No worries!

Mobidea Crew’s Master Designer David kindly helped us out to prepare the tips that'll allow you to create the catchy-banners! Here we go!

[Disclaimer: This post was originally published on mobidea Academy. All the missing information can be found in the full version. ]

Tip 1: Choose your images carefully
The images you use on your banner ads are as important as the banner’s structure.

These pics should really have that awesome quality that makes users go nuts! Indeed, that quality is gonna be relevant, since it’ll obviously help attract more potential users.

You should always pick professional images which look clear. You need to stay away from blurred images, since they’ll be avoided by users, who’ll obviously decide to click another banner which looks better than yours.

Try to pick dynamic pictures that match the content you’re promoting. This will give credibility to your banner, as well as reinforce the message you’re trying to go for.

Pro tip: choose pictures with a good contrast in terms of colors. Search for free pics on Stock photos sites. There are a few which are very good and free to use in a commercial context.

My top 3 stock sites:

• Pexels
• Unsplash
• StockSnap

Tip 2: Banner Size
Now let’s get technical! Time to dive in and refer to banner sizes.

There are some common sizes you should really know about. If you’re working with the mainstream industry, the banner dimensions are 320 x 50 px, 300 x 250 px, and 320 x 480 px.
If you’re working with adult content, you’ll be working with 300 x 250 px and 300 x 100 px.

Those sizes are a standard so you can find them across the web.

Remember: if you’re mostly working for mobile devices, you should always bear that in mind when designing the banner. Even if you’re creating your banner on a desktop computer – which you probably are – try to visualize your design and think about it being seen on a smartphone screen.

And if you wanna check how the banner would really look on a smartphone, you can use an emulator, such as the Ripple emulator.

Designing banners for mobile also means that you’ve gotta think about the size of your banner. You don’t wanna have a heavy banner, because that’ll influence the loading speed and the user experience. That being said, try to make sure the size is lower than 800 kb.
For this, you’ll need to take advantage of an awesome invention: compressed files. The best and most popular ones are .JPG (also known as .JPEG) .PNG, and .GIF (the latter is used for animated banners.)


Tip 3: Banner Design
The crucial principle of contrast mentioned above should also be applied to the different elements of your banner such as typography, shapes, colors, and the size of the elements.
If you always bear this in mind, the user will have a better visual experience since it becomes easier to check the different elements in the banner.

A good banner with a clear contrast will also help you stand tall against your direct competition.

Moreover, you should never forget that your banner needs to be designed bearing the platform where it’s gonna be showcased in mind. Try getting a feel of the website/app where you wanna display the banner.

This will allow you to adjust, adapt and come up with something really special and perfect for that particular spot!
How to make sure your creatives are gonna fit in? Use similar colors, similar typefaces and – if necessary – the same type of images shown on the website.



On the example above, the banner’s designer had one obvious concern: to design the banner specifically for this website. This will make sure you’ll get more people to actually click the banner, since they can be tricked and led to believe the banner is part of the website.
Now let’s check the exact same website with the same banner, but a different color.



This proves that – just by creating a banner of a different color – you can have a totally different result.

What’s gonna happen in this case? Most probably users will now check this banner and they’ll feel like it doesn’t fit in. It seems strange. The colors have got nothing to do with the website!

Now imagine this scenario: a user walks in, opens the door, and checks this image. What are they gonna think?
That it makes no sense and looks weird, like something that doesn’t belong. Users will definitely hesitate and think twice before clicking, since they’ll surely know that this image is gonna be a trampoline which will redirect them to a whole other page.

This example also showcases the importance of choosing the right color when creating your banner, since it can also really influence how clear/unclear the words contained on the banner are gonna be.

Here’s a cool technique that can help you determine what actually fits in: close your eyes to 85% and try to distinguish the text from the background. If you can’t distinguish one from the other then you’ve got a problem, mister!
You’ve gotta get back to the drawing board! Check what you’ve gotta do in order to improve your banner’s legibility. It's not easy to get it right, because there may be a lack of contrast between the luminosity of the banner and the color of the typography.

Take a good look at this example to understand what we mean:



The banner is well designed, no doubt about it. Even so, it lacks something in terms of good legibility. What about visual hierarchy?
Shoddy, to say the least. The call-to-action button should be way clearer to the user, in order for them to click like crazy!



In order for me to be able to explain this to you, I’ve changed the banner a bit. I’ve kept the elements smooth and minimal while really improving legibility.
In order to keep the main text (“Ocula”) white, I applied a blue layer with some transparency over the image, which allows me to have the background image visible, as well as the text legible.

In order to make sure I wouldn’t have to change the color of the word “Ocula” I decided to apply a blue layer. It’s got a bit of transparency over the image, since this technique allows me to have both a clear background and text.
To wrap it up, I changed the call-to-action button to a more appealing one. This is super important, since this is the part of the banner where the user is gonna click.

Easy! The best way for you to know how to design great banners is to put yourself in the user’s shoes. In which type of banner would you click?

---

Good article with a lot of good info, I'd just like to comment on the quoted part.

In some verticals, using pro-images, especially saturated stock photos will actually kill your campaigns and the banners will have lousy CTR to say the least.

Dating would be a prime example of this : use pro photos of models and you can prepare to loose money on the fly But take real life females, even amateur polaroid-style photos and the situation will improve quickly.

Basically, in case you are using an angle that is tied to real-life examples of something, amateurish photographs will do way better.

---

Thank you, Matej for your valuable input!
Can't disagree on this, high quality images are good for a certain type of ads. Adult specifically can give surprising results with poor-quality creatives, or something more amateur as you've mentioned.

---

Yes, poor sometimes wins over high quality. I even remember that there was a site, where you could upload your banners and the system made uglier version of the ads for you

---

I wrote a tutorial a while back on the old "reverse Photoshop" - making pro photos look anything but, and thus increasing conversions in dating-related niches.

https://stmforum.com/forum/showthrea...e-Amateur-Pics

---

Home > Technical & Creative Skills > Design - Imagery, Banners & Landers