- Color Aesthetics
- Choosing Color Themes
- Applying Color Relationships to Web Design
- Color Gallery
- Typography Aesthetics
- Type 101
- Verdana & Georgia
- Font Size Differences Between Macs & PCs
- Fonts for Delivery as Web Graphics
- Basic Styles of Typefaces
- What Is a Font Family?
- Aliasing or Anti-Aliasing
- Body Copy
- Using Fireworks for Type Design
- HTML for Placing Text Graphics
- What About Flash?
- Aesthetics of Layout
- The Aesthetics of Animation
This chapter is from the book
This chapter is from the book
This chapter is from the book
Applying Color Relationships to Web Design
Perhaps you can impress your clients or colleagues by knowing the difference between a complementary color and a tertiary color, but unless you can put that knowledge to dynamic use on your own site, it's not going to result in practical knowledge. The color relationship terms that were just established all have to do with choosing hues. But what about saturation and value? They are equally as important as hue, if not more so in most cases!
)
Figure 2.14 In this horrible example, the color scheme is analogous,
using blue, red, and magenta hues. The readability is just plain horrible, if
not impossible.
)
Figure 2.15 This better example uses the same analogous color scheme
of blue, red, and magenta, but it also uses varied values and saturations. What
a difference! It is not enough to choose a type of color palette; you must also
learn to balance values and saturation of color at the same time for readable
color relationships.
){kind=small}
Figure 2.16 Looking at the horrible color combination, you'll
notice that all the colors are fully saturated and close in value.
){kind=small}
Figure 2.17 Looking at the better color combination, you'll
notice that there is variety in saturation and value.
A great exercise to force yourself to think in these terms is to previsualize your web site in Photoshop, as I have, using layers. Try filling the layers with shades of gray, instead of color, to make the information you want to "pop" work correctly. After you've designed the page using grays, replace the grays with colors. You'll be amazed at how effective this is as a learning exercise.
)
Figure 2.18 By designing first in grayscale, you can train yourself
to think of colors as values as well as hues.
)
Figure 2.19 Hues have replaced grays, and I'm getting the exact
read I want with my colors.
COLOR HARMONY PHOTOSHOP PLUG-IN
A remarkable Photoshop plug-in that came to my attention and relates to this subject is called Hot Door Harmony. You can download a trial version from http://www.hotdoor.com. At the time this chapter was written, the product was Mac-only, but a Windows version is on the way.
Hot Door Harmony lets you select colors through harmonic relationships. The program shows you color selections within the browser-safe spectrum. You can increase the Tint (lighten) or Tone (darken) settings to access different values, and you can copy the hexadecimal code for any color. I highly recommend that you download this tool for a test spin.
)
Figure 2.20 Hot Door Harmony is easy to use. Just click on which type
of color scheme you want (for example, analogous) and then spin the ball.
If you understand the balance between hue, value, and saturation, you can force the read of your image to highlight what's important and subdue what isn't. It's quite empowering to grasp this concept. Applying it to your designs puts you in control of your color, so it will no longer be left to chance.
){kind=small}
Figure 2.21){kind=small}
Figure 2.22){kind=small}
Figure 2.23){kind=small}
Figure 2.24){kind=small}
Figure 2.25){kind=small}
Figure 2.26Readability
Making a web page read with color the way you want is the key to effective communication. You want to draw your end user to the areas of your site that are most important, and you can do that in a variety of ways. Let's look at some examples of using color as a device for creating visual importance or hierarchy.
)
Figure 2.27 If I want my logo to be the most important element of
this page, I can make it pop with color. If my navigation element is more
important, I can choose to make that pop instead.
A very important exercise that you should try before you develop your opening page is to identify what the first, second, third, and fourth reads should be. Armed with a specific order of importance, you should be able to use many of the principles covered in this chapter to achieve your communication goals using color.