Keywords

1 Introduction

In the era of big data with the rapid developing of internet, many companies are striving to seize the space of the virtual world of the Internet in order to establish their own brand image. In the internet advertising, banner is summative and inductive [1]. The most important and latest information in the web page can be shown effectively with the banner, which is a fast channel for people to get important information immediately after entering the web page. Color is the most dynamic way to convey advertising, and the most popular form in the aesthetic sense in general [2]. As an important factor influencing people’s feelings about banner, the color design of the website banner is worth studying. In order to help designers to solve the problem of banner color matching, to reduce color selection time, to figure out the difficulty of color planning, a new method of banner color was established in this paper, later questionnaires were utilized to verify the feasibility. This method can help designers to configure multiple sets of color schemes for selection quickly.

2 Literature Review

Since the emergence of the first personal computer Altar in 1975, all aspects of our lives have been occupied by more and more digital products [3]. Banner originates from the early headline advertises in paper media, which refers to banners and flags used as slogans in parades, and now banner refers to web ads. Li has pointed out that banner had the characteristics of timeliness, size limitation and precision [4].

The color of the web page belongs to the category of color science [5], and the research on its performance has started earlier in the international academic community. At the end of the 20th century, web pages were included in the user interface as a type of interactive interface. In the book “Web Design Basics Tutorial” written by Yang and Yu etc. The basic discussion on the color matching of web pages was carried out [6]. In the “Designer’s Web Color Matching” written by the I.R.I Color Research Institute of Korea, a detailed analysis of the color matching of web pages was conducted [7]. “Introduction to Color” by Chilansky and Fisher contains a special chapter on computer color, adding web design content to the discussion of computer art updates [8]. In the article “Color Application and Research in Web Design”, Zheng explained that web design had gone through three stages—the simplest static pages, illustrated pages and interactive dynamic web pages [9]. Zhang Pan, etc. have described the psychological functions of advertising color and the factors of limitation in detail (including time, region, ethnicity, history, religion, customs, culture, etc.) [10, 11].

The existing literatures on the color matching of web banners mainly focused on the rules of color matching and the elements of color selection. There are few literature on forming a set of instructional process operation methods on color matching in spite of some theoretical discussions. Most experienced designers use their previous design experience to obtain reasonable color matching, however general designers need to take a lot of effort for color matching in their work. Too much time are used for the work and the output of color planning are still not satisfied due to the inefficient work. Therefore, how to help design novices to choose color schemes, making designers work more efficiently becomes an urgent problem to be solved.

3 Method

3.1 Application of Color Composition Rules

Modern advertising design is generally composed of elements such as words, patterns and colors, and the three are interdependent. The patterns and words are expressed by color. When people browse a web page, the first things which enter into people’s sights with the visual impact and appeal are colors. Color expression can be considered the most important thing in some extent [12]. In the 1920s and 1930s, Bauhaus has built and developed the core theoretical system which constitutes art [13]. In color design, designers often use color schemes to achieve the most harmonious design color. The principles of these rules are summarized as below.

Apply Monochrome to Complete the Picture

Monochrome configuration refers to the use of a single hue to form the main color of the picture. By adjusting the purity and brightness of the color, a pure picture is configured to make the picture as a whole consistent with the application environment. It is often used in the case that the page matches the corporate image and the VI system, which makes the overall web page ordered and harmonious.

Apply the Similar Color and Adjacent Color Configuration to Construct a Harmonious Picture

The similar color means colors with no significant difference in hue, which can only be distinguished by the purity and brightness. The adjacent color means colors with an angle of 60–90° or five or six digits apart on color ring, such as red and orange, blue and blue-green [14]. When two or more colors appear in the picture, the difference in color visibility occurs [15]. Compared with similar colors, the difference in hue of adjacent colors is more obvious, and the contrast between colors is improved, which can enhance the sense of activity for the original harmonious picture. Through a scheme of the similar color and adjacent color configuration, a unified and varied picture effect can be produced.

Apply Complementary Color Configurations to Create a Dynamic Picture

The complementary color refers to colors with an angle of 180° on the color ring, such as red and green, yellow and purple, blue and orange, and so on. This kind of colors have strong stimulation to the human optic nerve, which can make people feel excited in a short period of time and create a dynamic picture. At the same time, watching this kind of colors for a long time will bring people a sense of fatigue and reduce people’s good feelings for expressing things. This type of colors should be used with caution and are suitable for pages with short time of sight and strong appeal. The higher the brightness, the more prominent the theme, and the color purity is reduced from red, orange, purple, blue, and green. The colorist Goethe believes that the brightness and area of the color determine the power of the color, and the ratio of the balance area of the complementary color is given as yellow: purple = 1:3 orange: blue = 1:2 red: green = 1:1 [16].

Theoretical studies in color have shown that different background colors can have different (and sometimes even opposite) effects on consumer perception, emotion, and behavior [17, 18]. Therefore, a large area of color is generally applied to a low-purity background color, and a small area of complementary color or contrast color can be added thereto to increase the change and motion of the picture. Black and white is the simplest match, which is very clear, gray is a universal color, which can be matched with any color to help the opposite color transition [19].

3.2 New Design Method

When designing a banner, colors are often used to highlight important information or convey a specific feeling to fit the theme, which makes users have the desire to click in a short period of time, and thus enhance the propaganda and desire to purchase [20]. Consumers have different information processing methods for new products placed under different background colors, and the corresponding product evaluation may be different [21]. However, most of studies on banner color matching focus on the interaction between colors, and do not form a set of efficient, fast and instructive color matching process. In most cases, designers can only try color matching based on experience and subjective judgment. For this, a design method for quickly obtaining color schemes is proposed (Fig. 1), so that designers can save time and improve work efficiency.

