Color in web design

Source: Internet
Author: User
Summary

From a psychological perspective, different colors represent different meanings. From this point of view, this article discusses the relationship between background color and content color on the webpage interface. Understanding this relationship helps: a) Select the appropriate color for different content on the webpage; B) easily find the desired content when browsing the webpage.

Keywords:Color, interface, web design

1. Introduction

1.1 study sources

Color is an important cultural element (Chen, 1999) that can assist in interface design ). Luscher and Scott (1969) read nearly 150 articles and use luscher color tests to reveal the relationship between color and human personality. Everyone has their own color preferences. However, this preferences change based on different objects (Cooper B. Holmes and Jo Ann Buchanan, 1984 ). In our webpage design work, we found that different webpage content should have different user preferences on color.

1.2 study objectives

Our daily life is inseparable from the Internet. With the development of the international Internet and Intranet, we often see more and more rich content on the webpage interface. For example, Sun has approximately 20 thousand external websites and 2 million webpages on the Intranet. A large amount of information does provide users with a lot of information. However, it also brings about the trouble of querying the required content. If the structure of the page is chaotic, the user will be unable to cope with the problem. Therefore, in addition to designing a reasonable information classification and website structure, it is best to use different background colors to distinguish different content.

In our past studies, we found that page views are often stuck in complicated website structures and do not know where they are or how to go back.

This study aims to find out the matching relationship between the most appropriate background color and content in web design and provide guidelines for web design.

2. Research Methods

Our research means are experiments. The subjects were 16 males and 17 females between the ages of 20 and 35. Some of them are students of different grades from different schools, while others are office workers. We think that people in this age group are the most important online users.

The specific research process is sequential. First, we visited the websites of 30 well-known enterprises in China. Find out the eight most frequently accessed information categories. As follows:

  • Home Page
  • About us
  • Company news
  • Product Information
  • Service/technical support
  • Finance (stock, finance, purchase or purchase through the Internet)
  • Human Resources (recruitment or training)
  • Network Community (partners, Member Centers, or corporate culture)

Then, we invite the participants to add different colors to the above classification. They use the painting feature in Microsoft wordsoftware to fill in what they think is the best color. Then, we collect the results for analysis.

3. Results and Analysis

Colorics have three primary colors: Red, green, and blue. After mixing, three other colors are generated: yellow, blue-green, and purple. In Chromatography: red, yellow, green, blue-green, blue, and purple. Black is a combination of red, green, and blue. According to the warm and warm colors, it can be divided into eight colors: Orange is the warmest, red and yellow are warm, red and yellow are slightly warm, blue green and green purple is slightly cold, blue is the coldest. The strongest white reflection, cold feeling; the strongest black absorption, warm feeling (munseu, 1915 ).

In the experiment, we asked the tester to select the background color based on the following table:

Table 1: The numbers in the table are the number of people who select the colors at the top of the table. These colors are the content on the left hand side of the webpage.

Next, let's analyze it.

3.1 Homepage

In this study, the home page of the company's website (homepage) consists of the following experimental results, see Figure 1:

Figure 1 color and Home Page

Most participants tend to use blue as the background color of the company's website. This test accounts for 50%. In the eyes of the tester, blue represents pure and noble. The blue background makes visitors feel comfortable and easy to trust the company that the webpage belongs. The introduction of Blue is a good start.

When the background is blue, the white text is easier to recognize, followed by the yellow text.

3.2 about us

Let's take a look at us:

Figure 2: Color and about us

It can be seen that half of the company's introductory content is red, orange, and purple. Another 25% of users are green.

Red, orange, and purple belong to the same color sequence and are warm colors. Red and orange indicate enthusiasm. The use of such colors to introduce the company's webpage background can make the company look energetic and dynamic. The white font is the most obvious on the red or orange background, followed by the yellow.

Most people who choose purple think that purple represents dignity and dignity, and visitors can have a sense of respect for the company.

Green represents life and hope, and is also related to youth and growth. Like the person who chooses red or orange, the person who chooses Green thinks green, but the company looks very vigorous. The white or yellow text is highlighted on the green background and is suitable.

Company news 3.3

The company news topic also provides information about the company. In our research, we found that average people like blue. Why? Because blue gives people a feeling of peace and health. In this way, visitors on the web page will feel more trustworthy company information through Blue.

Figure 3: colors and company news

3.4 Products

, We can see that more than half of people-66% of people choose blue or similar colors. These people think that these colors give people a safe and solemn feeling, so as to have confidence in the company's products.

Figure 4: Color and Product

3.5 service/technical support

In the service and technical support categories, our test results are basically consistent with the above product categories. Blue or similar cold colors are selected more. The reason is also similar. Services are as important as products, and companies also need their customers to have confidence in their services. In any case, services become more and more important when companies sell themselves.

Figure 5: Color and service/technical support

3.6 Finance

This category is related to the company's finance, such as procurement, investment, and Internet purchases. For the background colors of such webpages, our testers tend to be warm: red or yellow. Traditionally, red represents giali, and yellow represents fortune. Currently in the stock market, red is often used to warn investors. Therefore, red is easy to attract investors' attention. In addition, 33% of people choose blue, and they think this type of content must be very reliable and blue is necessary. Finally, we cannot ignore 14% of people who choose black, representing stability and solid.

Such information has two kinds of color preferences: warm colors to attract attention; Cold colors represent abstract meanings.

Figure 6: Color and finance

3.7 Human Resources

Almost all colors are used in the human resources, personnel, and training categories. Select red, green, yellow, and gray. The preferences of various colors have their own reasons.

  • RED: eye-catching. welcome to join us;
  • Blue: thriving (ocean and blue sky );
  • Green: lively and dynamic;
  • Yellow: a bright future.

The above colors show hope, without making people feel less enthusiastic.

If we use yellow as the background, we 'd better use black or red text.

Figure 7: Color and Human Resources

3.8 network community

The online community or member column is the place where the company communicates with customers. Here, the customer can give suggestions or comments to the company, get information about the company's activities, or join the club organized by the company. We found that 19% of the testers chose red, 29% selected blue, 33% green, and 19% blue. Green is relatively large, Green is in the middle of the chromatographic position, relatively soft, better eye protection, so that customers can feel warm and comfortable, and willing to join the Community.

Figure 8: Color and network community

4 Conclusion

In general, most of the participants in the test like red, blue, and green. As the background color of the webpage, these are exactly the three primary colors. They are the most pure colors in chromatography, and we can think that our participants in this test prefer solid web pages.

When accessing a specific category of content, people also prefer some specific colors. Therefore, we believe that the category of webpage content has a certain relationship with the color used. Through experiments, we found the following rules:

  • About us:Red, orange, green
  • Company news:Blue
  • Product Introduction:Blue, green
  • Service/technical support:Blue, green
  • Finance (stock, finance, purchase or purchase through the Internet ):Red, blue
  • Human Resources (recruitment or training ):Blue, green, yellow, gray
  • Home page:Blue
  • Network Community (partners, Member Centers, or corporate culture ):Green, blue

Through research, we found that it is very important to select appropriate colors for webpages with specific content. This not only tells the browser which type of information they are currently browsing, but also makes the browser feel comfortable when browsing. It is important that a comfortable web design can further attract users to the company.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.