Textures in Web Design - Less is More

Your rating: None Average: 5 (2 votes)

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?

Rate This!

Your rating: None Average: 5 (2 votes)
Anonymous's picture

Thanks for the information!

Thanks for the information!

Share This!

Latest Free Brushes for Photoshop or Gimp

Latest Free Patterns for Photoshop or Gimp

Latest Free Texture Packs

Latest Articles

Posted: Sunday, April 20 2014
Lately, I've been involved in a 2D Zombie Platform Shooter that is now available on online and in...
Posted: Sunday, March 23 2014
Comments: 5
Sorensen Leather, a high quality leather company in Denmark, has been kind enough to share 300 of...
Posted: Friday, February 21 2014
I've been getting asked more often lately on how to take a high quality texture photograph so I...
Posted: Tuesday, February 11 2014
Vector art in the form of SVG files has become more and more popular. Web browsers typically can...
Posted: Monday, March 26 2012
Comments: 1
Well, I finally got around to creating a Google+ page for texturemate! If you are on Google+ and...
Posted: Tuesday, January 18 2011
Comments: 26
The latest version of abrMate now allows you to convert any newer Photoshop CS brush set that can...
Posted: Thursday, December 23 2010
Comments: 8
You can export as many brushes as you want to .png files in one step with abrMate. First, open all...
Posted: Monday, December 20 2010
Comments: 2
Exporting Adobe Photoshop brushes to .png's in abrMate is very easy. First, you must have one or...
Posted: Monday, December 20 2010
Comments: 2
Well I want to apologize for not releasing as many textures, brushes, and patterns lately. It's...
Posted: Sunday, November 21 2010
One tool I have been finding very useful in Gimp lately is the Color Curves adjustment dialog so I...

Latest News

Posted: Saturday, February 25 2017
Posted: Monday, July 25 2016
Posted: Sunday, March 20 2016
Posted: Sunday, February 21 2016
Posted: Sunday, March 29 2015
Posted: Monday, October 27 2014
Posted: Friday, March 07 2014

Share texturemate.com With Others!

Legal Stuff

Every resource provided on texturemate is considered completely royalty free! The stock textures, texture packs, brush packs, and any other resources available for download on this site are completely free and may be used in commercial or non-commercial applications. Credit to texturemate for use of available textures or brushes is appreciated, but not required. These textures may be used in 3D modeling software packages where their appearance is altered, such as Blender, 3DS Max, Solidworks, CAD, or Second Life. They may also be used in scrapbooking applications. The only exception is that they cannot be redistributed commercially in their unedited form. These textures cannot be re-packaged and resold without significant modifications to their appearance. Brush packs may be used to create unique images in Gimp or Adobe Photoshop, but they cannot be redistributed without being significantly edited. Any resource on texturemate may be linked to when sharing information or resources to others.