web app - Case studies on using gradients in a design

Are there any case studies on the use of gradients in a web design? I'm looking for answers similar to this answer about the usability of rounded corners.

Specifically, I'd like to know:

• Is there a difference in perception between using a gradient or not using one? If so, to what effect?


• What are the use cases where using gradients can help you achieve (or not achieve) your design goals?


• Anecdotally, it seems like there is a trend toward using more solid colors in design rather than a gradient. Would widespread use of subtle gradients signal an outdated design?

I realize that there is a certain degree of subjectivity in regards to a design element like gradients. Though I'm looking for some objective data on their use, please feel free to share your opinions as well.

Answer

Gradients are used to create a 2D or 3D lighting effect. They're often used in conjunction with drop shadows to create an impression of light. A typical iOS device home screen is covered with gradients and dropshadows which give a clear lighting effect.

Gradients are all about affordance and skeuomorphism; a previous answer of mine goes into some detail on the lighting aspect of this.

This post about Realism in UI Design makes lots of good points. A good summary:

The same applies to these toggles. Shadows and gradients help the user figure out what he’s looking at and how to interact with it. Adding too many details, however, ends up being confusing. The toggle switch is no longer just a toggle switch that is part of a user interface, it is clearly recognizable as a photograph of a specific toggle switch; it loses its meaning. It’s no longer a symbol, it has become a specific thing.

I think we're seeing a move away from gradients because of a larger reaction to a very pervasive skeuomorphism. Skeuomorphism is abundant in every Apple interface, and they're typically quite successful and aesthetically pleasing.

However, this is design, and skeumorphism is a bit of a fad. Google and Microsoft have taken significant steps away from skeumorphism resulting in largely flat colors and naturally digital designs in the Metro design language and the Android Design guidelines.

I don't think there's anything specifically bad (or good) about gradients, they're simply part of the what makes a design more skeuomorphic or more purely digital. As designs trend toward purely digital, gradients look less "natural" and go the wayside like reflections, gloss effects, ect.