UX Articles

UI: Adding Subtle Textures for Depth

Jamie Holst

Co-Founder

Published Dec 6, 2011

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.

Jamie Holst

Co-Founder

Published Dec 6, 2011

Jamie is co-founder of Baymard and CTO. Jamie oversees all of Baymard's technical development and writes articles on general UX topics and on the intersection between technology & UX, like compatibility features, UI bugs, search logic, and how it impacts the end user experience.

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

Share:

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 60,000+ UX professionals and get a new UX article every week.

A screenshot of the UX article newsletter