Designing Award Graphics

by Tom Speer, Webmaster
Fortress Web Design and Hosting (award program closed)
1 December 1999

Print Version

The popularity of web awards can frequently be measured in terms of the credibility of the award program. However, to the potential award winner, an even more important factor is often the appearance of the award graphic itself. As I mentioned in my previous article, the one thing that prompts many applicants to seek out an award is the comparative attractiveness of one image as opposed to the next.

Anyone who has applied for an award has probably done the following... you look at a group of awards on a web site (or several pages) and you pass over the ones that look like they have been hastily designed. But then you notice one award that looks as if some thought was put into it. The graphic is sharp, the colors are coordinated, and all of the text is legible. The image is a small piece of art and being the art collector that we all are... we have to have it. So off to the award site we go (hopefully to read the criteria and apply in earnest).

The Best Award Graphics

So what makes one award graphic better than the next? This is a subjective question with an equally subjective answer. It is said that beauty is in the eyes of the beholder so we will try to cast aside the issue of beauty in this article and instead, focus on "practicality". The best award graphics often exhibit the following characteristics:

If you currently offer an award or are considering starting an awards program, your award graphic will serve as a calling card of sorts for your site and your program. As such, it is important to carefully consider the design of your award image (regardless of whether you actually design the graphics yourself... you still have final approval of the graphic that will represent your efforts). With this in mind, lets take a look at each of these characteristics a bit further.

Image Dimensions and File Size

These two generally go hand in hand so we'll address them together. Award sites often cite load time as a critical element of the evaluation process. As an award presenter, you have most likely devoted a great deal of attention to the layout and general "look" of your own web pages. That being true, why would you impose an award graphic on your winners that would add to the likelihood of them never winning in the first place?

As an example... assume a web site is designed for 640x480 screen resolution (as many are). Notice in the scale example that an award image that is 200 x 300 in size (don't scoff... I checked and found quite a few at these dimensions or greater) would take up nearly half of the available screen area in a small resolution design.

Now let's further assume that the image is not compressed. Image compression can reduce the graphic by as much as 70% in size! Most popular graphic editing software programs have some form of compression routine built into them. However, if you are designing your own graphics, there are several free and low cost utilities out there that can be used to reduce your image file sizes significantly.

If you don't mind paying a little, I highly recommend the series of SmartSaver utilities by ULEAD. For those of you desiring a less expensive alternative, there are a number of web sites that provide basic image compression directly through your web browser. The Website Garage (site closed) and Net Mechanic are a couple of examples.
 

Medium Compression		High Compression

And now a final note on image compression. With each graphic format (GIF and JPEG) comes certain tradeoffs when you compress an image. These are usually in the area of image quality. Higher compression rates typically result in a loss of image resolution, color depth, or both.

These examples show a typical JPEG image at normal compression and at high compression. The original text was difficult enough to read due to the color choices (discussed next)... at high compression, it is a complete mess. In addition, the highly compressed image has blurred the skyline so much that it appears as though the city is melting. Which would you rather have displayed as an award on your site?

Color Choices

Your choice of colors plays a very important role in the appeal and "clarity" of your award design. Color contrast can make your award a work of art or an eyesore. In the example above, you'll notice that the choice of text colors (white on black) offers little contrast against the already dark background of the city and waterline. On a color wheel, similar color tones are placed closely together. The closer together the colors are on the wheel, the less contrast you have. In the previous sample award (above), the predominant colors are black, brown, and gray. Using black text on this color scheme makes it much more difficult to read. Compressing the image makes it nearly impossible!
 
At first, it is best to consider each element of your award image separately when deciding on colors. Choose a background or border color first (if you use one), then choose the image(s) for your award, then choose the text. Now examine the choices you have made and see if they complement each other or conflict with the overall appearance. Varying hues of a similar color often yield nice results, saving the greater contrast for the text element (which should be the clearest).

Notice in the example how the "earth tone" colors do not overwhelm each other... but instead add a complementary balance. Now take a look at the same example with green text on yellow background. Not only is it difficult to read but the outer border combinations of purple and green look garish and out of place against the more sedate backdrop of a city skyline.

Relevant Themes

This aspect of award design should be the easiest, yet it is often the first to be abused. In developing an award, first consider the theme of your site and the nature of the award itself. Your theme includes such elements as the site name, color scheme, logo, slogan, etc. These elements should be integrated into the design as much as possible. While you need not reproduce your site in miniature, you are after all, establishing a "trademark" of sorts.

If your web site offers game reviews for instance, a "flower" has little relevancy to the content you provide. Try to avoid the "ordinary" as much as possible. Make your award something that you would be proud to display on your own site. All too often, a new award program is assembled hastily with little regard for the appearance of the image itself. Consider what aspect of your site stands out the most (perhaps your logo) and try to work some part of that into your design. If you are unsure, ask your friends what they consider the most memorable aspect of your web site to be.

If you do not have a logo, consider a stylish font combination to hi-light your award name. Avoid using generic clip-art (we've all seen it) or animations in most cases. Animation can be a nice touch if done correctly... more often than not, it is a bandwidth demanding burden on the award winner.

Finally, while it is sometimes appropriate, try to avoid using your personal name on the award. This is more of an opinion on my part but your award should focus on two things... the nature of the award (graphic design, education, business) and the achievement made by the winners themselves. Your name should not be the predominant aspect of the award graphic unless you have strong name recognition to draw on (Albert Einstein or Betty Crocker for instance). Jimmy's cool site award just doesn't hold the same appeal as, lets say, the "Image Award" or "Web Artistry" award.

Advertisements vs. Awards

Before you start, decide whether your award image is truly a reward for winning webmasters or an advertisement for your site. While there is undoubtedly an overlap between the two, your award graphic need not emphasize the fact. As mentioned earlier, your image should reflect the nature of your web site. This may include the name of the site, a relevant award title, or some other aspect of your theme.

As such, you need not include your site URL in the graphic image. The text will most likely be of poor quality (assuming you have taken the first section of this article to heart) but more importantly, the award focus will shift away from the winner and back to your site address. As an award provider myself, I am not offering the "http://www.fortressdesign.com award" for excellence in web design. It is simply the "Key Site" award. If your award program has credibility and appeal, the links will come naturally in most cases... don't force the issue.

The more you blur the line between banner ad and award, the less likely people will be to post your award image. Your program will resemble more of an affiliate program than a recognition of some achievement on the part of your applicants. In a previous article, I mentioned the importance of establishing a purpose for your award early in the development of your program. Hold true to your choice and apply it in the design of your awards. Don't be swayed by the potential of higher traffic to your site unless that is all you are interested in (which I hope is not the case).

Summary

A successful award program is strengthened by an appealing graphic image. The award should be small enough to integrate into most site layouts. The image should be compressed and carefully designed to enhance the clarity of any text and photographic images. It should include some aspect of your theme or purpose without reverting into a blatant advertisement for your web site.

By exercising restraint and good judgment in your graphic design practices, you not only enhance the Internet community by reducing the bandwidth burden... you also make the web a much more attractive and enjoyable place to visit. Your award, even though it is "given away"... is a product nonetheless. Make it a good one and the "consumers" will flock to your site!