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.image001

Putting all the components in will look overwhelming and cluttered like in this example.

image002

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.

image003

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.

image004

Like the Sungevity example, putting all the assets in the small space might not be the best option.

image005

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.

image006

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.

image007

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.

Leave a Comment

Amanda Trieu
Amanda was raised in the East Bay, and that's where she currently resides. She studied Graphic Design and Fine Arts at UC Davis. She enjoys sunshine and the outdoors and loves relaxing on the beach, hiking, swimming, camping, and sightseeing.