"Web Design Tips" Series II shallow \ talking about layouts

Skills

About the layout may be the most people do not put in the eyes of the place, its status as the composition of the text, as soon as the cloth, the cloth is random. But a friend who has seen my last " Web design Technique " may well be aware that typography is an obscure but very important detail. Do a good job will make the work more refined and beautiful, not doing well may become the work of the major reasons for the loss. The layout is the same, and we need to be able to look at it. What I'm going to talk about here is not the "left and right", "Around", "up and down" categories of questions. It's about the ratio between the center of gravity and the position of the position.

As is known to all, there is a concept called the Gold Division rate outside the country. Here I quote a very professional explanation: "The Gold division was first seen in ancient Greece and ancient Egypt." The yellow Gold Division is also called the Gold rate , the ratio of Chinese to foreign , that is, the length of a line is divided into a short range of a, b two paragraphs, so that the ratio of the length of the segment (i.e. a+b) is equal to the short segment B to the length of the section A, the column is a: (a+b) =b:a, the ratio of 0.6180339 ... This ratio is more pleasing in modelling, so 0.618 is called the gold percentage. "We also see what is called the Gold division." There is also a similar concept in our country called the nine palaces. It may be that some of the friends are not clear, this is a rubbing from to write a grid of paper. The basic shape is a long square with nine squares. In the middle part of the nine-grid there are four intersections, and these four intersections are visual centers.

Figure: nine-grid

Well, why are we talking about these two concepts? is because these two concepts are the tricks of the design decision. Many times we like to put important things in the right center, to show that we want to attract attention. But I want to tell you. The center is located in the blind spot. That is to say that the center is often ignored by people's visual habits. and put it in the right center does not cause visual stimulation. To say a joke: Two eyes are not clear. Don't believe your finger pointing at the tip of the nose at your hands. That's where the visual center is, and it's going to use the concept. But what A: (a+b) =b:a are too troublesome who will be so detailed to calculate it. This is much clearer with the nine-grid principle of China. The four visual centers are clearly clear about where they are.

So how do we use it in reality? This is important, and the meaning of combat is much more important than the concept of empty talk. Let's talk about the application in combat, this is the web design technique that can be used in graphic design and photography or other design, but it's the web design that's mostly a Web page. "--this is the homepage. Let's start with a big layout and then talk about small layouts, and then design the layout of the picture.

Large layout Basically the layout of the Web page, upper and lower, left and right, up and down, and up and down the mix of a few. At the same time, we have to think about the resolution and the size of the Web pages. Now most of the machines are more than 1024 resolution, so our degree of forgiveness must have to be a bit more forgiving. It's not necessary to have a personal perspective. Because the web itself also produces a visual comparison with the browser. If it's too full, it will not look good. If the gap between the mesh and the left blank can also form a certain ratio, the proportion is also closer to the gold Division rate. So I think it's better not to plug in the browser to give the web a breathing space. What about the layout of the Web itself? In the same way, if it's just up and down or about the structure we can't split the top and bottom or the left and right, but it's best to use the Gold Division ratio to make the score. If it's in the middle or left or right. We can't share equally, we have to pay attention to the relationship between the three, for example, in the upper and lower structures, we know that the main content needs a great amount of space, so there is a large proportion of the hollow part, generally speaking, we will make the middle 60%. And above accounted for 30%, below accounted for 10%. That is to say, below is the above One-third, above is the middle of three points one. This kind of segmentation will be much more comfortable than the plane looks. But the left-right structure cannot be divided. Because 10% of the degree of forgiveness is very difficult to put under what content. In general, the left-right structure will have another method: Left accounting for 40%, and 30% in the right. Or about 30 of the total, 40% of the middle. You can also do 532, 622, 442, distribution. That is to say, the large layout should be avoided equally.

small layouts can also be said to be layouts on the details. We can think of the web as a combination of many small pieces. It is often noted that the title and the contents of the system and where these pieces are placed. For example, the core content should not be placed at the top, the last, or the middle. But the top and middle of the central position, some people like to rank, and will put the most important to the top, but otherwise ah, on the top is not necessarily the most central position. For example, if we look at the top of the Web site, are there no places at the very top? Of course, because of the resolution problem, these may also change in position. At 800 the head is down, and 1024 is centered, and 1600 is a bit. But from a large view of the browser, these are all at the center of the viewer.

We also use layouts when we are dealing with pictures, such as where our text is placed, where the 疇 are placed, and where they are laid out. This should also be done with the above concept, and the important thing is not to focus on the center or the corner. Of course, there are big things about the center of gravity that are basically all over the screen, so let's take a look at the following:

Look at the point of this picture is that MP4, but this object is very large, but not related to the system, the image of this MP4 to be transparent, the weight is different. Go a little to the left, then the center of gravity goes to the left, plus MP4, this MP4 is right at the point of view. and the main message text is also in the position of the visual center. And some unimportant words are placed in the angle to snub him.

Well, as far as the layout is concerned, there's always something less here, and thinking about it may be a question of the perception of balance. This is a lot to talk about, and to think about the issues of balance, and then just sort it out.