Gradients is perhaps part of what defines “web 2.0″, or rather, the current trends in web design as per the last few years. The problem that I’ve seen thus far is the abuse of gradients – while it’s fine to use them (I, after all, use gradients on my own site design), it’s not so fine to over use them, or to use them improperly.

Gradients can create a very visually appealing site which pulls the audience in – or they can be overly distracting and cliche’d. So let’s take a look at a few sites which use such gradients.

In Backgrounds

IndustriJob.SE

I came across this site, and was immediately drawn into it. With the subtle use of a gradient on the navigation, and the very textured gradient on the background, I definitely liked the way that gradients were used in this site. Not only is the background gradient very appealing to the eye, but it also differentiates between the main content and the footer. The only thing I noticed which bothered me was the current page was tilted slightly on the navigation and didn’t align quite right, and the lack of use on hover – maybe that’s me being pick, but I did feel that a different gradient for the hover property would have accented quite well. This is just my opinion, nevertheless.

Apartmente Unirea.RO

Here again, the gradients are subtle on the background of the content, and we see a light effect on the body background. I chose this one because I liked the subtlety of the gradient on the background – it wasn’t very loud, but on the other hand, it added a very nice accent to the content area by its lack of boldness. We see another gradient on the background of the navigation as a hover effect; while I will admit that I’m not as much a fan of this one because it feels more bold to me than it should, it works.

In Sum

I’d say that the background gradients I’ve looked at thus far are mostly subtle, or textured and interesting. They do not distract from the content, but they create an additional visual element which is enriching to the site’s experience, and at the same time accent the rest of the elements on the page nicely – whether pulling focus to the logo and the navigation, or adding a subtle touch of sophistication to the content as a whole.

In Navigation

Grebban.Com

The gradient on this site’s navigation is a very subtle touch at just the right amount. It is not overwhelming, and it allows the user to tell which page they are on by the darker gradient on the current page’s link. It is designed more like a shadow, giving the page a feeling of volume and depth, and making the navigation seem more like “buttons.” Further, the gradient (or shadow) below the navigation gives the page a feeling of layers; whereas the navigation is a different color than the rest of the main page, the subtle shadow makes it flow into the next “layer” of the page – the content.

The Highlands

Here again, subtlety, and yet, not so much. It’s not quite a “bold” gradient on this site’s navigation, but a very elegant one. It creates a proper boundary between the header, and the content of the page.

In Sum

So here again, we see subtlety, and a visual differentiation between the navigation and other elements.

So, the conclusion to be drawn from the analysis of these sites is that the majority of gradients which work give the subtle feeling of elegance and create a visual differentiation between two elements. How could this possibly go wrong?

The problem is that they become unimaginative and overused. Lately I’ve seen every navigation use gradients, and every background use one. They create very beautiful effects, but it seems that some people stick with what is “safe” rather than trying something different – whether it is trying a different type of gradient for a certain element, or even experimenting to implement the gradient differently – for example, use a linear gradient, but put it at an angle rather than strictly vertical.

There are many ways in which we can create a subtle elegance or a differentiation between two different elements. One is color, and the other is very simple: everything else. Anything else. Part of growing as a person is to always take on new challenges, and thus is the life of a designer: to always take a new approach. Thomas Edison created many of his works by taking a new approach, as did many other great creators; independent thinking is the charisma behind innovation.

Granted, I’m not saying to abolish the use of gradients. They can be used very effectively to create very beautiful designs that give a very unique user experience, but the problem is that many designs have begun to rely upon gradients as the sole part of the experience they create. I feel that we can do better as a whole just by challenging ourselves. Try something new – a radial gradient instead of a linear gradient, or make an entire design without any gradients whatsoever. Who knows what you might come up with?