Principles of Banner Design

This article originally posted by JuggoPop on JuggoPop’s V7N Blog, which no longer exists.

Principles of Banner Design (and some other stuff)

Today I want to try and uncover what it takes to make a graphic banner ad worth its weight in clicks. Also, I want to explain my mindset used when designing banners.

What makes a banner worth clicking?

This is something that is different for every person and depends greatly on the reason they are online at that moment. To relate this to graphic design we must go a step further and decide the banner’s target market.

Some questions I ask myself are:
1. Are they looking for something they shouldn’t?
2. Are they trying to get something for nothing?
3. Are they looking for quality?
4. Who is this person?

Let’s start with question number one. “Are they looking for something they shouldn’t?” By this question I am asking myself a few simple things. Are they looking for something out of their range (mentally, physically, and/or sexually)? Say you are designing banners to lead business owners to purchase hosting from you. Do these people really know what they are looking for? Or are they looking for information first? Do they only care about the price point, while not fully understanding the services needed or rendered?

Question number one opens many more questions and really allows you to open a dialogue with the client you are designing the banner for. Basically it boils down to asking yourself if you are unintentionally leading the wrong person in a wrong direction.

Question number two asks, “Are they trying to get something for nothing?” These are the people that click on any banner that says “Free” in it. From my experience these visitors are good for traffic and nothing more. They are not going to purchase any products you have. They will look nice in the sites logs, but do little more. However, sometimes this is all the client is really after.

Question numbers three and four ask two things, but relate well to each other. “Are they looking for quality” and “Who is this person?” Answer one and the other answer may come out in the process.

Examples: “Who is this person?” (i.e., targeted online click through)… They are 30-40 year old mothers of new babies and a household income of $50,000+ looking for new nursery items. “Are they looking for quality?” Yes, (only the best for their baby). On the other hand, a 14 year old male, with $0 income, who is looking for video game cheat codes is not looking to purchase anything, much less a quality item, he wants a fast answer that works. He just wants to get offline to try the code out. Sure, everyone “wants” quality, but is this visitor willing to settle for less? That’s the true answer.

How much is your banner worth?

Silly question really. Most artists break down the time involved into a dollar amount. Most banner owners will quote you the price that they paid an artist. But that’s not the value I am asking.

I want to know what it is worth, not in dollars or click-through traffic, but in the overall image of your company. What do people who have never seen your site (and are not currently targeted to click the banner) think of your company?

Example: My wife and I were talking about this yesterday and she mentioned the mortgage banners that list all the stats in a flash design. You know the one. You mouse over it and all the little two letter state abbreviations light up. Anyway, she brought up the point that currently she is not targeted by that banner, we are not looking for a mortgage… but if we were, that site is already listed in our minds as a cheap company that we would never do business with. So, once we are “in the targeted market” we still won’t use them. It doesn’t mean they are a bad company; they just have already made a cheap impression on us. This example goes back to wanting quality, that banner doesn’t tell us (the targeted visitor) that we will get what we want.

People look at your banners, even when they are not shopping your products or services. Like billboards on a freeway, they seep into our minds for later recall when we do need something that was advertised. So, how much is your banner worth?

It only takes once to get burned:

Have you ever clicked a banner with good intentions and got led on a mind field of pop-up, pop-under, spyware, homepage reset, and other shady crap? Sure you have. We all have.

It only takes one time to get burned. After that, you probably only clicked on banners that were on sites you trust. So besides worrying about the marketing of your banners on quality sites (that’s an article for John Scott to cover) you also have to prove to people that your banner won’t do that. The only way to do that is to build banners that invoke a since of trust. And then, you have to follow through with that on your site.

So besides knowing your targeted market, you must understand how to persuade those visitors that you are for real and worth a click. Because trust me, they have been burned too.

The power of “click here”:

