Balance, comparison, coherence, and whitelist on the web page

Balance, comparison, coherence, and whitelist on the web page

In web design, we need to grasp many principles and details. Today we will talk about the balance, comparison, coherence and white space in web design.

I. Balance

If your pages are balanced, you will feel like they are a whole when you browse this page, and you will naturally jump to the page. At the same time, the page elements are still independent from each other (Note that they are not isolated). You don't need to concatenate them directly with colors. Why? Because they are balanced. This is like a seesaw. Even if you don't see the boards of people connecting the two ends, you can feel that they are a whole, because they are "balanced "!

1. Symmetric balancing

Symmetry is the most common and natural means of balancing. This method is usually used to design formal pages, but it also needs to be used in combination with the methods described below. For the website shown in Figure 1, if you draw a vertical downward line in the middle of the page, you will find that the layout on both sides of the page is basically symmetric.

2. Asymmetric balancing

In fact, asymmetry is not a real "asymmetry", but a higher level of "symmetry". If you cannot grasp the page, it will appear messy. Therefore, you should be cautious when using it, and you should not be able to use it more efficiently. For example, this website http://www.graphic.com.cn (Figure 2) breaks the common symmetry. But if you look at it carefully, you can still feel a "symmetric" shadow.

3. Radiation balance

The elements on the page are centered on a certain point to form a radiation balance. For example, Figure 3 is a typical example. The center of the page is a large LOGO with multiple links on the outside.

4. Balance in practice

Next we will use a LOGO design example to look at the various changes in balance.

II. Comparison

If a stable page framework is set up in balance, comparison is the dynamic embellishment in the framework. Here, the dynamics do not mean that elements must be moved, but "changed ". Possible factors include size, color, font, center of gravity, shape, and texture. Let's use a simple example to introduce the application of comparison. Figure 9 is the base version we designed. It has the same font, size, color, and monotonic.

III. Coherence

Compared with the previous interview, the comparison is inseparable from changes. However, if there are too many comparisons and there will be too many changes, the page will look messy, so now let's talk about "coherence ". In a successful page design, many elements must be consistent. These elements usually include:

1. Layout

The page layout must be consistent between the page and the page. For example, if the table at the top of the page is centered and the table at the bottom of the page is left aligned, the whole page will be ugly.

2. Font

The font size and color must be basically the same.

3. Navigation bar

The navigation bar should be identical. Generally, a framework page should be created separately for the navigation bar to ensure that all webpages will be automatically updated when the navigation bar is updated.

IV. White

In Chinese painting, the beauty of "painting fish without painting water" is the beauty of white. White space can give visitors a larger space to imagine, just like a room without too many decoration. It is a bad design to make the top, bottom, inside, and out of the box full of stuff.

The principles of white space retention include:

1. The white space between elements cannot be too large. This is a basic principle. If you leave too much white space, the leaves will become fragmented.

2. The gap between the text cannot be too large. The text should be compact, especially the text of Chinese characters. If the gap between words or between lines is too large, the page will be very ugly.

In general, the four principles of balance, comparison, coherence, and white space must always be kept in mind in web design. However, they are by no means a dogma and should be flexibly applied according to their actual needs.