Accordance Between Harmony Theory and Color Symbolism

A designer could offer additional services: That is design by color associations. Color associations have long been established in the marketing sector. When designing such a design for a customer, it is part of the professional procedure to consistently use these associated colors in order to actually achieve the desired associative effect. This is often not easy to accomplish in practice, particularly not with many colors. When the colors are badly arranged, the design may seem disorderly or far too multicolored.

Integration of the Associated Colors into a Design

Imagine the following situation: We want to make a web site whose colors are to convey the association linked with "trust". According to the diagram it is the colors blue, green, white, gold and yellow. This means that trust is most strongly linked with blue, secondly with green, thirdly with white and so on. We might now think of leaving out the last one or two interactive colors. Perhaps we will achieve the desired effect with the combination blue/green/white as well?
 
A look at the diagram for blue gives us the answer: The combination blue/green/white is also linked with width, détente and stillness; and with all three terms, these are the first-mentioned colors:

Trust
Width
Détente
Stillness

So the other interactive colors are very decisive, because they give a more detailed definition of the respective association. For that reason the interactive colors must not be left out. And we should therefore not try to find out which colors could be neglected. We should rather find an appropriate way of integrating all given colors without making the web site look too multicolored and jumbled.
 
Here we can make use of a fact that cannot be taken seriously enough as regards design and layout: Plain colors do not exist in reality! It is always an object that has a color. On print media or web sites we now find something completely unnatural: There we find nonrepresentational surfaces that serve no other purpose than to mark off an area. This area might be a frame, a reference list or a text field. When looking at these media, we do not see a tangible blue object, but only a blue surface. This "artificial surface" serves to divide and mark off areas on the page, and thus bring about clearness and regularity. Clearness is a very essential aspect for the design of web sites. Colored areas can help to bring clearness to a web site by dividing it and organizing it properly.
 
It would be wrong to try and spread out all chosen colors over these "artificial surfaces", just to bring these colors in. The clearness of a web site takes absolute priority over all other aspects, that is priority over color choice or design or whatsoever. We must not make any concessions in this regard, just because there are still colors left that have to be distributed. Since the actual purpose of a web site - namely to convey information to the surfer - cannot be fulfilled, if the surfer cannot get along and finally leaves the site.
 
That's why the first layout, that is the arrangement of texts, objects and colors, primarily has to be purpose-oriented. And the most relevant purpose is clearness. In the beginning, our product is a page that is only made up of these "artificial surfaces", of the arrangement of texts, objects and colors. And after that comes the design of the web site. Even the design should not be determined by the number of colors, but exclusively by the ideas of the designer.
 
Example: We assume that the colors blue and gold have been used for the "artificial surfaces" and the design of a web site. Blue and gold are very suitable for this because they form an angular contrast. White can always be added because it does not influence the angular harmony. Lastly, the colors yellow and green are still remaining. Next we try to accomplish that the desired association becomes effective by integrating yellow and green into the web site. And there is only one single way of integrating these colors into the web site: They will not be spread out over the web site, but they will be placed within the components of the page. These components might be a button, a line, a logo, an illustration or a photo. The onlooker perceives this component a such and identifies it as an "integral whole".

• Example:
  Extracts of the blue-diagram have been inserted at the beginning of this page. The additional colors placed within this graphic are not perceived as disturbing because the graphic represents an integral whole. The graphic also delimits these colors. So neither clearness nor design are affected negatively. The same applies to all other graphics in this tutorial. All colors and shapes are always situated within these components. (If there is only a weak contrast between background and component, it is advisable to delimit this component with a frame in order to emphasize the integral whole. Examples for such delimitations can be found in this tutorial, i.e. whenever we have a component with white surface. The text fields are also delimited and emphasized by means of a frame.)
   
• Example:
  The remaining colors could, for example, be worked in into a portrait. A portrait is understood as an integral whole, no matter which colors have been used. So this portrait could show a woman wearing a blue blouse, a gold watch, a gold necklace and a yellow hair ribbon; and if this portrait furthermore shows a green meadow as background, we would have integrated all associated colors.

These examples demonstrate how easy it is to integrate several colors without making the general impression of the site look too disorderly or too multicolored and without affecting the design negatively. The associated colors or parts of the associated colors will be integrated within the components of the web site and thus are "encapsulated", so to speak. Since the "artificial surfaces" have not been changed, structure and design of the page have been preserved. After all, the colors are integrated now, so that the web site can unfold the desired associative effect.
These "artificial surfaces", which are to bring clearness to the web site, should not be made conditional on the number of colors to be used (white text field, blue frame, green buttons, yellow mouseover effects and golden dividing lines). Such a web site might possibly look good, but this would be pure chance. If we merely had two more colors, then we would have a red heading, a violet frame and so forth.
 
Graphic or photographic components serve very well to include the associated colors or parts of them, especially when we have to integrate a great variety of colors. Photographic components are particularly suitable because we can kill two birds with one stone here: A photographic component attaches an activating stimulus to the web site. Nothing else is more useful to create an activating stimulus than a photo. The chapter Our Daily Activation gives information on the various categories of color stimuli and their importance.