Textures in Web Design - Less is More

The use of texture in web design is something that can be the difference between a site that really stands out or a bland looking one that will not garner as much attention. Grunge styles or wood grain are popular textures that if used effectively here and there, can look great. Textures can add dimension and depth to a site's appearance and have seemingly made a comeback in the last few years, although many great web designers claim to always have used them. In this article, we'll cover some ideas that should be in the back of every web designer or graphic artist's mind when both designer the texture graphic or how it is presence on the site. Tip 1: Less is More Less is More. Less is More. Less is More. Repeat it three times. The 90's are gone! Tiling repetitive backgrounds with strong lines should be avoided. Our eyes and brain can pick up patterns quickly and viewing a busy repeating background pattern can be a strenuous effort. Take your nice background image and fade it to transparent or the background color you intend to use for the site. The only effective repeating backgrounds are ones that are barely noticeable and don't stand out to much. The best effects on sites are the use of rough edges or surfaces here and there, but not too much. Sometimes it may be hard to use restraint on your image manipulation and graphical capabilities, but an extra image here and there can suddenly make a website appear too busy and too cluttered. Another side effect of using too many images on a site is the extra load times it may take. Slow sites are also unappealing to impatient browsers and potential customers. The following example of mtgu.org shows great use of a wood paneling background that is not too strong or overpowering and fades to a solid background color. The use of rough edges and surface textures on the site's main content area also add dimension and appeal to the site:

mtgu.org's Great Subtle Use of Texture

Tip 2: Target Your Texture Style to Your Audience You may love to design dirty, grungy looking sites, but would you create one for a makeup artist or fashion designer? Perhaps, but only of that is their style and if they approve of what you are going for. They may want a cleaner look or lighter colors overall. This doesn't mean that you can't use a well placed texture or stock image here and there, but maybe something else like a clean metal or chrome would fit the bill better. Save that killer grunge design for your next rock band client's site. The example below for Rocky Mountain Roasting Co. shows some great subtle use of wood grain and rouge edges without overdoing it while at the same time gives the feel of a rugged Montana coffee company:

Rocky Mountain Roasting - Nice Wood Grain and Rough Edges

Tip 3: Is Transparency Your Friend? Depending on your comfort level with your user's internet browser capabilities and your intended audience, you may feel that it is time to rely on .png formats with transparencies in them and drop support for browsers such as IE6 that have a difficult time rendering transparency without extra tricks such as using Javascript to render the alpha channel in the image. Some web designers will tell you that you must accommodate every browser, even if it is 15 years old, while some will tell you to go ahead and make the latest and greatest sites. A quick peak at your current traffic in Google Analytics can help you make the decision on whether or not you should be dropping support for browsers that can't handle transparency. Why? Just like the use of multiple layers to a graphic artist, transparent images can be layered on a website using CSS. Your stylesheet is your friend for 'layering' images on your site. For example, apply an alpha channel to a texture image you want to use in Photoshop to make it partially transparent or blend it to completely transparent in one direction and now its appearance may fit the bill. Of course if you don't want images on your site to contain transparency, you can create your transparent textures over top of the color you wish to use on your site with a little more work. But who wants to deal with more work?