Those two little words used to be the gold mind on the internet. People didn’t totally understand links. There was (and still is) a rush to get online and be apart of the thing called the “net”. People from all walks of life and all age groups flocked to the internet in hopes of finding something. Everyone else was doing to, why not?
With that, came a group of people that had no clue what they were doing. You had to tell them “Click Here”. And guess what? It worked. “Click Here” was the phrase that paid for a long time. Now-a-days people mostly see that as a ploy to get you into one of those mine field type of websites. Some people avoid the words like it’s the plague. However, those words still have power. Don’t be afraid to use them. You still get the new users clicking and those of us that have been online for years have a deep desire inside of us that everything thing in the world will come together and be perfect once again, if only we click those words. (Ok… So it’s not that strong, but we still want to click).

My personal feeling is if you have space to fill and you have a quality product advertised on a quality banner, then those words are ok to put in that space. Just don’t over use it.

Graphically speaking, let’s design:

Here I just want to cover some basic points.
1. Banner sizes
2. Creating a style
3. Saving for the internet

With all that I have talked about it may seem like it was less about graphics and more about marketing the banner. Well, that is true to an extent. Designing banners is more then slapping some text on a background, it’s more then the colors you used, it’s more then typing text into an online banner maker and joining a banner exchange. Really, it is.

Point number one. Banner sizes used to be a standard few. 468×60 (standard full size) was all most people ever needed. Today there are many different sizes that will need to be employed if you want to be able to advertise on anyone’s site. While some webmasters choose to have strange sizes, most will be ok with a size from the following list.

Every time I design a banner pack I do a minimum of one in each of these sizes, but most of the time I do anywhere from 4-8 different color versions of each size (40-80 banners in one banner pack).

Banner Sizes List:
120×60, 120×90, 125×125, 150×120, 150×30, 160×600, 200×60, 234×60, 468×60, & 88×31

I could give an example graphic for each of those, but I won’t… just search Google. They are all out there currently in wide use.

Point number two. Create yourself a style. I have a style. I can go out of my style if I really need to. However, most people want my work because, it is what it is. People think that what I do and the style I use is simple. I’ve seen people even try to replicate it. However, I see the differences right off. I do things a certain way and make sure certain things are always 100% right by my obsessive compulsive mind. Sure my style can be simple. It can also be over the top. But every site, banner, or graphic I design has small traits that friends of mine can always call out and know it was me. This is something that gives people a reason to come back.

You will need to find that in yourself. Don’t copy the looks of the internet today. Design something that allows your “inside artist” to be expressive. Let other people copy you. Be the leader and not the follower. Then sell that style with your work. (And let your work sell you.) Banners need to look different then the one next to them. You don’t want it lost in the crowd. Remember that.

Point number three involves something you would think everyone knows about. The larger the file size the longer it takes to load. Some webmasters have limits on file weight when it comes to ads on their sites. Be sure and do everyone a favor and limit the size as best you can without loosing the quality of the banner. It’s a fine line.

If you are using Adobe Photoshop you can use the “Save for Web” feature and allow it to select the settings based on your desired file size. Then you can adjust this to find that “fine line” that needs to be there (quality vs. file size).

Here is how you do that in Photoshop. First have your image open in Photoshop. Select “File”, from the drop down menu select “Save for Web”. A window will open that has a preview of your image. At the top of the window is a tab for “Optimized”. Select that tab to see the version as it will be saved. On the right hand side of the window are all of the settings you can use to adjust the size of the file. Below the image at the bottom of the window is the file size the image will be and how long it will take to load at a given internet connection. If you right click that area, you can change the speed that you are targeting and see how fast or slow it will be at that connection.

Now that you are in this window (Save for Web) you can use the power of Photoshop to adjust these setting for you and get close to your goals with ease. On the right hand side, where the settings can be adjusted, you will see a box named “Preset:” to the right of this box is a little circle with an arrow in it. Click that circle. A pop out box appears and in there is an option called “Optimize to File Size”. Click that option.

Now another smaller settings window pops up. Change the settings to the desired file size in kilobytes and press “OK”. Now look at the image in the preview window. Does it still look the same? Is it ugly now? You can follow those optimize to file size steps again and again until you are happy. And even then you can manually adjust the settings on the right. It can take a bit of learning to get the file size how you want it each time. It even may require removing some of the less needed items from the banner to get the file size down. (Fewer colors can help)

Well, I hope some or all of what I have said today helps. Good Luck with your banners! I’ll be back soon.

Leave a Reply