Balance, contrast, coherent and blanket in web design
Reprint, author: breeze
We need to grasp a lot of principles and details in web design. Today we will talk about balance, contrast, coherent and leaves in web design. One,
balance
If your page is balanced, when the user browses this page, it will feel that they are a whole, and it will be very natural. At the same time, the element of the constituent page is still independent of each other (note that it is not isolated), you don't need to use the line to connect them directly, why? Because they are balanced between each other. This is like seesaw, even if you can't see the wood board connecting the two ends, you can feel that they are a whole, because "balance"! 1,
Symmetrical balance
Symmetrical is the most common, most natural balance means, which is often used to design a formal page, but it also needs to be used in combination with a variety of ways described below. For example, the website shown in Figure 1, if you draw a vertical straight line in the middle of the page, you will find that the layout of the two sides of the page is basic symmetrical. figure 1
2, asymmetric balance
Asymmetry is not true "asymmetrical", but a higher level "symmetry", if you grasp the pages, you will be chaotic, so you should use it carefully and unused. For example, this website http://www.graphic.com.cn (Figure 2) breaks the common symmetry. But if you carefully see, you can feel a "symmetry" shadow. Figure 2 3,
Radiation balance
The elements in the page can be unfolded in a certain point to constitute a radiation balance. For example, Figure 3 is a typical example, the page is a large logo, and the outside is surrounded by multiple links. image 3
4, actual balance
Below we take a look at a variety of changes in balance through a logo design example. Figure 4 is the first draft of LOGO. Figure 4 How do you know that it is "balanced"? We can use the color block instead of the elements in LOGO, if we replace the three words in this logo with three black rectangles, Figure 5 can be obtained. It can be seen that this LOGO is "balance" and is basically qualified. Figure 5 But this LOGO structure is relatively simple, and it is also more dull. We can add a sorry to a sorry, so that the entire picture has a dynamic, and some link is also established between Asteroid and Studio. Overall, as shown in Figure 6. Figure 6 We can see that this design is still "basic symmetry", some conservative. Figure 7 Let's further break the symmetry, as shown in Figure 8. Note that breaking the symmetry is not breaking balance, but uses an asymmetric balance instead of symmetrical balance. Figure 8
Second, comparison
If the balance sets a stable page frame, the comparison is the dynamic embellishment in this frame. Here, the dynamic is not to say that the element is really moving, but there must be "change". Factors that can vary include: size, color, font, gravity, shape, texture, etc. We still introduce comparison applications through simple examples. Figure 9 is the bottom version of our design, the same font, the size is the same, the color is the same, monotonous boring. Figure 9 First of us, we have formed comparison by changing the size of the font. It is better to have a little better, as shown in Figure 10. Figure 10 If it feels that only the font size is more than addiction, the font size is compared to the color comparison, as shown in Figure 11. Figure 11 It turns out that is so simple! Here only, the basic method of comparison is introduced, in fact, because there are many elements available, it is not easy to compare.
Third, coherent
The contrast is talked out, and the contrast is inseparable from change, but if there is too much, there is too much change, the page will look zero, so we will now talk about "coherent". In a successful page design, there are many elements that must be consistent, these elements typically include: 1, the layout page, about, the page is consistent with the page. For example, if the table above the table is aligned, the table below is aligned, then the entire page will be ugly.
2, the size of the font font, the color should be basically consistent.
3, the navigation bar navigation bar should remain exactly, usually to create a frame page separately for the navigation bar so that all web pages can be updated when updating the navigation bar.
Obviously, coherent and contrast said contradictions are contradicts each other, so they must grasp the way when designing web design. Let's take an example, assume that we want to design business cards for members of the AsteroID studio, as shown in Figure 12. Figure 12 In addition to the fonts and colors of other portions other than logo are the same or similar to LOGO, this is coherent. Since the Chinese font is not used in logo, the English font is Verdana, in order to maintain a coherent, the Chinese font we select similar "young circle" font. There is also a color. There are only two colors, blue and green in the entire business card, which use too much color in a narrow space in business cards, which is obviously unmthvated, so we only use two colors.
Four, leave white
The beauty of "painting fish in painting" in Chinese painting is the wonderful place. Dossy can make visitors have a bigger imagination space, as if it is just like a room without excessive furnishings. Upper and lower, there is a very bad design. The principles of the white include: 1, the blanks between the elements cannot be too big. This is the basic principle, and the leaves are too much, and the leaves will become zero. Take the above business card as an example, if the leaves are too large, it will become like this (Figure 13): Figure 13 2, the interval between the text cannot be too big text, especially Chinese characters, if the word is between There is too ugly to the white, it will be very ugly. If you have a text in the page (Figure 14), there will be no many people like it. Figure 14 is generally balanced, compared, coherent, and detailed, four principles must always remember in web design, but it is not a dogma, and should be flexible in combination with their actual needs.
