Design theory: Color is the most important part of a website

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.

How does the color of this picture feel? Do these fireworks feel festive?

The photo is from Expressmonorail.

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

the world around us is colourful. An object, exposed to light (visible objects, see electromagnetic radiation), will reflect certain wavelengths of light into your eyes. For example, pure white light shines on an apple, and all the colors (all wavelengths) of the red (wavelength 700-630 nm) are absorbed. Red is the only light that is reflected to make you see, so you think the apple color is red. It's funny--red is the only color it doesn't absorb. So, the color we're talking about is essentially: some wavelengths of light are cut in the process of being reflected back by the object.

Addition color

The monitor displays colors in a quite different way. Because it produces light of its own, that is, it produces its own color. In general, the three primary colors that produce rich colors are red, green, and blue. The computer monitor has a very high pixel resolution, so it is not using the additive color point by bit. For example, a computer monitor displays cyan at a certain point, and it actually lights up blue and green pixels on a particular area. Therefore, the computer monitor displays the color in a dither form.

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.

Browse through the hottest website art works such as deviant art. What do they have in common? Be sure to pay attention to complementary colors and the use of saturation. What emotions do you want to convey? If you want to draw attention to a particular element, have you ever considered using color selectively?

How does this picture make you feel?

photo from Midnight Digital

After I had specified the colors in my design, I found it hard to turn the colors of each place back to black and white; under the guidance of the idea of selective color expression, they were so outstanding

Once you understand how colors and shades affect your site, take advantage of them. As distinct personality, happy words (such as in flickr.com can be found) can make the site more moving, bright and happy colors can do. On the other hand, uninteresting topics can also lead to vivid colors. Remember, everything about color is related to feeling. There is no Black-and-white (pun) science in perception.

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.