By: Heather Conary

October 1st, 2004

Reader Rating: 9

If you're anything like me, you don't pay much attention to online ads. To those of us who spend a lot of time online, they become like white noise. To combat them, our online arsenals expand to include browsers and toolbars that offer pop-up blockers and the like.

Whether you love them, hate them, or just ignore them, online ads are still a vast source of revenue in the online world. If you look at them from a marketer's perspective (or at least as a Website owner who wants to earn extra revenue), online ads are a potentially lucrative option. For many companies, online advertising is becoming more profitable. A study by the Interactive Advertising Bureau and PricewaterhouseCoopers calculated that advertising revenue in the United States increased by $1.3 billion dollars to an astounding $7.3 billion in 2003. You can read the entire study in this PDF [1] at the IAB Website.

With both large corporations and mom-and-pop stores now using online ads, it's tough to compete. In this article, we'll take a look at the seven most prevalent design trends in online advertising.

Trend #1: Curves and Organic Shapes

In writing this article, I looked at, analyzed and considered several hundred online ads. In nearly three-quarters (and possibly even more) of those ads, some form of curves or other organic shapes featured. Big name companies such as Weight Watchers use organic shapes -- arcs, circles, and rounded edges, for example -- to appeal to target audiences. The recent proliferation of these particular shapes is a sharp contrast to the hard-edged, square styles favored previously. In an effort to appear more comforting, approachable and appealing to their target audiences, companies have used the current economy to shed their "hard" styles in favor of these "softer" images.

Several well-known companies are shown in greater detail below:

1. Weight Watchers - This ad uses a combination of techniques discussed in this article. It uses Trend #1: Curves in its layout, along with a combination of two increasingly popular colors (see Trend #2: Colors). It also makes use of a stock photo that shows a "happy customer" (see Trend #3: Imagery).


2. OfficeMax - The office supply mega-store employs Trend #1 in the curves in its banner ad. It avoids the usage of the trendy colors, in favor of its corporate ID colors. Also, OfficeMax abandons the trend of sans-serif fonts (Trend #7: Fonts and Their Usage) in favor of its corporate font.


3. ReliaQuote - This online insurance company whose ads appear all over the Web employs two of the seven trends discussed in this article. It successfully employs Trend #1, using curves to overlay a stock photo (Trend #3: Imagery) of a face. ReliaQuote also uses a sans-serif font (Trend #7: Fonts & Their Usage).

It should be noted that this trend may not to be limited to online ads, as it appears in Website layouts and print design as well.

For the Adobe Photoshop users in the crowd, I've created a set of four curve brushes, to aid you in your development of banner ads. To install these into your version of Photoshop, make sure you have Photoshop closed, and navigate to your Adobe Photoshop install folder (typically, C:/Program Files/Adobe/Photoshop x.x). Open the Presets folder, then the Brushes folder. Copy the .abr file from this .zip [2] and, next time you open Photoshop, the brushes will be loaded.

Trend #2: Colors

Anyone who has spent any time online in the past few years will have noticed the vast usage (and in some cases, success) of the color combination of orange and blue. Recently, these colors have come to be associated with tech and computer firms. And in online ads, these colors seem to be just as popular as their layout-based counterparts. Through my research, several shades of blue and orange showed up, but they maintained the combination, usually with only the addition of neutrals (black and white).

The example image shows some of the more prominent colors I saw in my research for this article, along with their hex codes and RGB values.

1. #ED7F09; (237, 127, 9)


2. #FF6600; (225, 102, 0)


3. #2188E0; (33, 136, 224)


4. #0066CC; (0, 102, 204)


5. #23497C; (35, 73, 124)

All of these colors work nicely with neutrals (black, white and shades of gray). For help with color schemes, two of my favorite tools are:

• WellStyled's Color Scheme Generator v2 [3]
• Color Schemer Online v2 [4]

I've created an Adobe Photoshop color palette of these colors to quicken the banner development process. To install the palette into your version of Photoshop, make sure you have Photoshop closed, and navigate to your Adobe Photoshop install folder (typically, C:/Program Files/Adobe/Photoshop x.x) Open the Presets folder, then the Color Swatches folder. Copy the .aco file from this .zip [5] and, next time you open Photoshop, the color palette will be loaded.

Trend #3: Imagery

Many popular ads have moved from the extensive-copy-and-image format to heavy usage of stock photography that shows their "customers." An ad may show happy children playing, a satisfied mother, or a productive looking office -- any combination of upbeat images that showcases the intended customer reaction to their product.

In this example image, T-Mobile shows customers that instead of spending too much time inside (in corporate cubicle hell), that they should be doing things that they truly enjoy.

There are many royalty-free stock photography sites out there. Two of the most popular -- also my favorites -- are:

• Corbis Images [6]
• Getty Images [7]

Also, see SitePoint's own extensive list of imagery sites [8].

For those who need to create ads on a limited budget, my personal favorite is Stock.xchng [9], which offers a great selection of free stock photography (much of it rivaling, and in some cases surpassing, the royalty-free image sites). This Free Stock Photography thread in the SitePoint Forums [10] is also worth a look. If you have the time, it's definitely worth poring through these lists; I've gained many new resources from there, and other forum threads.

Trend #4: Deals and Copy

Online ad copy is currently focused on a tradition that marketers have followed for years.
The copy in most ads I ripped apart focused on these "Big Three" principals:

1. Get something for free


2. Save money


3. Make life easier

Big computer companies, including Dell and its competitors, offer traditional seasonal sales, including back-to-school events, and advertise their substantial savings in banner ads. Other companies, including many popular newspapers, offer discounts to readers who switch from traditional paper-based formats to their online counterparts.

