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.
User experience research, delivered twice a month
Join 25,000+ readers and get Baymard’s research articles by RSS feed or
Topics include user experience, web design, and e-commerce
Articles are always delivered ad-free and in their full length
1-click unsubscribe at any time
Related Content
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:
- Popular Articles · a listing of our most popular research-based articles on e-commerce UX
- UX Benchmark · benchmark with case studies of 93 major e-commerce sites ranked by e-commerce UX performance
- Page Designs · navigate 8,400+ manually annotated full-page screenshots categorized by page type
Products & Services:
- Baymard Premium · full access to all 582 research-based design guidelines, UX case studies, page designs, and review tool ($720-$3,000 / year, based on plan)
- UX Audit · get an in-depth analysis of your site’s UX, conducted by a Baymard researcher ($1,900-$9,700 based on scope)
Comments
© 2021 Baymard Institute US: +1 (315) 216-7151 EU: +45 3696 9567 info@baymard.com
Toro Loco DesignDecember 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
JacquesDecember 9, 2011
this is very true.
AndrewDecember 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.
Jamie, Baymard InstituteDecember 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.
Nils Ververs LübkeDecember 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 :)
Jamie HunterDecember 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…
Tev KaberDecember 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/
Pritesh DesaiJune 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.