The basis of typesetting and layout in web design

Design | Web Page design

Some people always think that the main content of the Web page, do not need to do something on the façade, but also take out a mud metaphor. However, Safflower also need green leaves foil. Think, if the mud is not just a simple text, and the picture out, then, it attracts more than the current mud fans? So, what do I have to say? If beginners can understand some of the design of things, then, their own pages will not appear chaotic, they have seen the happy, others have seen also happy, why not?

Our homepage, in the final analysis, is only a 800*600 picture, then, how can we arrange it to be reasonable? First, and most important, is to stop writing first, think of a theme first? quot design is a purposeful creation. If you don't know what you're going to do and how to do it before you do it, but just by manipulating the Photoshop filter to achieve a special effect, then the final thing to do is to look pretty good at the most part, but the overall situation is too complicated. The composition on the page, if want to let other people look to feel very beautiful, this inside actually has very big knowledge.

Let us first say the composition, "Composition: is the modelling according to the visual effect, the visual mechanics and the spirit mechanics and so on the principle composition, has the beautiful form modelling". In the form of composition, there is a space composition (plane composition and three-dimensional composition) and time composition (static and dynamic). Our creation, is to coordinate the various relations inside, adapt to the visual feeling, can impress the viewer's vision, get the effect we want. In these form forms, there are the following parts: point: We generally think that the point refers to the circle, but this is not true. As long as there is a very small area in space, can not form a visual sense of the graphic, are a point. Any shape is OK. Lines: Points are assembled together to form a line. Surface: a plane. Body: an object. Generally refers to the space occupied by objects, there are three-dimensional shape.

So how do they coordinate when dots, lines, faces and bodies are assembled on a page? What's the difference between them?

Point has the focus of sight, tightening space, attention-causing function. Two points are not far apart and the shape is unequal, generally from small to large look. A near-distance point causes the face to feel. The flexibility to use points can make your page some of the changes in nature. When a point occupies a different space, it causes a different feeling.

(1) The center causes the visual concentration attention.

(2) on the cause of falling down feeling.

(3) in the upper left or upper right to cause unrest.

(4) below the midpoint, creating a sense of sureness.

(5) lower left lower right, increase the dynamic.

Why is that? Because the person's vision, all is through to the life feeling all comes. In the bottom of things, the General association with the Earth. In the top of things, generally associated with clouds. Line, face, body and so on.

Lines, and are divided into straight lines and curves. Straight line: Give a person a sense of speed, clarity and sharpness, with a masculine feeling. Curve, it is graceful and brisk, rich in melody. The use of the curve is different and needs to be combined. And the line is divided into slash, horizontal and vertical lines. Horizontal line represents smooth, stable, broad, with a sense of sureness. Vertical line has a strong rise and fall trend, can increase the dynamic. Slash, generally I do not how to use, because it creates an unstable vision.

When people see a thing, they try to use anyway to analyze, oblique, crooked is people do not want to opinion, but the proper use of this depends on the personal feeling. Face, refers to the two-degree space in the shape. Face is divided into geometrical and arbitrary shape, I personally prefer arbitrary, because it to more humane. Geometry gives people some sense of mechanics, but in every shape you use geometry, see what they represent:

(1) Circle: Sports and harmonious beauty

(2) Rectangle: Simple and clear, stable

(3) Parallelogram: The sensation of moving to one side.

(4) Trapezoidal: The most stable, reminiscent of the mountains.

(5) Square: a steady expansion.

(6) Positive triangle: steady expansion.

(7) Inverted triangle: instability, dynamic and expansion, fantasy.

What we see in our daily life is due to the relationship between shape and shape, diagram and bottom. The differences between the graphs and the bottom of the graph are being accepted by us as a result of the contrast. The larger the disparity between the graph and the bottom, the clearer the graphics and the greater the impact on the vision. So, there are so many things on the plane, how can I be sure that it is the most important? See: Easy to become the "Vision Center" conditions:

(1) Living in the picture center.

(2) The vertical or horizontal ratio of the tilt becomes more easily the center.

(3) be surrounded.

(4) relative to other graphics larger.

