Why Textures are a Good Idea

Those of us gifted with five (or six) senses know both the natural and man-made world around us by seeing, touching, tasting, smelling, and listening to it. When it comes to websites, we can only see and sometimes listen to them. I feel that the visual experience of a website can be enhanced by the use of textures even if you cannot actually feel them.

My other undertaking is a web startup and I wish I had screenshots to share with you to show you how unappealing Crowdzu‘s original footer was. Fortunately, I was introduced to Subtle Patterns and our footer underwent a transformation. This is what it looks like now with a background texture and lots of pops of color:

Chunks of black text (#000000 – for those who are following along from my previous blog posts) on a white (#ffffff) background or the opposite, while classy, can be a bit hard on the eyes because of the extreme contrast. If you happen to be using WordPress, use a color picker tool (Read more about it here) and check out the color of your dashboard. You will find that what looks like black is actually #23282D and not true black (#000).

For me, another way to reduce the impact of high contrast colors is to apply a subtle texture to the background/background color.

Using varied textures along with color blocks can also help break a webpage into sections in a more attractive way. I have done this on our homepage. What to you think? The ruled background of our bios page is also a texture!

Even though I thought I was in texture heaven with the discovery of Subtle Patterns, things really got kicked up a notch when I stumbled upon Transparent Textures. This website allows you to overlay different colors over Subtle Patterns’ textures. If you have read this far, you really should go check them out. One thing you will notice immediately is that a color can look very different depending on the texture used.

Here is an example:

For your information, a background texture is created by repeating/tiling a small image with transparency along both the X and Y-axis so it covers the area that it is applied to. All WordPress themes have a customizer option that will allow you to add a universal background image/texture. If you, like me, would like to use different texture and color backgrounds within different sections of a webpage or website, you can use this little snippet of CSS code that is cross browser compatible.

background:url(link to texture) repeat #color hex code !important;

All of the green texture blocks in this post were created with this code. Please share links If you have used textures on your website.