1

There seems to be two schools of thought when it comes to the use of gradients in graphic design.

One argument seems to be that it is not a very clean or appealing design, not to mention that it is more trouble than it is worth, because it needs to work on both dark and light backgrounds or a greater range of colours, and that it is also less flexible because of the constraints imposed on a gradient background when you add other text or graphic elements on top of it. Then there is another group of people that believe in the aesthetic appeal of using gradients rather than having sharp contrasts in colours.

I am just wondering what the visual or psychological reason that gives colour gradients the perceived 'prettiness'. Personally I find it difficult to deal with and even distracting in charts and graphs, so when and where should it actually be used for the optimal design benefit?

I would like to know if there is an actual visual design principle or psychological basis for the use of gradients in graphical design, or if it is one of those things that people have made assumptions about its use without the proper application of good design principles.

3
  • 2
    This is too broad to answer other than to say use them when they make sense to use them. In terms of use with in a chart, that's a very specific use, and is likely going to often be seen as chartjunk: en.wikipedia.org/wiki/Chartjunk
    – DA01
    May 13, 2014 at 6:56
  • 1
    You imply in your question that gradients are attractive but that seems a generalization to say the least.
    – tim human
    May 13, 2014 at 11:19
  • I believe that's the general reason people cite for using them, that they are attractive to look at (at least from my experience). As with any graphic design element, I believe there is probably a suitable application for it based on a visual or graphic design principle. May 13, 2014 at 23:08

3 Answers 3

4

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.

2
  • So can you provide an example where you've seen gradients used well in a graphic element? I just seem to struggle to find one where there is a solid design principle behind its usage. May 13, 2014 at 23:35
  • I have used gradients to show a buttons "curvature", so to say. Thats what many UI elements do to give a look of a real button (where you can feel this curvature with your fingers). You can simply use gradients to show a transition from one value to another. But again, I have never looked for a reason to use a gradient, but the other way around. "How can I show curvature or transition? With a gradient, among other techniques."
    – KMSTR
    May 14, 2014 at 7:40
3

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.

enter image description here

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.

enter image description here

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

2
  • Would you suggest that the trend towards a more 'flat' UI design is a reflection that there has been too much excessive colours/effects in the current crop of UI designs? It is a good thing because gradients will more likely to be used when it is suitable. May 15, 2014 at 22:51
  • Just a thought I have. I do think that when new tech turns up, it takes a while for us to learn interfaces. When the use and possibilities are clearly understood, the interfaces becomes less messy. And at some point we do not need everything spelled out. Look at the evolution of VCR - DVD - TV - stereo remotes; radios, tv and all kinds of physical buttons.
    – benteh
    May 17, 2014 at 21:03
1

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:

http://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.

10
  • Having lived through the 70s, when I look at iphone design, all I can think of is "Xanadu" the movie. Alternatively, google "80s aerobics" (safesearch enabled)
    – horatio
    May 13, 2014 at 16:15
  • As a transition piece, from teaching through design (skeuomorphism) to utility of design, there's much to dislike about iOS 7 because it's a work in progress. But the UIKit Dynamics are fantastic. The processors in the 5S and new iPads have enough in reserve to exploit the depth facilities, but the best APIs are still private for depth effects creation. Consequently I think we're going to see some more big shifts in design language with iOS 8, and much increased freedom/access to/with aesthetic & communicative graphical frameworks of the APIs. And perhaps even more disco futurism ;)
    – Confused
    May 13, 2014 at 16:28
  • I can probably see gradients being used as an aesthetic/emotional enhancement to a design, but can't really see it as adding to the information/content (or at least I can't find a good example). Would you tend to agree with this? May 13, 2014 at 23:38
  • Take a look at how the inbuilt app types of iOS 7 are differentiated by their gradients. You could also do this with solid colours, of course, but it's gradients that are the first indicator of an app's type. That's 1 example.
    – Confused
    May 14, 2014 at 1:33
  • 2. Gradient direction can be used to indicate... direction.
    – Confused
    May 14, 2014 at 1:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.