(5) The color sense element is strong.

(6) The familiar pattern, if this thing we are very familiar with, will certainly take it as the focus.

You can think of the most important things bigger, prominent point, a little more colorful, other things small and tonal not so clear-cut, so as not to rob the theme of the "Thunder". Note: The relationship between the graph and the bottom is very important. If we determine the background, then determine the subject, and then set the relationship between the graph and the bottom to 1:1 when we do the page, then we may find that the force field of the bottom and the graph is fiercely contested, that is, sometimes the bottom is what we think is the graph. The relationship between them is only relative, not absolute. Generally speaking, the bottom is larger than the figure, and the figure is Sainus.

A picture, how do we think it is beautiful? This involves the organic combination of form, sound and color, which impress the visual perception, and make the viewer have the resonance of beauty. In general, there are several points: (1) Stability: Our visual perception is always trying to find a balance, and if we can't find it, it creates chaos. (2) Symmetry: The corresponding parts of the same, easy to produce in a unified sense of order, but relatively monotonous, can be used to increase the local dynamic potential of the method to achieve a clear and vivid results. (3) Asymmetric balance: can be balanced as the basis for adjusting the size of the morphological structure. or in different shapes, by visual judgment, placed in a definite position to get the desired balance. This is related to the aesthetic of the individual.

In fact, through some of the above methods, we are primarily to create order so that mutual things can work in systems that do not interfere with each other. The contrast between chaos and order evokes our visual perception, and we establish order in confusion through balance, proportion, rhythm, and coordination, forming our own style. form the unique temperament of their own works. And if you pay attention to the rhythm of their works, that is, melody, can be achieved through an important keynote, for the entire page should have painted Dragons point clear effect. But be aware that not all rhythms have a rhythm, and sometimes it's the same thing when you hear some music and think it's rubbish.

The melody must have the emotion factor, the rich change but the unification rhythm and the overall harmony. Flowing melody, lively, sprightly, free, changeable, vibrant. It should also be noted that repetitive, ZHOUERFU, simple, or gradual repetition gives a visual impression, but too monotonous can make people tired and boring. It is necessary to search for the perfect combination of movement and stillness in the repetition, to seek the contrast between simplicity and complexity, subtlety and unrestrained, orientation and direction, and to explore more, learn from, and change in the form of composition. The following are some of the ways to do this:

(1) The unification of homogeneous elements, this is easier, as long as their own more groping on the line.

(2) Similar elements unified, similar in size, color brightness similar to it.

(3) Different elements of unity, due to the formation of contrast, it will generally form a contrast, resulting in a fragmented, not unified feeling, to make it produce rhythm, is generally in order to form a strong focus on the use. In short, we have to remember this: in the same to seek change, unity in the different, so that most of the same, so that a small number of differences, can achieve unity and change of feeling. However, also pay attention to the size of the difference. The difference is to break the law and form a contrast, rich in change. However, the difference is too large, easy to lose overall coordination, too small easy to be submerged by the law, the attention to grasp the scale, with the overall perception of the appropriate contrast.

How can we make people feel that our pictures are in harmony? The method is as follows:

(1) to retain a similar or approximate factor, the natural transition

(2) Mutual infiltration

(3) Using transition shape

In contrast, there must be careful choreography, as follows:

(1) The direction of comparison in the basic direction of the premise, most of the same, a small number of different can be formed by contrast

(2) Position contrast in the arrangement of the page not too symmetrical to avoid flat plate. The equilibrium should be found in asymmetry, thus the density is compared.

(3) The actual contrast between reality and reality is equally important, painting black white out, make the bottom of the plan. Should pay attention to both sides balance.

(4) The contrast between the hidden and the bottom of the comparison, the degree of difference in the obvious, the degree of difference between the small hidden. Explicit and implicit complement each other, can create a rich sense of hierarchy.

In the sense of space, you can form a different sense of space by the arrangement of dots, lines and planes. such as the following methods:

(1) overlapping

(2) Size

(3) tilt, rotate, depth

(4) Bending

(5) Lightness

(6) Projection

(7) Perspective