: What makes gradients in graphic design look attractive and what's the best way to use them? There seems to be two schools of thought when it comes to the use of gradients in graphic design.

@Harper654

First of all: we use gradients because we can. It has become incredibly easy to do so in web the last few years. If you give people a hammer, they will hit things.

But we humans are pattern-finding machines. What we are really good at, is determining depth. What is in front of something else? What is moving? Is it a lion, a bee or an oak tree far away, or a tiny oak tree two inches from my nose?

We are incredible at these things. Creating artificial intelligence that can do this sort of processing is immensely complicated, we are still a long way off. There are simply too much insanely complex processing going on.

The interesting thing there is that gradients, hues and shadows are essential to this. Without going into the mechanics of vision, of image processing in the brain and cognition (how we interpret this input), there is a valid point using gradients. You can, quite literally, make things pop. You can use gradients to _subtly help and manipulate the user in determining what is the most important information.

The sorting of objects in depth is based on the millenia-old notion that light comes from above and not below. There have been some interesting experiments done here; how living creatures goes raving mad if only exposed to light from below. The world very quickly does not make sense (there was one experiment with chickens, but I cannot find it right now). The following image might just demonstrate that it is almost instantaneous that light from above = convex, light from below = concave.



An therefore there is a difference in distance and therefore something is closer, and therefore some things are more "important" than others. The shapes that are shades as "further away" also give an impression of something recessed, inaccessible.

So taking a look at buttons on the web and buttons in real life. The web "maps" the real world onto a digital one. In a way, since we lack a language for the virtual we impose what we know. There are pages, buttons, folders, tabs, menus, rooms etc etc. Hence, the idea of changing a state of something to another state, binary, becomes a "button", going from one URL to another means a new "page", and IRL buttons exist in 3D. So mimicking RL, "buttons" were (yes, were) made to look like 3D objects. If the light comes from above, the button is "convex", when you click it, it becomes concave.



If web buttons (or anything else for that matter) have the imaginary light source from the bottom, it is easier to create an uneasy feeling that something is wrong: you have increased visual distance to that object. Of course, do it as much as you want, as long as it is a conscious choice.

If you start to look for it, you will see that a good deal of sites mix the imaginary light sources in their use of gradiated elements. This can be very confusing and promote a sense that something is not quite right. But the effect of placing the light source is very, very important.

So, why do we use gradients?

Because we can. Because they can actually help.

Lots, maybe most, gradients are pointless, annoying, counterproductive, or just simply unnecessary. I would urge restraint; much of it is awful. But they can be useful and good, used well.

Much web design these days go towards flat. I think that might be a process of the web growing up, in a way. We have all learned the point and principle of a virtual button, tab, folder, page etc. We get it. The 3D buttons helped, as it mimicked real life. We do not need that anymore. Even my very old dad got it now, so we do not have to mimic - the virtual can develop in ways better suited than to pretend to be in the physical world.

Further reading: the functional art

Vote Up Vote Down

@Turnbaugh909

Interesting question.

You're right in saying that gradients are often distracting, or worse. Sometimes they're downright tacky or assist in creating pain in the viewer.

Designing to the gradient is the best way to use them, and therefore probably the proper way to do it.

So if there's certain colours you want/need to communicate through a message then starting with that gradient as a core component of the design forces you to think what and how to design everything else that needs be communicated with the "correct" use of the gradient.

iOS 7 so heavily uses and is designed around the idea of gradients as a part of communication that it's probably the best place to start examining "correct" use of gradients in a design language.

Personally I think this is one of the best uses of gradient I've seen:
cdn.iphonehacks.com/wp-content/uploads/2013/06/ios-7-announcement.jpg
The stark contrast between context (the white 'button') and the thin font of the centred 7 is given so much more life and vitality (by virtue of the gradient's colours and range) than a monotone would be that it's utterly communicative and not at all distracting.

The gradient (in this example) imbues the 7 with a joy, energy and life that's utterly indicative of what Apple is, how they like to be perceived and what they consider iOS and themselves to be that it's almost hard to think of this icon without the gradient.

And I think the gradient was a consideration before the design because it had previously been determined that gradients would be used to differentiate all manner of icons and act as their context on iOS 7. See all iOS preinstalled apps to get this point.

But who knows. Chicken and the egg.

Vote Up Vote Down

@Rivera951

I haven't heard either of them. And I think the reason for that is that you are targeting it from the angle if a gradient can be visually pleasing or not. And it goes for most design elements: of course, but it depends on how you use it. You can't rate the aesthetic appeal of an element alone. That's like rating the letter b on it's looks and then deciding if you are going to use it.

Design elements are supposed to underline a bigger concept or message. Not stand for themselves. So if your design would profit from a gradient, use one.

As to your questions about usage, the same applies. Why use it in a chart unless it can help translate information. As a decorative element, it will probably always be in the way.

Vote Up Vote Down