UI: Adding Subtle Textures for Depth

More and more sites and applications are using subtle textures to give their design a more distinguished look.

The wise use of subtle textures for backgrounds and other elements can add a lot to a design, making it feel more real or physical. A solid color feels very flat in the digital world because it is completely clean, but the second you add a texture, it comes alive – the surface suddenly has depth.

Especially apps designed for touch devices seem to be adopting textures – and for a good reason: these apps tend to mimic the real world much more than desktop applications, and in the real world there’s textures everywhere.

The background on Facebook’s iOS “Log In” screen feels like a piece of cloth.

There’s many interesting things to note about this screen. First, the background uses a radial gradient combined with a speckle texture, making it feel like a piece of cloth that has been stretched across the screen. The radial gradient cleverly highlights the most important part of the screen – the “Log In” fields.

Interestingly, the cloth-like background is juxtaposed with a clean set of fields and “Log In” button, making them stand out as “perfect” and appealing options. Sure, the clever use of shadows and a high level of contrast are factors in making them stand out, but the fact that they are completely clean (despite shadows and gradients) makes them feel like more appealing options.

A Finder window in Mac OSX Lion features a subtle speckle texture for the control bar.

Apple too has been using a subtle speckle texture on top of the gradient as a background for Finder’s control bar. However, once again the controls and fields are kept clean.

These two examples would suggest that textures are more appropriate to use on backgrounds and not buttons or other controls, which should be appealing to interact with. Maybe this is just a coincidence. Maybe it is an emerging trend in the digital world. Who knows?

Somehow it just feels “right” when you look at it.

Authored by Jamie Holst on December 6, 2011

If you have any comments on this article you can leave them on LinkedIn

Check out Trent Walton’s blog where he creates a new texture for each blogpost. Beautiful although not always particularly subtle.

User Experience Research, Delivered Weekly

Join 37,000+ UX professionals and get a new UX article every week.

A screenshot of the UX article newsletter