Oh this is awesome. It's the last thing I need to completely eliminate images from my website.
All the rest is cross-browser gradient and rounded corner code from http://css3please.com, and I'm debating whether to vectorize the picture of me via raphael.js or do an inline data-URL image in my CSS (it might be considered cheating).
I don't get it either. Your demo link just leads to a page with some text boxes on it. I tried it in Firefox and Safari and can't see anything that looks "noisy". I tried changing some of the parameters but that just crashed Firefox.
Ha, I'm surprised how simple the algorithm to generate random noise is. This is really cool though its applications may not be too widespread. I find with solid colours elements that slight noise can give it more of a body.
Noise is there to make the design easier on the eye. It simply works better than a solid fill in a lot of situations as it improves visual quality of the design. It is more natural if you will, similarly to how rounded corners look subjectively better than the straight ones. The noise was not extensively used before because it does not compress well, and spending 20KB on a background tile was just too much. Now it is lesser of an issue, so the noisy fill is seeing a wider adoption.
In other words, if it were just a decoration for the sake of decoration, then - yes, you would've been right, but since it carries a useful function, then it is not a cliche.
No, when something is overused, it actually does become a cliche.
Perhaps noise can improve the visual quality of a design when it's used subtly.
However, I'm increasingly seeing it (over) used in a conspicuous way, and I think it's become a trend. In some cases, I think there's an element of 'lets jump on the bandwagon'.
I could be mistaken, but I think he means that if you browse through some of the submitted designs on dribbble, you can see a clear trend of noise being added into many designs these days. Not dribbble's design itself (although, it DOES use noise in its backgrounds)
I think dribbble highlighted the use of noise to a wider group of people. I agree it can add to a design - but I think their use of it is largely stylistic.
If you look back at trends in web design over the past 10-20 years, you'll notice the progression of different styles. Heck, go back to circa-2004 "Web 2.0" designs, work your way forward, and you'll see that web design trends change every year.
In another few years, noise will be out, and something else will be "in".
I agree - noise will reach saturation point (no pun intended) .. and will eventually be forgotten about. When it's used properly, you don't notice it.
I sometimes wonder why we actually need trends. It's an interesting subject - in a way trends are a just part of the commodification of design. They provide a way to transfer values (through loose connotations) to an audience .. I think there's something quite cheap (throwaway) about the concept. Without trends, progress is less able to drive commercialisation and the need to update is less essential.
Also, a bit of noise helps reduce banding in gradients.
Actually, in Firefox if you use a CSS gradient (ie -moz-linear-gradient) and look carefully.. you'll notice Firefox automatically adds noise/dithering to make it look smoother.
I think what's happening is that browser technology is finally catching up with typographic best practices. That's not to say there aren't design trends that turn into cliches, or that practices applied naively don't look clumsy; but this seems more to me like a small but important step on the road to a mature web design codex.
Using noise is a way of adding another aspect of realism to objects. Normally you can prepare images ahead of time and use those in your css to create this effect, but for some procedurally generated things images can't always be used. That's where something like this would come into play. While the use case for this over precomputed images is quite small, it's nice nonetheless to have.
Aside from sites styles though, it's also a fully functional noise implementation - which could be ported to web based photo/graphics editors.
All the rest is cross-browser gradient and rounded corner code from http://css3please.com, and I'm debating whether to vectorize the picture of me via raphael.js or do an inline data-URL image in my CSS (it might be considered cheating).