Link Banners
 
Sunday, March 16, 2003  

In a certain corner of this web (primarily graphics and illustration) there are authors who provide little banners for others to use on their link pages. The first ones I noticed were 200 x 40 pixels; then I noticed ones at 88 x 31. I became intrigued by the link pages where the mass of banners was overwhelming that individual banners were hidden by the visual noise.

These little banners have a split parentage. The larger size (200x40) first appeared as gteasers on the link pages to porn sites. The smaller banner, actually a button, was initially used to mark the specific software or hardware used to power a site. The graphic arts community has tamed and expanded the form and kids, particularly in Asia, it seems, use them as calling cards. In a lot of cases, the linking to their homesites (typically Photoshop drawings or fan art, a bbs forum, and thank-you pictures for ever higher hit counts) seems secondary. I ran across a few sites where the page displaying the homesite banners had as many images as did the link page to other sites. At the other end, there are the collectors of banners, catalogued by name or region.

[Image]
[Image]
[Image]
[Image]

Across the board, the most successful are those that follow standard graphic rules: use clear, sharp images with distinctive contrast and a strong center of focus. Decide which is more important, the graphic or the lettering. Favor immediate impact over detailed texture. In many cases, designers made banners for both light and dark backgrounds.

Large Banners
Even when following good, basic principles, the goal is to grab the viewer's eye and deliver the full message in one glance. This is difficult to do with the large banner because it is an awkward shape. The 5-to-1 ratio is even beyond accepted panamora proportions. It is the size of a mini-mural that begs to be scanned. To enforce the single glance requires significant design sophistication.

[Image]
[Image]
[Image]
[Image]

The most obvious way is to treat the banner as a billboard. Language is automatically elicits a scan response. The language is short enough that the automatic scan acts like a glance, in effect subverting the scan.

A second method to enforce the single glance is to embrace the human-scale of the 5-to-1 ratio and simply turn a vertical image on its side. Invariably these images are young ladies, which recalls the origins of this format.

[Image]
[Image]
[Image]
[Image]

A third method is to use strong horizontal lines along one or both edges. These either "window" the box and emphasize the slice of a bigger world, or denote a whole physical space, such as the horizon of a vast sea beyond. It seems, however, that the strong lines succeed only partially and instead other tricks come into play.

The great majority of large banners do not succeed in enforcing a single glance. Instead, they divide the format in half, requiring a second glance. (This can be so exaggerated that the banner looks like two smaller units butt together.) This is a weaker solution because in the sea of visual noise, introducing more eye movement only adds to the confusion. It succeeds when the contrast between halves is strong; the contrast itself captures the glance.

[Image]
[Image]
[Image]
[Image]

The diagonal does not seem to help a banner to stand out. Instead, the diagonal reinforces a scan and does not assist in fixing the glance. The diagonal can support another, stronger glance format, but doesn't work on its own.

[Image]
[Image]

The banners that intrigue the most are those that break the panel into thirds and fourths. These numerous subdivisions change the scale of the format from that of a whole shape to that of a container. If handled correctly, this technique can enhance the fixation of the glance by distorting the flat topography of the whole through recession or procession of the plane.

[Image]
[Image]
[Image]
[Image]

No matter what formal devices are used or abused, the prevailing image in these banners is the eye, particularly that of a young female (or at least androgonous youth). Strong design formalisms fix the glance objectively by presenting data/information for the viewer to receive. The use of eyes fixes the glance subjectively by telling the viewer about the attitude of the design. To the written and design language already present, the eye adds body language to the message.

Even if the eye is highly stylized and non-human, as in Lucky Rabbit, above, it snares the viewer's glance in a way no other device can. Tatoomcity has animated movement, sharp contrast, bright colors, and breaks plane by warping the colors behind the text. Still, the visual interaction is one of remove, with the viewer reacting to an objective "other". Compared that to Luck Rabbit, where the formal devices are arguably not as strong, yet the two dots that make up the rabbit's eyes capture the glance and set up a two-way exchange that brings to it the intimacy of a subjective interaction.

[Small Banners -> next]