How to create a touching web design with color

Color psychology is widely used in various design areas, which is no secret. From the daily grocery to logo design, color plays a more and more important role, it is to convey information to users one of the most significant factors.

According to Kissmetrics, when we see a color, information is passed to a region of the brain's hypothalamus. Next, the signal will be further transferred to the pituitary gland and then to the thyroid gland. This also means that color stimulates the brain and glands to secrete hormones, triggers our emotional reactions, and affects our behavior.

Scientific research shows that color affects emotions, can lead to positive emotions, can also bring negative effects, and sometimes bring the emotion does not match the actual need. Kissmetrics went on to add that visitors to the site usually only need about 90 seconds to make judgments and choices about a website, while in the person, there is a 62%~90% factor depending on the color of a product.

In Uxpin's free ebook web design for the Human Eye, we have said that when something gives the first impression, color plays an indisputable and important role.

　　What color means.

Each color has a specific meaning for everyone, but its specific meaning usually depends on their cultural background, personal experience and preferences.

To illustrate this point, we might as well look at the color card below.

In fact, color psychology is not a precise subject in the field of design, the individual difference is very obvious. Social factors, personal cognition, and even gender can also have an impact on color perception. Further research has found that the impact is not always the color itself, the use of these colors of the brand and the relationship between users will also affect the user's perception of color.

So, if your design is for women, then purple is a pretty good choice, because purple is popular among female audiences, but for most men, purple is not very popular. In the image below, purple is used in the website of L ' Oreal in Paris, and it works very well. The body uses black and white color, the black header footer looks very elegant, purple embellishment, the overall feeling is very good. In fact their products are not cheap, but they are more high-end.

In addition, the use of white text to make people feel calm and modern enough, purple is endowed with luxury, elegance, feminine meaning. All of this can be found in this website.

(To learn more about the design of minimalist wind and how to use it to create a sense of modernity, look at this ebook: The elegance of minimalism and the Zen of white spaces in Web designs)

The image below is a page of the women's Health magazine, where the banner is pink and the navigation design is bolder, but other sites are not rich in color. I have to say this is a very interesting choice.

First of all, for women's web sites, pink itself is still relatively old-fashioned, but as a female health site, such color and the main body is not a special match.

When we continue to explore other parts of the site, such as when you open the Weight loss page, the corresponding position on the navigation bar will turn pink to mark.

Color will affect the user's mood and feelings, although the first picture of the page is random scrolling playback, but think about it, the entire weight loss related pages almost drowned by pink, counterproductive.

　　Color scheme

Usually when you are ready to design a website, do not use only one color? You need to consider the overall color scheme for the entire site, the selection of individual colors, and the pairing of different colors. Next, you need to consider the effects of different colors on the user, the coordination between the color and the main tones, and so on.

As a result, designers need to be more thorough about the mix and use of colors. Here are three basic color-matching tips that can help you fix the problem.

#1: Tri-color collocation

This is the most basic method, but also the most balanced color thinking, the use of complementary bright colors. On the color wheel, select each of the 120-degree angle of three colors, respectively, as the background, content and navigation color.

#2: Combining Color (split-complementary)

This color scheme is relatively difficult, you need to pass a certain test and explore to get. If the match is good, the effect is very stunning. As shown in the figure, this color scheme is to select the next two pairs of contrasting colors on the color wheel.

#3: Approximate color

The core of this color matching is to choose a continuous adjacent complementary color, if you want to use this to please users, in the selection must be careful. This color style can highlight the vitality of the color, but because of complementarity, color and effect contrast is not so strong, but will be more exaggerated.

So, when you start thinking about the psychology of color, try to measure the whole color scheme as a whole, rather than selecting a color for a particular part, so that it can work in coordination with other parts.

Take a look at the page below and think about what information it will convey to the user.

1, background color--dark backgrounds to make the entire page look classic, excellence, calm, formal and enough "entrepreneurial". When you design a website, the feeling of "keep improving" always gives people a good impression. Formal and entrepreneurial attributes, it usually allows visitors will not play with the mentality of the view of the site, and can bring a certain degree of trust.

2, Button color-designers in the CTA button (Action call button) on the use of strong contrast red, eye-catching and very attractive to users to click. Relatively speaking, the white edge of the Phantom button is significantly lower in priority than the Red CTA button. The button uses the Color button to use the color in the whole color match logic, the position is clear.

3, the text color--white text and black background to form a clear contrast, from the overall color scheme is also very good to adjust. In addition to the text with the line icon also uses the same white, in the color of a highly consistent scheme, outcrop text implies that the user needs to scroll down.

Overall, the package design is also good, a decent black-and-white match, plus red, it appears lively. Because the use of red is quite known, a little embellishment, will not appear too much, all of this makes the whole color to stand out. Make the whole color stand out.

Need to avoid the use of color

Brown usually gives a natural feeling, but this color is usually not a male delight. But in some cases, brown can make people have a reliable and safe feeling, the use of this time is very good.

As a famous logistics company, UPS uses Brown to give users a strong sense of dependency.

But as a team of Wyoming State College football teams, the color scheme was rated as the worst design in history. The most interesting thing about this brown outfit is that it's very durable, but at the same time it's very ugly. Male perception of color in this design embodies incisively and vividly.

In the case of female users, Orange is a relatively less popular color, so try to avoid this if your client is female.

Of course, these rules are mostly guided items, they usually have context and use of the scene, the color only harmonious collocation will look beautiful and combined.

Color matching and color-taking tools

With ready-made color schemes and palettes in fact, you don't need to create a color wheel for web design or UI design alone.

The color cc–adobe produced by Adobe Color is previously known as Kuler.

paletton– This is a set of color-taking tools for beginners.

Flat UI Color picker– This is a set of flat color tools

The Mudcube color sphere– has a series of color themes built into it, and the corresponding color includes the corresponding hex code.

Check My colours– This tool is used to adhere to the foreground and background of the color combination, it can provide the correct contrast detection, to ensure that color blindness users can also distinguish colors.

color– This tool allows you to use the mouse to take color on the screen, set the saturation, and provide the appropriate hex code.

Case analysis

There are thousands of Web sites on the web, many good sites, but most of them have nothing to do with excellence. But beneath the site, a member of the officially outstanding wave, it had won the title of Awwwards's best website of the day.

The background color of the site uses light gray, which is the same as the color of the electric car. The whole page design is simple, oversized font and small body form contrast, convey the small and flexible electric car characteristics. As a neutral color of the gray, so that the other colors in the page more vivid and more conspicuous, contrast, also gave the page with vitality. At the same time, the main color of the gray, also emphasizes the product and brand calm atmosphere side.

The huge go, the color is cheerful and lively, the gradient and bright full show the design of modernity. It's important to note that blue is a color that both men and women like very much, and this makes the site indistinguishable from gender. Gray also has a restraint and environmental characteristics, combined with the small design of electric cars, the entire design is also implied product environmental protection and safety characteristics.

Overall, this page's sense of life and modernity and contemporary urban people's State of agreement is very high.

The final note

Color is an important part of product design, and it is also a vital link in brand design. Therefore, in the design of the Web site or UI, the meaning of color transmission must be consistent with the brand, the brand story and meaning into the design to. Typically, a designer will take color directly from a brand logo or brand design Guide, although this can be limited, but it does make things easier.