Professional and non-professional web design

1. Layout

Web design first involves the layout of the page. "Page layout" is actually the "business position" in ancient Chinese painting theory. A web page is a layout that contains both text and pictures. Text can be large or small, and there are titles and main texts; pictures also have different sizes, and there are horizontal and vertical differences. Both pictures and text need to be displayed to the audience at the same time. They cannot be simply listed on one page, which often makes it messy. According to the needs of the content, these pictures and texts must be reasonably arranged and laid out in a certain order so that they form an organic whole and can be presented to a wide audience.

1. The primary and secondary are clearly distinguished, and the center is prominent. On a page, you must consider the visual center, which is usually in the center of the screen or in the upper middle part. Therefore, some important articles and pictures can generally be arranged in this position, and slightly less important content can be arranged outside the visual center. In this way, the key points are highlighted on the page and the primary and secondary contents are distinguished.

2. Match the sizes to complement each other. Longer articles or titles should not be arranged together; there should be a certain distance between them. Similarly, shorter articles should not be arranged together. The same goes for the arrangement of pictures. They should be staggered so that there is a certain distance between them. This will make the page look staggered and avoid the deviation of the center of gravity.

3. The pictures and texts complement each other. Text and pictures have a complementary visual relationship. Too much text on a page will make it dull and lifeless. Too many pictures and lack of text on a page will inevitably reduce the information capacity of the page. Therefore, the most ideal effect is the close coordination between text and pictures, which complement each other, which can not only liven up the page but also make the web page have rich content.

2. Lines and Shapes

The combination of text, titles, pictures, etc. will form various lines and shapes on the page. The combination of these lines and shapes constitutes the overall artistic effect of the web page. Care must be taken to artistically match these lines and shapes in order to enhance the artistic appeal of the page.

1. Application of straight lines (rectangles). The artistic effect of straight lines is smooth, upright, regular and neat, so-called having outlines and contours. The repeated combination of straight lines and rectangles on the page can create an orderly and clear visual effect. It is generally used for solemn and serious web page themes.

2. Application of curves (arcs). The effect of curves is fluidity, liveliness and dynamism. The repeated combination of curves and arcs on the page can present a smooth, light and dynamic visual effect. Generally used in youthful and lively web page themes.

3. Comprehensive application of curves and straight lines (rectangles and arcs). Combining the above two types of lines and shapes can greatly enrich the expressiveness of the web page and make the page present a more colorful artistic effect. This form of web page has a wider range of adaptability and can be applied to web pages of various topics. However, the layout of the page will be more difficult, and if not handled properly it will produce a messy effect. The simplest approach is to use one type of line (shape) as the main feature on a page, and only use other lines (shapes) appropriately in local areas.

3. Color Processing

Color is the most sensitive thing to human vision. If the color of a web page is handled well, it can add icing on the cake and achieve twice the result with half the effort. The general principle of color application should be "overall coordination, local contrast", that is: the overall color effect of the web page should be harmonious, and only local and small areas can have some strong color contrast. In the use of colors, different main colors can be used according to the needs of the web page content. Because colors are symbolic, for example: light green, emerald green, gold, and gray-brown can symbolize spring, summer, autumn, and winter respectively. Secondly, there are the symbolic colors of occupations, such as olive green for the military and police, white for medical and health care, etc. Colors also have obvious psychological feelings, such as cold and warm feelings, advance and retreat effects, etc. In addition, colors also have national characteristics. Due to the influence of factors such as environment, culture, and tradition, different ethnic groups have great differences in their preferences for colors. Making full use of these characteristics of color can give our web pages profound artistic connotations, thereby enhancing the cultural taste of the web pages. Here are some commonly used color schemes:

1. Warm colors. That is, the combination of red, orange, gray, ochre and other colors. The use of this color tone can make the web page present a warm, gentle and enthusiastic atmosphere.

2. Cool colors. That is, the combination of colors such as cyan, green, and purple. The use of this color tone can make the web page present a tranquil, cool and elegant atmosphere.

3. Contrasting tones. That is to put completely opposite colors in the same room. For example: red and green, yellow and purple, orange and blue, etc.

This color combination can produce a strong visual effect, giving people a bright, colorful and festive feeling. Of course, if contrasting colors are not used properly, they will have the opposite effect and produce tacky, glaring and undesirable effects. This requires grasping the important principle of "major harmony, minor contrast", that is, the overall color tone should be unified and harmonious, while there can be some small strong contrasts in local areas.

Finally, we also need to consider the depth and lightness of the web page's background color. Here we borrow a term from photography, which is "high key" and "low key". A light background is called high key; a dark background is called low key. If the background color is dark, the color of the text should be light, with the dark background setting off the light content (text or picture); conversely, if the background color is light, the color of the text should be darker, with the light background setting off the dark content (text or picture). This change in shade is called "brightness change" in color science. Some web pages have a black background but use darker colors for text. Since the colors are close in brightness, readers’ eyes will feel strained when reading, which affects the reading effect.