Best Visual Practices for Small Banner Ads
Published: September 16, 2015
Author: Amanda Brief
So you’ve build out an attractive standard banner size (300×250). The client approves of your design, and now it’s time to build out the banner to different sizes.
Some sizes are larger and some are smaller than your initial 300×250. The larger sizes like 160×600, 728×90, and 300×600, are easier to build out because you have a lot of room to play with. On the other hand, the smaller sizes like, 300×50, 468×60, and 200×200, can be trickier. In this blog I will go over examples and best practices for building out these smaller banner sizes.
Translate Your Banner to a Smaller Size
Every ad is different, but in general it will include a logo, headline, CTA, and an image.
I’ll be going over 2 different banner designs and how I translated the 300×250 design to the smaller sizes.
Example 1
Our first example is this Sungevity banner. We are going to build out the Sungevity banner to 320×50 size. We have to fit the assets into a significantly smaller space.
Putting all the components in will look overwhelming and cluttered like in this example.
The text and logo are very small and difficult to read. We must consolidate and remove things that we can do without. The headline, logo, and CTA are all very important components, so in this case, we can eliminate the image.
Here is an example of the final product without the image. Everything is legible, there’s negative space (meaning some breathing room), and ultimately it delivers the message.
Example 2
Our second example is this SurveyMonkey banner. We are going to build out the SurveyMonkey banner to 468×60 and 200×200 sizes.
Like the Sungevity example, putting all the assets in the small space might not be the best option.
In this ad, the text is legible, but we can free up some room for a nicer composition. Also the image is quite small and hard to see, so it’s not very effective. And for this SurveyMonkey creative, the client called for the logo to be more predominant.
Here the alternative banner.
We removed the image and in its place added the SurveyMonkey logo icon. Now, the layout of the banner is cleaner and more straightforward. (Note: you should always check to see if the branding allows for different uses of the logo like in this case.)
Here we have a different type of banner – more square-shaped than the horizontal rectangle we have been discussing.
This banner is 200×200, which is similar in size and composition to the 300×250. In this case, we can keep the composition mostly the same with minor adjustments to the size of the copy and CTA.
Summary
There are different size banner ads and with each creative, there can be different approaches to achieving a successful banner.
To recap, here’s a list of general rules to follow when making smaller banner ads.
1. Identify what is most important in the ads, like the headline, logo, and CTA.
-Other things less important or impacted due to resizing, like images, can be omitted.
2. Make sure your banner is not cluttered. We want the text to be legible and have some breathing room.
3. Check to see if the brand guidelines allow for alternate use of logos and other brand assets. This can create more space for the ads.
