Color is one of the most important parts of your site. However, color is often just a matter of hindsight after a comprehensive decision, sometimes even ignoring it. That's not going to work. Color helps users interpret information.
Color is one of the most important parts of your site. However, color is often just a matter of hindsight after a comprehensive decision, sometimes even ignoring it. That's not going to work. Color helps users interpret information. To put it more complicated, most people's judgment on the color of the site is done subconsciously. They may not be able to say the color, but they are subconsciously minded about it.
Sometimes, you will remember the website because of the color. I told you there is a website, purple used very good, I asked you this is a website, what do you think first? It's probably Yahoo!. it. Yahoo's brand identity system has several major features, one is purple. You might ask: What does color theory have to do with purple?
In this series of articles, we will (more or less) explain color and how to apply it to web design. In this article, we will explain the basics of color: how colors work, how artists use colors, and how colors affect our emotions. In the second article, we'll look at how colors are rendered on a Web page, how the color is encoded in the stylesheet, and the new features in CSS3 about colors. In the third and final article, we will explain how to pick and apply colors in your layout, and the illusion of color in the universe.
First of all, we would like to briefly introduce the theory of color in physics. Then we'll talk about the psychology of color theory: What emotions are conveyed in the site's colors and how we can use this to optimize the user experience. Finally, how to apply the theory to the web design practice.
Physics Color theory
Reflection Color
Color theory involved in design
Standard Hue Ring
Complementary color
Do the following: Stare at a color for a minute and close your eyes. What color would you see? No surprises, you'll see colors called "contrasting colors." This color is usually in the direction of "relative" in the "Hue ring". But what is the practical significance of this bizarre experiment?
A doctor, for example, stares at the blood all day (dark red), and when he closes his eyes, he sees "complementary colors". In this case, he sees the light green. As a result, the walls of the hospital are generally brushed to a spotless light green. While this may not be much of an advanced technology, the "complementary" color system can indeed calm our vision system. If people in the construction of hospitals can benefit from the color theory, then we web designers in the production of Web pages can also!
The use of complementary colors is a beautiful artistic design and graphic design of an important means. The same applies to other areas, such as contrasting logos and retail displays. Put the complementary colors together, they will highlight each other.
Because art/Zen/life is all about balance, it is important that websites have a good color base. Never overdo your audience, unless .... Boy, you're having trouble with your wallet.
Approximate color
Simple color "triangle", with a fourth color.
When choosing colors for your design, an approximate color is the safest option. The easiest way to do this is to start with the base color: here, I choose green as the base color, the hue is 120, and I'll pick the relevant color below. To begin with, the choice of hue and 120-related colours-can be mathematically accurate. I would intentionally and not arbitrarily lower hue, I choose 60, 45, and 33. Typically, the designer chooses such a set of three colors: This combination is called the color triangle.
Rectangular color Selection method
Rectangular color selection method is not only the most complex, but also the most difficult to understand. But it is quite simple to pick the color, just draw a rectangular brace hue ring, so that the four corners of the rectangle will each press a hue. However, the focus is on change. carelessly, your plan will be to spend as much as the rainbow. Try to keep one color on the other and make your color scheme as concise as possible. I found that if a variety of colors are relatively unsaturated, it will be much easier to handle.
The theory of Psychological color
Color is an important tool that you can use to communicate across languages. Look at the natural idea when you see all kinds of colors.
The color associated with emotion and emotion
Each color has its own lightness and emotion.
Warm color
Warm colors are more intimate than cool colors. Thus, a darker warm color may appear to be as bright as a cool color that is lighter in value.
Red
Power, power, passion, love.
Orange
Happiness, passion, attraction, success
Yellow
Joy, excitement, focus
Cold color
Cool colors have a more distant feel than warm colors. Thus, a lighter cool color may appear to be as bright as a darker warm color on the value.
Green
Refreshing, fresh, prestige, cool, cool,
Blue
Reliable, trustworthy, dependable, quiet
Purple
Spirituality, ritual, mystery, rebirth, imperial power
Neutral color
The effect of neutral color on emotion is less, so it is often considered to be used for objective presentation. However, if used well, neutral colors can still imply meaning. "Pure" black and "pure" white is our ideal of "light" and "dark" color representatives.
Black
Sexy, mysterious, obedient, dangerous.
White
Pure, innocent, restored, neutral, eternal
The color of the light and tone
Keep in mind that color is more than just hue. Saturation and brightness also affect the way we feel. But the traditional color theory often avoids the saturation and the lightness, but the artist has always emphasized to understand their subtlety.
You must have seen an example of selective use of colors: An artist finishes the photo, removes all the colors, and retains only the focus position's color. Color differences can affect the way we perceive things in our subjective sense. By giving the color, the artist can inject vigor into the original dry place in the photograph.
Conclusion: Selecting the most suitable color for experience
Theory, we're done. If you are interested in using and controlling colors in the layout of a Web page, the Insider theory about color and color schemes is critical. Although, this is only part of it. As a designer of experience, we have to consider a variety of different elements. It should be noted that we do not want to be a master in a particular field, but to have a general knowledge system.
Obviously, I can't give the full details of each of the concepts mentioned above, so this article will be eight times times as long as it is now. But you can take a moment to look at the relevant links to these concepts, or read some of the relevant books carefully. If that's not enough, find inspiration: Browse your favorite sites and artists. Let's see how they use color. Don't pay attention to form, copyright, special effects: Just pay attention to color. If you can individually pay attention to each part of the user experience, you will be in the idea of a smooth sailing. Is there anything in my article that touches you? Please do not hesitate to comment on your thoughts!
Next post Content Trailer
Theory is one thing, practice is why did again?
The purpose of this article is to lay the groundwork. Now, we stand on this level, we need to take a further approach to this concept. In the next article, we'll discuss how to render the page color (what sRGB means), the various color encodings in the stylesheet, and the new features in CSS3 about colors.