Color scheme Robert HESS
September 2000
In my previous articles, I discussed the importance of using color in the web page. According to some questions and requests I have, some people want to know how to use this information to implement color matching schemes during the site design. So this month I will introduce the color scheme and explain how to organize some content to help your web page maximize the current existing color.
In order to facilitate this discussion, we must first provide a visual template for comparing different color schemes. Although the way the web page is tissue, I also selected a relatively standard layout, where the components included are sufficient to form some interesting and useful color combinations.
Our imaginary web pages are composed of the following components:
Web Title Web Page Content Navigation Menu Bar Leaders
When you identify the color method that you might use in this similar page page, you must first consider the different importance of each part. Then use some of my information provided in the previous article, try to determine a color scheme, which correctly emphasizes the part of the web page.
Assume that users are likely to be most interested in the content of the webpage, we want to make this part easily read as much as possible. May be the smallest interest in footage information. The navigation menu is important, but it is only used when the user wants to clearly understand how to go to the site. Web title should be slightly separated from the web, as a "Your Current location" sign. According to these principles, we tried to design a grayscale color scheme for this imperative site.
Click here to view larger images (6.23K)
Web content: As the most important part, this part is the strongest. This means that the background should be very bright, the text is very dark, the contrast is high. The most apparent option here is black in white.
Web Title: This area should also have a high contrast so that users can see his location at this site. The title is usually different "style" with other parts of the page, which can be combined with font or color combination with web content. To choose a simple and easy way, you can use the intrinsicity of the web content; although the effect is not so good, in this example, the white word is undoubtedly a fairly perfect choice.
Navigation menu: The menu itself should not be too conspicuous. Although it is important for users, it should not compete with web content. Compared with the color considerations for the background of the web content background, I am always dark for menu background; I will rely on higher color contrast, more strong graphic elements or unique fonts will be different from the contents and menus. The purpose of the purpose is separated. As for this example, we chose to set black words on a gray background. Copyright information in the menu area will not be clicked by the text, and we do not need the same level visibility. We set it to dark gray.
Side bar: Although not all the webpages use the side bar, it is not a useful way to display additional information. It should be separated from the content of the web page, and it is also necessary to read it. This means that it should also use bright background, dark text, and sufficient (and suitable) contrast to readily read. If you don't stick to the grayscale scheme, you can choose very bright blue or yellow; you can also choose silver.
Footer: The least important this item is not to win the owner. To select contrast to medium colors, do you want to be pleasing to you. Anything on the web page should not cause the reader to have difficulties during reading. Based on this, we choose Silver bottom gray.
Look, this is not difficult, is it?
Solution start
I got my own color schemes to be directly used. Purchase first to choose a set of colors that are suitable for the entire design. You can select color from the company logo or some important graph to display, or you may just think that some colors are very fresh or brighter, so they choose them.
To raise an example that can quickly explain the problem, I made a color scheme representing the fall. First of all, I found a set of colors available. This process is very simple: find a picture with autumn leaves on a site, then drag it to an image editing tool, and select a representative color. (I have made a certain degree of change in this choice to use the color in palette in the browser.) Next, I use these colors to test several different ways to merge with the entire page layout until I The effect that the effect is attractive.
Click here to view larger images (6.33K)
I chose to use a darker color using the header area (# cc3333) and the bottom footer area (# cc6633). This creates a border of a more obvious placement page. I use ordinary gold for the navigation menu (# ffc00), and then use the dark color of the web title background for the menu text, which is the same as the title text in the web content area.
I like to choose the main content of the web page. I have a simple way, this is the way, this is this. Finally, I chose interesting yellow shadows (# fff00) for the sidebar background, and select the dark color of the header text.
Set the background of the navigation menu to a more gentle color to prevent it from conflicting with the main content area and transfer the user's attention. Perhaps the color of the sidebar is slightly strong. If you have to use too large sidebers, you may need to make the color of this zone greatly gently, even if this must be used with 256 color modes, it is necessary to display the color.
In the last month's article, I provided an interactive example that brought the same image with several different color schemes. For this visual template, we also use such color schemes. In some cases, I will enhance or reduce the color saturation to help achieve good contrast - but basically use the original selected color:
Click Each image to see a larger version.
Simulated color cold warm color single blue
You can see that I use the color background for the "Simulation" program, even in this small thumbnail, you can see the fundamental changes that occur from the hue of the entire page. Sometimes doing this is good, but it is not often able to work.
Now, just for entertainment, take a look at the effect of the color scheme used in our visual template to simulate some actual sites in the World Wide Web.
Click Each image to see a larger version.
Colors used on MSN Communities on MSDN Online Amazon.com The color c | NET News
The typographic version of the MSN Communities (English) site is almost our rigorous control of the template, our model is very close to the actual thing. You can notice that this site is used by a monochrome color scheme.
MSDN Online (English) site is not so close. Graphic elements play a certain role in the MSDN Online site, and our fast-completed template does not allow this type of element to be added. You can see the role of the basic color scheme. As long as there is a basic solution, you can design a graphic supporting the webpage while ensuring that it will not conflict with the basic color already used.
Amazon.com (English) is quite close to our template. However, don't forget, the site is actually a collection of a large site; although they need to follow the close-inprints, each of them still requires some unique visual clues. The main way of achieving this effect is: Change the color used in my so-called title bar. In this example, I showed the color scheme used by their "Book" site. If your site has this type of request, make sure you can modify one or two colors in the entire scenario in order to distinguish every zone.
Finally, the template of the color of the C | NET News site (English) does not match the layout of their site, but it shows the mutual cooperation between all colors. I can also imagine the perfect fit of the same color scheme with a famous film flushing the company's web page. You know which company I talk about, this shows important information that the color can carry. Tools with help
Seeing that I am doing this person, I also prepared a DHTML-based tool (English) to help you test your color scheme. It can be used in both Internet Explorer 4.x or Internet Explorer 5.x.
Selecting colors outside blue and does not cultivate the audience confidence in the information you provide. You need to take time to consider the layout and design of the web, and the correct choice of color is just one aspect of this work. I hope that the information provided here helps you apply some of these concepts to your design.
