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 16,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.

All Research Topics

Toro Loco Design December 9, 2011 Reply to this comment

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

Jacques December 9, 2011 Reply to this comment

this is very true.

Andrew December 9, 2011 Reply to this comment

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.

Jamie, Baymard Institute December 9, 2011 Reply to this comment

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.

Nils Ververs Lübke December 9, 2011 Reply to this comment

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 :)

Jamie Hunter December 9, 2011 Reply to this comment

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…

Tev Kaber December 10, 2011 Reply to this comment

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/

Pritesh Desai June 28, 2013 Reply to this comment

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.

Post a comment!

Close overlay