What effect do gradient fills have on the eye?

Question

There are many baseline rules in web design (and design in general) around how the use of color, shape, line-quality, and font. These rules typically have some grounding in the way the brain perceives these things in relation to each other.

Can anyone point me to a good resource explaining how to use gradient fills (linear and radial)? How they affect the eye, contrast with overlaid fonts, affect the perception of color, dominance, etc?

Resources don't need to be targeted at web-design, as it probably applies to any screen-based graphical design, if not print design as well.

Answer 1

When it comes to gradients I know there are several opinions on this, but in my opinion gradients are best used when they provide depth. A gradient should never take away from a design or distract from the message of the design. In most instances they are being used to mimic a light source in either radial or linear format. Radial provides the best look for more of a spot and can be used to draw attention to a specific area of your application or design.

The best applications come when used in a subtle way to draw attention or provide depth and texture to a design. They are there to make objects or backgrounds seem more realistic as it pertains to light.

Here's a link to a site that has some pics of good gradient use. While i don't like the design of the site itself, it shows some good uses. - http://creativecurio.com/2009/06/taking-design-from-good-to-great-with-gradients/

Answer 2

Gradients, along with adding depth and light realism elements, add an element of directional control. If in a radial gradient situation, where the color goes from white on the perimeter to black in the center, your eye is guided most heavily to the center or to the most contrasting color.

As much as gradients can contribute to directional control, they can distract if abundantly used. Subtle use of gradients, almost barely noticeable usage, give the strongest output in my opinion.

Its a coloring method, not something to rely on too heavily. Best use of subtle gradients I think would be apple, With going from #ffffff (white) to #e0e0e0 (Very light grey).

http://apple.com