Webpage Color Design

Nature is colored. The rapid arrival of the information age has begun to become more colorful. People are no longer limited to simple text and images. They require that webpages look beautiful and comfortable. Therefore, contemporary designers should not only master the basic website production technology, but also master the website style and color settings ..

Nature is colored. The rapid arrival of the information age has begun to become more colorful. People are no longer limited to simple text and images. They require that webpages look beautiful and comfortable. Therefore, contemporary designers should not only master the basic website production technology, but also master the website style, color and other design art. Among them, colors play a very important role in website design.

I. Some basic concepts of color

 

First, let's take a look at some basic concepts of color. There are many colors in nature, such as red roses, blue oceans, and orange oranges ...... However, there are three basic colors (red, yellow, and blue). Other colors can be adjusted by these three colors. We call these three colors "three primary colors ".

Colors in real life can be divided into colors and non-colors. Black, white, and gray are non-color series. Other colors are color. Any color has three features: color, brightness, and purity. Among them, non-color only has the brightness attribute.

The color phase refers to the color name. This is the most basic feature of color, and is the main factor that distinguishes one color from another. For example, purple, green, and yellow all represent different colors. Adjust the brightness or purity of the same color, such as dark green, dark green, grass green, and bright green.

Brightness, also called brightness, refers to the brightness of a color. The greater the brightness, the brighter the color. Such as shopping websites and children websites. It uses some bright colors to make people feel colorful and lively. The lower the brightness, the darker the color. It is mainly used for some game websites and is full of mystery. Some personal Webmasters can also use some dark colors to express their unsociable or melancholy personalities in order to reflect their own personality. Colors with poor brightness are easier to reconcile. Such as purple (#993399), yellow (# FFFF00), dark red (# cc3300), grass green (#99cc00), dark blue (# 0066cc), and orange (# ff9933. (1) In Figure 1 is an example of brightness changes from high to low.

Figure 1(1) Brightness change (2) Purity change

Purity refers to the brightness of the color. The color with high purity is pure and bright. The color of the purity base is dimmed, including gray. In 1 (2), the purity changes from low to high.

Similar colors: three adjacent colors in the color ring. 2 In yellow green, yellow and orange. The combination of similar colors gives us a comfortable and natural visual effect. Therefore, similar colors are extremely common in website design.

Figure 2Similar color chart 3Complementary colors

Complementary colors: two colors in the color ring. Bright green and purple in 3, red and green, blue and orange. For complementary colors, adjust the brightness of complementary colors. Sometimes it is a good combination. Let's take the blue and orange colors for example. See figure 6. Is the matching effect better after the blue brightness is adjusted? Complementary colors are also widely used in website design.

Figure 4Complementary brightness adjustment

Warm colors, 5 of the yellow, orange, red, purple and so on are warm series. The combination of warm colors and black colors can achieve good results. Warm colors are generally used for shopping websites, e-commerce websites, children websites, and so on. They are used to reflect the wide variety of products and the lively and warm effect of children websites.

Cold colors, green in 6, blue, blue and purple are all cold colors. Generally, cool colors are mixed with white colors to achieve a good effect. Cold colors are generally used in some high-tech, game-type websites, mainly to express serious, steady and other effects.

 

Figure 5Warm color chart 6Cold color

Color balancing: Websites make people look comfortable and coordinate. In addition to the rational layout of texts, images, and other content, color balancing is also an important part. For example, a website cannot use a single color, so the problem of color balancing is a problem that designers must consider. Color balancing, including the color position, proportion of each color, area, and so on. For example, bright and bright colors should be smaller, making people feel comfortable and not dazzling. This is a balanced color combination.

2. Association of colors

Color has rich feelings and meanings in people's life. For example, red is reminiscent of roses, joy, and excitement. The white color indicates purity, cleanliness, and conciseness. The purple color indicates female, elegance, and romance. The blue color indicates high technology, stability, and reason. The orange color indicates joy, sweetness, and harvest; green represents the vitality, comfort, and hope of youth. Of course, it does not mean that a certain color must have any meaning. In a specific situation, the same color can represent different meanings.

Iii. Application of black and white gray

Black, white, and gray are omnipotent colors and can be used with any color. When you are worried about a certain color combination, try black and white. When you think that the two colors are not in coordination, try to add black or gray, which may have unexpected results.

For some websites with high brightness, with black, you can properly reduce their brightness.

White is the most common color for websites. Many websites even leave a large white space as an integral part of the website. This is the art of white space. Many design websites use the white art more. Leave it blank and give people a space of imagination, making people feel comfortable and happy. Proper whitelists play a significant role in coordinating page balancing.

4. Determine the website subject color

It is impossible for a website to use a single color, which makes people feel monotonous and boring. However, it is impossible to apply all the colors to the website, making people feel frivolous and fancy. A website must have one or two theme colors, so that customers do not get lost or monotonous. Therefore, determining the subject color of a website is also one of the issues that designers must consider.

A page should not contain more than four colors as much as possible. Too many colors make people have no direction and focus on them. When the subject color is determined, consider the relationship between other colors and the subject color to reflect the effect. Which of the following factors is dominant? brightness, purity, or color.

5. Page Elements

I learned some basic concepts of color and some matching questions about color. How do I match the colors of each element in the webpage?

1. Background and text

If a website uses a background color, you must consider the background color and foreground text. The General website focuses on text, so the background can choose a color with a low purity or brightness, the text is highlighted. Easy to understand.

Of course, in order to impress a visitor, some websites write articles on the background. For example, if a part of a blank page uses a bright color block, will it make you feel enlightened! At this time, in order to attract the viewer's sight, the text is highlighted by the background, so that the text can be separated from the background to facilitate the viewer to read the text.

2. logo and Banner

Logo and Banner are one of the most important parts of the promotion website. Therefore, these two parts must be highlighted on the page. How can we achieve this? We will make the logo and banner brighter, that is, the color aspect is separated from the theme color of the webpage. Sometimes you can use the opposite color as the theme color to make it more prominent.

3. Navigation, subtitles

Navigation. The title is the street lamp of the website. The browser must jump between webpages. To understand the website structure and content, you must navigate to the page or use some subtitles on the page. Therefore, we can use a slightly leaping color to attract visitors and make them feel that the website is clear, clear, and hierarchical. You won't lose your way wherever you want to go.

4. Link color settings

A website cannot be a single page, so the link between text and images is an indispensable part of the website. It is particularly pointed out that the link is different from the text, so the color of the link cannot be the same as the text color. Modern people have a fast pace of life, and it is impossible to waste too much time searching for links to your website. A unique link color is set to make people feel his uniqueness. Naturally, curiosity will inevitably make him move the mouse and click the mouse.

To make your pages more beautiful and comfortable, and to enhance the readability of your pages, you must properly use and match the colors between the elements of the pages.