Home

6. Color Gradations Add Appeal

Leave a comment

Color gradations can be better than solid colors for page or section backgrounds. Fading means the transition from a color to a lighter color or tint of the same color, or to a darker color or shade of the same color. (Tint: a color mixed with white in greater or lesser amounts.)(Shade: a color mixed with black in greater or lesser amounts.)

Tinting or shading a color gradient are the same concept, just a matter of direction. In one direction you’re shading the starting color darker, in the other direction you’re tinting the starting color lighter.

Blues and grays are the most common backgrounds to fade, although any color can be used. The background color must match the theme of the site, and follow Color Theory as described in Section 5.

Here’s two examples of fades, the first from white to light blue, the second from light gray to white.

Of course, fades don’t have to start or end in white. Fading from a light gray to a lighter gray is common and is a nice look. Fading from a blue to a lighter blue can also look elegant. There’s no hard and fast rule for when to fade and when not to fade; experimenting with different looks will help choose what looks best.

Here’s the same two swatches from above, but instead of white a lighter blue or lighter gray is used. This is a more subtle change, yet still gives a pleasant look and feel.

If the initial design for a UI results in it looking spartan, adding a fade to the background can give it some flair.

Another technique is fading from one color to another, known as a blend. Blending from a color to a gray gives a nice look, but care must be taken to match the tint or shade of the color to the proper tone of gray.

Green

This concept can be used when gray is part of the website theme, part of the look and feel of the site. Adding a gray blend when the gray is not otherwise utilized adds a random color into the site’s theme and can look jarring.

Blending from one color to another is tough to pull off. They can be great for certain websites, however for desktop apps this is way other the top. If you have a great sense of color and follow the Color Wheel accurately, you can achieve a nice look. It’s tough to pull off though, so if you’re just starting in app design, leave it alone.

Here’s a couple of examples where fades have been used to good effect on websites. Note that these are not apps, however they show the use of a faded background to make the page easier to read and add an aesthetic.

Advanced applications of the fade are demonstrated with these two images:

The sky background uses the fade principal to great effect, going from blue to white. The ocean image uses blue and a turquoise-blue, two different but closely related colors, fading from dark-to-light blue on top, then a transition with the beach and a very slight fade of the crystal clear water. Very eye catching, not boring, and can make a website pop.

Important Note: It’s very unusual for an app to use images for a background, as the use of an image is to capture interest and attention for a marketing purpose, to get the viewer to interact with the site.

An app typically requires the user to perform functions and you want to focus the user’s interest and attention on the actions to be performed. Using a simple color gradation adds an aesthetic without pulling attention away from the functional aspect of the app. These image examples are used to illustrate how color gradients are used for both apps and websites.

Here’s another color gradient with the ocean and sky, staying in the blue theme entirely. Both the sky and the water lighten as you move towards the center. This use of a color gradient in an image really focuses the viewer’s eye on the center of the page.

Ocean2

Applying the image version of the color gradient to a website, it really makes the site pop and focuses the viewer’s eye right where you want it.

PicLens

Notice that the background has a gray fade going on, while the image uses real-life elements of blue to white from left to right to lend dramatic effect with the powder (snow) indicating action and excitement, and the vivid blue sky, which has its own dark to light gradient going from top to bottom.

The image banner really works, and the subtle gray gradient in the background adds a pleasant element.

Wix.com has this website template ready for use. It uses color gradients and different shades of blue with the ocean to make the image interesting. It captures interest and certainly conveys an idea to the viewer! Notice that the insert is in a green, a cross between the green vegetation on the land and the blue of the water, without resorting to turquoise.

Wix

Somebody has been paying attention to Color Theory, keeping the website theme constant on the page. Not only does this showcase the color gradient, it’s an excellent example for Section 5 as well.

While the images are an advanced application of the use of color gradients, notice how the color gradient works in them, adding visual appeal for the viewer.

Advertisements

5. The Use of Color

Leave a comment

Companies often have a color associated with them. The company logo has a predominant color and this color is carried through their branding. Take the Green Bay Packers, the green and gold is nearly synonymous in the minds of football fans with The Pack. Their website uses the green and gold theme in the design of their website to good effect, with titles and fonts, highlights and backgrounds, adhering to the theme. The use of images that showcase the green and gold as well is a subtle but effective application of this principle.

Packers-a

Antivirus software apps follow the color theme of the company. Symantec and Norton products use gold and dark brown (or gold and black) in their website and in their app. Kaspersky uses green. Trend Micro augments this and uses red and white, with complementary colors to highlight.

Use colors that complement each other

If you have no sense of “color style,” use a color wheel to get complementary colors (ref: Color Theory)

Some people have no sense of color. You’ve seen them—images of guys who should let their wives choose their wardrobe spring readily to mind.

For the layman, there is a tool known as a “color wheel” that displays the spectrum of colors. Googling “color wheel” or “color theory” will bring up numerous references on how to use the color wheel to choose the correct that complement each other. Several references are listed at the end of this chapter and more can be easily found online.

The wheel on the left shows the 12 major colors, called hues. The wheel on the right shows the infinite gradations blending from color to color (hue to hue).

You can also have “flavors” of a color. Starting with the standard hues, going to lighter or darker colors is defined by the following:

  • A tint adds white to a color
  • A shade adds black to a color
  • A tone adds gray to a color

The wheel on the left shows the range of tints—amount of white—in a color, with gradations from pure white to the solid hue. The wheel on the right shows the twelve standard hues with the respective tints, shades and tones.

The Color Theory charts discussed in this write-up identify what combinations of colors can be used together. In addition, you can use tints, shades and tones of a hue with the pure hue with good effect.

Certain combinations of colors are pleasing to the eye. These combinations have been codified into rules, called relationships. These rules can be found by searching “Color Theory” and “Color Wheel.” Knowing and using these rules will yield color combinations that customers find pleasing. Combinations of colors that are different than the rules are jarring to the eye.

When you select a color and theme, follow the color wheel to select your complimentary colors.

Using colors in your app from the wrong combination(s) will produce a UI that, when viewed by customers, will not be accepted and even worse, rejected and not purchased or used.

Using colors with conflicting tints, shades or tones can also result in visual displeasure. For example, orange and blue are complementary, according to the chart. But a dark blue with a light orange isn’t quite as pleasing, or a dark orange with a light blue. When using tints, shades and tones, first match the colors according to Color Theory, and then use the same level of tint, shade or tone with all colors.

  • Seth Wilson has a couple of great charts on Color Theory. Google “Seth Wilson Color Theory” to find copies of his charts, as well as related references.
  • graf1x.com has interesting information on the history of the color wheel and sells posters.
  • inkfumes.blogspot.com also has information and a source for Color Theory posters as well.

The main point of this chapter is that COLOR is important, using color consistently throughout the app is important, and the various colors used need to be coordinated. Following Color Theory will help you coordinate your colors in a way that is pleasing.

This chapter is by no means a complete tutorial on Color Theory! It points you to Color Theory and emphasizes the importance of following it. It works.

©2017 Curt Larson. All Rights Reserved.