Texture in Web Design

May 19, 2017

Texture in Web Design

Texture in web design may be seen as taboo; however, using it correctly can be the adhesive to bring a website together. Texture is often overlooked because people associate it with "dirty" or "grungy" and it's been overused. The main difference between a texture and a pattern is that patterns are small, tileable, repeatable elements whereas textures are bigger images that don't repeat.

Two ways to focus peoples' attention using texture is to have a clean background with a textured logo or a clean logo with a textured background. Texture can be used to guide the eye to important elements or divide content. Three ways to create your own original texture images is to take pictures, combine textures in Photoshop or use a scanner.

"How To Use Textures In Web Design", written by Jon Savage and Simon H. feature several tips in the article.

The first tip is "Maintain Legibility" meaning do not overuse textures to the point where you can't read the text.
The second tip is "Don't Beat a Dead Horse" meaning do NOT overuse textures!!
The third tip is "Practice Means Improvement" meaning experiment and try new things.
The fourth tip is "If it Serves No Purpose, Take it Out" meaning simplicity is key and make sure it goes with the outline of the website.
The fifth tip is "Consider the Effect You are Trying to Achieve" meaning keep the final effect in mind to not overuse textures.
The sixth tip is "Collect Resources so You Don't Have to Search Later" meaning keep an archive of textures that will be of use to you.
The seventh tip is "Learn Masks" meaning learn how to use layer masks in Photoshop.
The eighth tip is "Don't Sacrifice Quality for Loading Time" meaning find a way to maintain the quality of the texture while decreasing load time.
The last tip is "Choose Textures Logically" meaning choose textures that make sense with the website you're creating.