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.

Post a comment or Share:

User experience research, delivered twice a month

Join 18,000+ readers and get Baymard’s research articles by RSS feed or e-mail:

Due to spam, you need JavaScript to do that.

(1-click unsubscribe at any time)

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

More E-Commerce Research

Free Research Content:

Products & Services:

Comments (8 so far)

Toro Loco Design December 9, 2011

Interesting article and the point you try to make is valid, but I feel like I have to correct you. The Facebook button as well as the Apple buttons, both make heavy use of gradients. This is not a problem with your statement in the case of Facebook, but the Apple buttons don’t really stand out at all beacuse of their clean looks, but because of their dark border: http://img443.imageshack.us/img443/5649/applejic.jpg

Due to spam, you need JavaScript to do that.

Jacques December 9, 2011

this is very true.

Due to spam, you need JavaScript to do that.

Andrew December 9, 2011

Or you can argue (as the article does, though not specifically), that the dark outline is part of the “clean look” and thus aids in creating the contrast.

I think you’re confusing “standing out” as question of pure contrast, as in things that are lighter (the facebook buttons) stand out against things that are darker, or things that are heavily outlined (the osx buttons) stand out against things that are lighter. This is a more nuanced way of considering contrast…its kind of psychological instead of physiological.

Due to spam, you need JavaScript to do that.

Jamie, Baymard Institute December 9, 2011

Thanks for the comments. It’s great feedback from all sides.

Ultimately, the sentence isn’t totally clear. Andrew’s comment explains it well. The main argument was that it was the cleanliness of the buttons that made them appealing, whereas “the clever use of” contrast and shadows (by shadow I guess I technically mean border) made them stand out.

It’s of course true that it’s only in the Facebook example that the contrast argument is valid.

Thanks for the comments.

Due to spam, you need JavaScript to do that.

Nils Ververs Lübke December 9, 2011

Fine observations, if a bit dated. What you’re talking about is simply the web 2.0 visual trend, which isn’t all that new :)

Due to spam, you need JavaScript to do that.

Jamie Hunter December 9, 2011

This look can also be a by-product of simply dithering a gradient to avoid banding when two very similar colours are used. Just an additional thought…

Due to spam, you need JavaScript to do that.

Tev Kaber December 10, 2011

The site subtlepatterns.com is great for giving backgrounds texture. I converted most of the textures from that site into 4 alpha-channel versions of each texture, to overlay them on different colors. Here’s my (image-heavy) texture/color explorer: http://jquerydoodles.com/texture2/

Due to spam, you need JavaScript to do that.

Pritesh Desai June 28, 2013

You are right. I’ve thought about the role of noise in design.
Imagine keeping a solid color as your background wallpaper – it’d be boring. However many people have a solid color background, painted on their home walls. There it doesn’t look unappealing. The reason is that in real life there is a constant noise, or you can call it texture. Using texture in digital background does make it look more lively. Other wise it looks like plastic.

Due to spam, you need JavaScript to do that.

Post a comment!

Due to spam, you need JavaScript to do that.