Fig. 1.
figure 1

New method design flow

Full size image

(1) Establishing topics and keywords

A theme was identified through brainstorming, and then 3–5 keywords named A, B, C, D, and E are exacted by brainstorming. 3–10 sets of color schemes can be generated by these 3–5 keywords. The number of keywords depends on the number of initial schemes required. Based on the design experience, the number of initial schemes generated by 3–5 keywords will not be too much or too little.

(2) Extracting derivatives

Extract 6–10 derived words based on each keyword. During this process, designers can use mind mapping method to generate these derived words.

(3) Selecting picture and blurring

Search for these derivatives on the network, find the corresponding network pictures, and blur the pictures in the software. When selecting images, try to choose high-quality image sites, use high-definition images and the content of the images is full and full, and there is not much white space to avoid affecting the extraction of key colors. Blurring the image, so that the color of the processed image is fused to a certain extent, softer, so as to facilitate the subsequent color extraction. If the blur degree is too low, the effect cannot be achieved, and if the blur is too high, the color of the screen changes too much. Therefore, when the blur processing is performed, the blur parameter is preferably set to about 10.

(4) Extracting key colors

Extract 5–7 key colors from the blurred image. The relevant websites and tools to identify the color of the pictures uploaded can be used to assist in the extraction. In this paper, ColorStatistics software is used for color recognition.

(5) Combining schemes

10 sets of new color schemes can be formed by the combination of five sets of key colors. In this process, designers should use a combination of basic aesthetic qualities and basic color knowledge. Designers can flexibly apply the aesthetic rules outlined above in this paper to color matching and abandon or modify color schemes that are clearly undesirable.

As a result, designers can get one or more designs for banner by screening the new color scheme.

4 Result and Discussion

4.1 A Subsection Sample

The color scheme of the EXCHANGE DISCUSSION banner (see Fig. 2) of SANGFOR is redesigned based on the method proposed above. Five groups of native key words were selected through brainstorming, then derivative words from the five groups of key words were extracted (see Fig. 3), next corresponding images (Table 1) of the derivative words were discovered, later these images were blurred and key colors were extracted on the ColorStatistics (see Fig. 4). Ten color schemes were combined with five sets of key words (see Fig. 5). At the same time, random select three of them (see Figs. 6 and 7) to transform the text and background in order to further explore the skills of color matching.

Fig. 2.
figure 2

EXCHANGE DISCUSSION Original image

Full size image
Fig. 3.
figure 3

Blur pictures

Full size image
Table 1. Key words and derivative words.
Full size table
Fig. 4.
figure 4

Extract key colors

Full size image
Fig. 5.
figure 5

Ten color schemes

Full size image
Fig. 6.
figure 6

Background color exchange image

Full size image
Fig. 7.
figure 7

Text change image

Full size image

4.2 Verification Survey

A total of 42 people participated in the test, including 17 males and 25 females. All subjects were designers and from different regions with ages ranging from 18 to 35 years old. The questionnaire was scored on a five-point scale for five questions, namely (Table 2): 1 is the lowest score, 3 is the general, and 5 is the highest score.

Table 2. Questionnaire
Full size table

4.3 Results and Data Analysis

The satisfaction in Q1 was scored generally higher than 3 points (see Fig. 8) and P9 having the highest satisfaction of 3.97. The final average score was 3.4. The score in Q2 was scored with a final score of 3.37, with the highest scores for P8 and P9 being 3.95 (see Fig. 8). In question (3), the exchange of background color of picture A didn’t affect too much (Fig. 9). The degree of boldness in the question (4) was C1 > C2, D1 > D2. C1 and C2 are quite different. The highest C1 was 4.21, C2 was only 1.6, and D1 was closed to D2, which were 4.38 and 3.38 respectively (see Fig. 10). The reading comfort in question (5) was C1 > C2, D1 > D2, where C1 was the highest, 4.36, C2 was the lowest 1.71, and D1 was similar to D2, which was 3.79 and 3.64 respectively.

Fig. 8.
figure 8

Average Q1 satisfaction score and Q2 compliance with the theme

Full size image
Fig. 9.
figure 9

Figure A background exchange impact statistics

Full size image
Fig. 10.
figure 10

Average Q4 eye-catching score and Q5 reading comfort score

Full size image

After comparing the application, it was also found that,

  • The 10 color schemes are basically in line with the theme of “EXCHANGE DISCUSSION”.

  • If the background color is multi-color, different colors occupy different proportions, while the colors are in the same color system but only adjust in purity and brightness, the proportion of these colors in the background can be interchanged in most cases, and has no significant influence on the overall sensory expression.

  • The contrast colors can be split without white, but the adjacent colors of the same chroma need to be reconciled and highlighted by black and white for emphasizing the content you want to express. If the color purity in the picture is too high, dark gray adjustment is required to stabilize the picture.

5 Conclusion

In banner’s design, the color should be used skillfully. The design can be rigorous, serene and bold, but high-intensity contrasts, especially fluorescent colors should not be always used to attract users’ eyeballs. The visual comfort of the interviewer should be considered. Designers should take into account the user’s visual comfort, pay attention to the balance of colors, make the whole design look stable, thus creating a pleasant atmosphere and improving users’ goodwill on the webpage. Applying this new color matching method enriches the connotation and artistic conception of the banner of the webpage, and can form a set of color schemes with high efficiency and applicability. The method has reference value for promoting the innovation of the banner design method.