300imagesfrom1800sites

I started gathering little, iconesque web images for myself so that I could compare, contrast, and study the techniques used by graphic artists on the web like Ben Sky. My initial pool of images looked so interesting that I decided to continue methodically hunting and capturing the icons for a public display piece.

The purpose of this document is not to copy the intellectual property of others, but rather as a jumping-off point for your own unique web graphic projects. It's for Brainstorming, if you will.

I roughly estimate that for every six web sites I scoured, I was able to acquire one graphic image. I visited only Fortune 1000 company sites, major online retailers, well known blogs, top advertising, publishing, and design agencies, technology and software industry leaders, and the very largest online news publishers. Approximately 1800 web sites later, I have this collection of 300 of the most interesting, unique, and beautiful formations of pixels to display.

— Ro London

Arrows

Most sites using arrows to help graphically enhance their text use one of three things: 1) They use a simple, solid-colored arrow. 2) They have decided to use the angled-quote character ( » ) in some variation or another. 3) They use the > symbol. I did not include any of these abundant examples.

Pictured below are some of the exceptions to the rule. Although I did encounter duplicate styles, I tried to include only one of each variation regardless of color or size.

image of arrow icons

A quick sidebar about arrows: There has been some discussion and debate [2] [3] about 'breadcrumb trails'. DesignInteract.com is the first site that I've seen to use arrows facing in the opposite direction to help orient the user within the levels of the site. It was like I was looking at a breadcrumb trail for the first time!

Posts

Although quite popular on the blog style of web site, I was surprised at how frequently I encountered these nifty icons on large corporate sites. In the later case, they were typically used to notate a link to a published article.

image of post icons

Comments

You'd think that all of these would be found on blog style web sites to denote reader contributions to its conversation thread. In at least a couple of instances on large sites, the comment icon was used to help prompt a user to submit a quality-assurance feedback form.

image of comment icons

Mail

The mail icons typically have three separate uses: either to identify contactual information, or to suggest mailing the page to a friend, or as a link to a mailing list sign-up form. The style of graphic (front of envelope, back of envelope, or 'speeding' envelope) didn't seem to have any consistent meaning in the three usage cases.

image of mail icons

Bullets

Most of the sites I visited used bullets; However, most of the bullets were typical circles, squares, or dots. I did not include any examples of those common bullets. Sharp, small, innovative images for bullets are much more rare than I would have ever thought — I was only able to spot a few.

image of bullet icons

Print

The only places that I found these icons used were the online news sources. Almost all of the article pages offered some sort of 'printable' format, although most of the sites opted for a text link. I don't care for the way most of them look, and that might explain why many of the pages use a text link instead of a graphic. I suppose that the main trouble with a print icon is that you can't deviate too much while still maintaining the integrity of the icon's function.

image of print icons

Carts And Bags

These images are all from major online retailers, not fly-by-night sites. You're not imagining anything; all of the shopping cart images look terrible! Conversely, all of the shopping bag images look pretty swell. Perhaps it's easier to manipulate 200 pixels into the shape of a bag than a cart, huh?

Although all of the retailers used text in their 'cart' links, about half of them did not use any icon at all.

GUESS?, Inc. is the only online retailer to try this nifty idea of incorporating the number of items in the cart into the actual image space.

image of cart icons
Modified on 7/2006 — All Images are © by their owners. Please do not steal.