Creating a Banner Advertisement

After Hurricane Katrina, I quickly organized a benefit concert to raise money for the Red Cross. Due to the short notice, using online advertising was the best way to quickly promote the concert and get interest. I decided to go with a banner advertisement. The primary things to keep in mind for banners is a graphic of small size, but eye catching enough to gain the attention of web surfers.

The first step of creating a banner is knowing what needs to be promoted and building the graphics. In this case, we were promoting relief efforts for hurricane victims so it was important to immediately let the viewer see the cause. The graphics I was given to work with included the logo of the concert host and a logo from The American Red Cross.

There were a few more things I needed to know to make this banner affective.

1. Which websites would they go in and what were the colors of each site. In this case, both websites had black backgrounds and I wanted each banner to blend into the site, but the content to stand out, so I chose a black background for the banner.

2. What my file size limitations were for the site. I also wanted to convey as much information as I could with the smallest file size so it would load quickly. My limitation was 30K for one site and 35K for another. In addition, each needed to be 468px X 60px. Of course, I wanted to keep this files as small as possible so they would load quickly, but easily noticable.

3. What information I needed to display. For this event, it was critical that I let the viewer know immediately what the cause was, who was involved in it, where the event was, and when the event was to happen.

I decided to start my graphic with the words “Hurricane Katrina Victims” which, in itself was an attention getter at the time. Due to file size limitations for a banner, I wanted to not use too many special affects or colors and keep it simple. This is what I started out with:

I then wanted a transition between this and the information, so I made a new gif with the following: “Hurricane Katrina Victims”

Third, I wanted to display the information on location, who was involed, and when the event was. In addition, I wanted this frame to stand out a little more so I used some photoshop effects and made the third message.

Finally, I wanted to tween my three images so there would be a smooth transition between the three. Using photoshop, I put two tweened frames between each of the three images. Again, I only went with two frames each to save on filesize. In addition, I assigned time delays to each frame to give the viewer enough time to read. I chose 1 second for the first frame. Two and three were transition frames and received no delay. Four was the frame saying “Need Our Help” and it recieved 1 second. Five and six were transition frames which received no delay. And finally, our frame with all of the information on it received a 5 second delay in order to give everyone time to read it and so it would appear for the longest period of time. The final image was roughly 26K and the animated .gif is shown below.
Estimates showed that average clicks on the banner ranged from 0.30 percent to as high as 1 percent. In the 9 days that this banner ran on the two sites, it was viewed 12386 times, but received 464 clicks, which is roughly 3.75% and the show was a success, raising slightly over $4000 for the American Red Cross.

About The Author

Uday is a freelance graphic and web designer. With eight years of experience in web design, Uday makes a variety of web pages from corporate to personal and built pages which are easy to edit for the end user. All coding is written cleanly to ensure that pages are run smoothly, load quickly, and perform to it’s full potential.