The Use of Texture in Web Design

These days textures in web design are vying with other trends such as transparency and gradients. The days of such textures as wood, grass and chalkboards seem to be fading, but as you will see in this article, they are still around and they still work well.

A texture, whether it is used as a background or on elements, can add some interest to an otherwise plain design, and they work well with image-light websites. Take a look through this showcase that we have compiled and see if you think textures in web design are here to stay.

Textures in Web Design

Bahur78

This freelance web designer uses a cardboard-like texture as a background for his site design with a graph-paper pattern at the top.

Bahur78

Maptia

This site uses a chalkboard texture and a nice example of retro typography for its landing page.

Maptia

Leaders The Conference

This site, created to promote a 2013 conference, uses a grungy texture and is presented in a very minimal style.

Leaders The Conference

Jarritos

This Mexican soft drink manufacturer uses a set of distressed textures as backgrounds for its site design. The whole site is great fun, which fits their products perfectly.

Jarritos

Wearable Print

This site uses noisy pastel textures, which appear to be an up and coming trend in web design – they give a very subtle effect that enhances minimal site design.

Wearable Print

Headlamp

Another example of noisy textures – this site uses three different shades of gray.

Headlamp

Kaleidoscope

This app site uses the shape of their logo for a background texture in deep rich purple tones. The outlined square on the image below has been brightened to show the pattern.

Kaleidoscope

Stephen Caver

This site uses a background texture that looks very similar to clouds, and there is an irregular lines texture over each of the black boxes.

Stephen Caver

Tony Geer

This web designer and developer presents his site with a subtle texture over the black header section and a splatter-style texture behind the main image. This is a very nice alternative to a gradient.

Tony Geer

Word Refuge

Textures are used throughout this site, and there are two on the landing page. The background texture is a noisy, grungy pale color with some old books at the top, and the texture on the ‘Your Story is Valuable’ element is similar but darker in color.

Word Refuge

The Ruby Tap

These couple of bars/restaurants are run by two sisters, and the website uses a huge wood texture, which is far too big for the items that are placed on it – but somehow it works!

The Ruby Tap

MOOo Living

This company rents out luxury holiday apartments in Prague. Totally away from current trends, they use a grass texture as their background.

MOOo Living

Lou!

This French site is promoting a StudioCanal film called Lou!. They use both a wood texture and a knitted texture for their landing page.

Lou!

Holler

Using a black background, the texture on this branding agency’s site is very subtle – so much so that you can’t see it on the image below as it has been reduced in size – so I have put a square in the bottom right corner at full size and brightened a little to show the noisy texture that is present.

Holler

Fair State Brewing Cooperative

Here again we see a wood texture as a background for this site’s logo – wood textures are no longer really trending, but have never gone quite out of style.

Fair State Brewing Cooperative

Rabuzin Fine Art

This site has a predominantly blue color scheme for its design, so the clouds in the sky background texture works well to keep the site looking clean and uncluttered.

Rabuzin Fine Art

Lorena Orraca

This film director’s site uses an old paper texture for the background and old film strips to show featured work.

Lorena Orraca

Mongoldude

This frontend developer uses a few textures on his site – there is the sunburst texture behind the cartoon image and a woven texture as a background.

Mongoldude

Kikk Festival

This site promotes a digital festival that was held in 2012. They have used subtle shades of brown for a color scheme with a cloud texture and connected lines for the background with animated feathers floating down over it.

Kikk Festival

Stall & Dean

This sportswear supplier uses a vintage-style texture over its brown and cream color scheme. The company was established in 1898, which goes a long way to explaining the use of such old-style presentation.

Stall & Dean

Revelation Concept

This site uses a mesh texture over just about all of the elements on its site that give a slightly distressed effect.

Revelation Concept

Conclusion

So what is your verdict? Do textures still have a place in current web design? Do you think textures are being over-ridden by transparencies, blurred backgrounds and/or gradients? Please share your opinions and comments with us in the section below.

Advertisement