HN Explorer

Ask HN: why do Twitter and Youtube use mottled/noisy background images?

3 points by dbbolton ↗ HN
I recently noticed a trend of websites using slightly mottled patterns for their backgrounds. Off the top of my head, Twitter's menubar comes to mind, as well as Youtube's whole background. I just noticed that Firefox has used a similar pattern on its "speed dial" startup page in version 13. To make sure my eyes weren't playing tricks on me, I opened up the image files in the GIMP, zoomed in, and used a color picker. Sure enough, there is a somewhat random color variation throughout the patterns.

So the question is, why not use smooth backgrounds and gradients? Is there some sort of aesthetic advantage to the noise?

My dad, who worked in the automotive business, told me that the reason car manufactures put tiny swatches of many different colors on the upholstery of the seats is that it has the unexpected effect of being able to match many different exterior colors. So, I'm wondering if there is a similar principle at play here.

7 comments

[ 2.3 ms ] story [ 28.0 ms ] thread
creamyhorror
I wonder the same thing (I didn't even notice the Firefox background). When Youtube changed its background to mottled it was a bit surprising. Does the texture give a better experience?

Interesting point about upholstery colouring, though I doubt it's the case for these web textures. They're really too subtle to have a strong impact on overall colour balance and matching (IMO).

aquarin
I believe that in this way backgrounds look more like natural surface, where color is not constant but have some variation.
kayasuma
overall, textures are much in use on the web nowadays. For once, because it gives more visual information to the website, it makes it richer visually. On the other hand, on the youtube case at least, it makes it easier on the eyes. I believe that if you use a bit of texture, it won't be such a strong colored element and will make the rest of the content blend better on top of the background.
[deleted]
(comment deleted)
mrose
The grainy backgrounds are a subtle visual cue, aiding the user in focusing on your foreground elements (just like in real life when your eyes focus on something, the background is blurred). In my experience, this is particularly helpful in increasing engagement with media elements.
malandrew
The real world has texture and is most familiar and comfortable. The perfectly smooth shapes and surfaces created by not defining any texture are unnatural and elicit psychological uneasiness (cognitive dissonance) in the viewer..