Transparency use has, until now, been sketchy at best. The best way to do it was using flash … but that killed any chance of mobile browsing. Great CSS techniques abounded … but Internet Explorer  6 wouldn’t place nice. With IE6 fading (or at least, developers are paying less attention to it), the floodgates have [...]]]>

Transparency use has, until now, been sketchy at best. The best way to do it was using flash … but that killed any chance of mobile browsing. Great CSS techniques abounded … but Internet Explorer  6 wouldn’t place nice.

With IE6 fading (or at least, developers are paying less attention to it), the floodgates have opened for transparency effects in web design. But with those open floodgates, a lot is coming out in the open. We’re seeing great transparent overlays … and not so great. Below are some notable examples for smart transparency use in Web Design.

The DrupalCon site uses transparency to great effect in its header. All eyes are instantly drawn to the event headline and date — which any designer will tell you is the first thing you need to see on a site promoting an event. The site continues to outdo itself with transparency effects. The most notable of these is its use of modals. The site so wisely uses transparency in its header and other places throughout the site that transparent modals on the site actually fit within the theme and act cohesively with the site. Modals too often stand apart from the rest of the sites design, but the transparent ones here give the site even more unity.

Give ForaBeautifulWeb.com this, it put all on the table with its transparency use (don’t believe me, just look at the site in IE6). While I may not be the biggest fan of its color choice in the top menu (it changes the colors through its sub-navigation … ironically putting some of its best looks on the subpages), the use of transparency in the top menu and the footer are sharp.

What I like about the menu is that it gives the title first place, but you clearly see the menu second. Further, it allows the menu items the freedom to be a little longer — phrases as opposed to a word or two — but you still clearly understand that you are looking at menu items. The transparency allows for this usability effect.

And take it from me, the ability to have a phrase long menu item is invaluable and hard to effectively pull off.

Kids & More Consigment Store has a landing page walking people through their variety of items. The transparency used in the title bars effectively accomplishes three things:

1} The image still gets the prime attention of the users’ eyes.
2} The users are able to more quickly find the category they’re looking for without looking away from the images.
3} The bars bring unity to nine very different images.

The transparency disappears on scroll-over, identifying to the user that the image is click-able for more information.

Silverback has been a catalyst for inspiring web designers for a little while now, and so while it may be getting overused as an example for this or that in web design, I can’t help but mention it here. At the top of the page are leaves and vines that actually give the illusion of transitioning as one expands the size of their browser window. It may look like a marvel, but it’s done simply using transparent .png’s.

Further, the idea behind it is genius. It’s a subtle touch that many who visit the site may not even notice. Those who do, however, feel as if they’ve found a little treasure … and suddenly this little app-selling site has someone’s attention a whole lot more.

Bottom Line: Creative use of transparency is becoming more and more common; and while it’s good to move in a new direction, don’t forget what is preached in other areas of web design: Purpose. Every example mentioned above has a purpose: from unity, to niche focus, to attention arrest. Personally, I see unity as the most immediate benefit to inserting transparency into web design.

Just make sure it’s really there, or it may not be worth doing at all.