Some of the most effective online ads use simple, direct copy to entice visitors to visit the vendor's Website (the challenge), then hit the visitor with the complete sales pitch once they get there. For a good article on writing great Web copy, check out The Web Developer's Copywriting Guide [11] by Matthew Gowdy.

Trend #5: Interactivity

Ever since animated GIFs gained support in mainstream browsers, people have made "interactive" banner ads. These range from the Punch-the-Monkey ads to more complex formats that feature simulated form fields. The main drive of animated ads is to gain clickthroughs.

With the invention and mainstream acceptance of Macromedia Flash, a new class of ads popped up. Hewlett-Packard was one of the first companies to jump on the bandwagon, enticing customers to check out its music software via an ad that featured a piano layout that allowed you to create your own tunes. The company continues this tradition today with audio-driven ads that explain and teach potential customers about HP's fotoimaging technology, and basically function as mini-presentations.

Along the same lines, more and more companies have thrown their hats into the ring with Flash overlay ads. These ads (usually of gargantuan file size) overlay the text of Web pages and entice customers to view much more than can typically fit into a banner ad. Currently, these behemoth ads are only available in Internet Explorer, but other browsers are now building in support for these overlays. However, even though many users find them annoying at best (confusing at worst), these overlay ads are reported to achieve clickthough rates up to a 50 times better than traditional banner ads.

If you decide the risk of offending your customers is worth the reward of the high clickthrough rate, check out this Macromedia article about creating transparent Flash movies [12].

Trend #6: Sizes And Layouts

Still the most common and most-used ad size, the banner ad is measured at 468x60 pixels. This ad size has become so popular that it's a preset in recent versions of Adobe Photoshop. Also popular are "skyscraper" banners, which weigh in at 120x600 pixels. Lots of ads don't fit a pre-defined size, such as all the Flash pop-over ads which have become more popular in recent months.

Many banner and skyscrapers ads follow a "thirds" formula. Two-thirds of the ad contains a picture and the main advertising points; the remaining third is devoted to minimal copy and clickable buttons.

In the examples provided here, both Carnation and Microsoft use similar layouts for vastly different products and markets.

Other sizes and shapes gaining (and in some cases, losing) popularity include:

• Square ads (most often seen in technology Websites)
• Pop-ups (most certainly losing steam since most Web browsers and toolbars come equipped with a pop-up blocker)
• Pop-unders (not quite as bad as pop-ups, but still losing ground due to pop-up blockers)
• Interstitials (a nearly full-page ad that loads between the page you clicked and the one you want to see; one site I found that used them extensively was iVillage [13]
• Overlay ads (gaining popularity due to the decline in pop-up ads; we talked about these in #5: Interactivity)

Trend #7: Fonts And Their Usage

It seems as if the growing shift from serif fonts to sans-serif fonts online is now projecting itself into online advertising. Nearly all the ads I examined used sans-serif fonts, often in addition to the company's "signature" font.

A great font resource, which I've seen mentioned several times in the SitePoint Forums [14], is WhatTheFont [15]. By simply uploading a simple JPEG, GIF, TIFF or BMP image, you can identify which font is used in a particular ad. This is particularly handy for reviving older ads for which you've lost the original files.

If you truly feel like browsing for a new font, 1001 Free Fonts [16] offers a vast selection of fonts. The only downside of this site is that the fonts are categorized by font name, and not by style.

If you're new to font selection, and are used to using any old thing that happens to be in your font list, here's a quick overview. Serif fonts, pictured in the upper-half of the example above, have "tails" that are used as decorative touches to the letter. Times New Roman and Garamond are two common examples of serif fonts. Sans-serif fonts, pictured in the lower half of the example above, are absent of the "tails," and frequently have much cleaner lines. Verdana and Arial are examples of common sans-serif fonts.

What NOT to Do

If you're tired of reading the same standard marketing fare and technical how-tos, and are looking for a refreshing perspective on online advertising, check out BrandSuicide [17]. This blog is subtitled "Ads that Suck" and features some of the most annoying, confusing and poorly put-together ads online. Akin to Vincent Flanders' book Web Pages That Suck, this site is a how-not-to guide to online advertising.

For a more in-depth look at the acceptance by Web users of various online ad formats, Dynamic Logic published a recent study on Consumer Perception (March 2004) [18]. To summarize the findings, this study shows that the online ad format preferred by most consumers was the banner ad; the one they prefer least was the pop-up ad.

End Note

For you non-Photoshop users, I'm in the process of obtaining a copy of Paint Shop Pro, to see about making a corresponding set of tools for other programs. If you're using a different program, and would like a copy of these materials, let me know.

[1] http://iab.com/resources/adrevenue/pdf/IAB_PwC_2003.pdf
[2] http://www.sitepoint.com/examples/adtrends/Brushes.zip
[3] http://wellstyled.com/tools/colorscheme2/index-en.html
[4] http://www.colorschemer.com/online.html
[5] http://www.sitepoint.com/examples/adtrends/Swatches.zip
[6] http://www.corbis.com
[7] http://www.gettyimages.com
[8] http://www.sitepoint.com/article/definitive-design-links-list
[9] http://www.sxc.hu/
[10] http://www.sitepoint.com/forums/showthread.php?t=55129
[11] http://www.sitepoint.com/article/developers-writing-guide
[12] http://www.macromedia.com/support/flash/ts/documents/wmode.htm
[13] http://www.ivillage.com
[14] http://www.sitepoint.com/forums
[15] http://www.myfonts.com/whatthefont/
[16] http://www.1001freefonts.com/
[17] http://brandsuicide.20six.co.uk/
[18] http://www.dynamiclogic.com/na/research/btc/beyond_the_click_mar2004_part3.html