Thinking of web design-the principle of layout

The first step in designing and designing the homepage is to design the layout.

Like traditional newspaper and magazine editors, we look at the web as a newspaper and a magazine for layout. Although the development of dynamic Web technology makes us tend to learn scene writers, but fixed web page layout design is still must learn and master. Their basic principles are common, you can understand the points, extrapolate.

A layout refers to a complete page (which can contain frames and layers) that the browser sees. Because each person's display resolution is different, the size of the same page may appear 640*480 pixels, 800*600 pixels, 1024*768 pixels, and other different sizes.

Layout is the most appropriate way to browse the pictures and text in different places on the page. You may notice that "the best fit" is an indeterminate adjective, what is the most suitable one? I'm sorry Atzie can't and cannot give you a complete and correct answer. Just like someone wants to know what the secret of success is, winners can only suggest what method you use, and which way you can most easily achieve success, and there is no way to have a successful "secret" to tell you.

We are in the design of the series fourth article about the site as a whole of creativity, layout is also a creative problem, but more than the overall site of the idea of easy, there are more laws. Let's take a look at the layout steps first:

I. Draft

A new page is like a piece of white paper, without any forms, frames or conventions, you can use your imagination as much as possible to draw the "scene" You think of (we recommend you to use a blank sheet of paper and a pencil, of course, Photoshop, etc.). This is the creative phase, not exquisite and neat, do not have to consider the details of the function, only to sketch the outline of the idea of a rough line can be. Make as many pictures as you possibly can, and finally select a satisfactory script to continue the creation.

Two. Rough layout

On the basis of the draft, arrange the functional modules you want to place on the page. (Note: The function module we have mentioned in the "Homepage Design-Introduction", mainly includes the website logo, main menu, news, Search, link, banner, mailing list, counter, copyright information, etc.). Note that here we must follow the principle of highlighting, balancing and harmonizing, placing the most important modules, such as site logos, main menus, in the most conspicuous and prominent positions, and then considering the emission of secondary modules.

Three. Finalization

The rough layout will be refined and materialized. (Depending on your wisdom and experience, you can make creative arrangements by insinuating multiple associations.) ）

In the layout process, we can follow the principles are:

1, the normal balance---also known as "symmetry." More refers to about, the upper and lower control forms, the main emphasis on order, can achieve stability and honesty, trust effect.
2, abnormal balance---that is not a control form, but also to balance and rhyme, of course, are uneven, such a layout can achieve the emphasis of sex, unrest, high visibility effect.
3, Contrast---so-called contrast, not only the use of color, tone and other skills to perform, in the content can also involve ancient and modern, new and old, poor and rich and other comparisons.
4, gaze---the so-called gaze is the use of the page in the eyes of the characters, so that the browser followed by the psychological, in order to achieve the effect of watching the page, generally more with star gaze.
5, Blank---blank has two functions, on the one hand to other sites to highlight the outstanding, on the other hand also indicates the superiority of the Web page taste, this method of presentation of the style of the page is very effective.
6, as far as possible use the picture explanation---this method to cannot use the language to persuade, or cannot express in the language the emotion, is especially effective. The content of the picture explanation, can convey to the visitor's more psychological factor.
------------(reprinted from advertising master Shi "Advertising production")

The above design principle, although boring, but if we can grasp and flexibly to the page layout, the effect is very different. Like what:

0 pages of white background, you can add some color fast;
0 layout scattered, you can use lines and symbols in series;
0 The left text too much, the right side can be inserted into a picture to maintain balance;
0 table is too regular, you can use the guide angle to try.

After continuous attempts and scrutiny, your Web page will be bright up OH:

Look at the layout forms we use frequently:

1. "T" structural layout. The so-called "T" structure. Refers to the top of the page for the horizontal bar site logo + ads, the left below the main menu, the right to display the content of the layout, because the menu bar background to teach deep, the overall effect similar to the English letter "T", so we call it "T" shape layout. This is the most widely used form of layout in web design. (Figure slightly)

The advantage of this layout is that the page structure is clear and primary and secondary. Is the easiest way for beginners to. The disadvantage is that the rules are stiff, if the details of color does not pay attention, it is easy to let people "look tasteless."

2. "Mouth" type layout. This is a pictographic saying, is the page generally up and down each have a banner, the left is the main menu, the right to put friendship links, etc., the middle is the main content. (Figure slightly)

The advantage of this layout is to make full use of the layout, the information is large (my home page that belongs to this layout). The disadvantage is that the page is crowded and inflexible. There will be four edges vacated, only with the middle window design, such as NetEase wallpaper site.

3. "Three" type layout. This layout is used for foreign sites, not many domestic use. Feature is the page on the horizontal two color block, the page is divided into four parts, the color block most of the advertising bar.

4. Symmetrical contrast layout. As the name suggests, take a symmetrical layout around or up, half dark, half light, generally used for design sites. The advantage is that the visual impact is strong, the disadvantage is that the combination of two parts is more difficult.

5.POP layout. Pop quotes from advertising terminology, that is, the page layout like a promotional poster, to a beautiful picture as the design center of the page. Commonly used in fashion sites, such as Elle.com. The advantages are obvious: attractive. The disadvantage is that the speed is slow. As a layout is still worth learning.

The above summary of the current network of common layout, in fact, there are many unique layout, the key lies in your creativity and design. For layout tips, here are four suggestions that you can refine yourself:

1. Enhance visual effects
2. Enhance the visibility and readability of copywriting
3. Sense of unity of vision
4. Freshness and individuality are the highest level of layout

The color of the homepage is one of the key to establish the image of the website, the color collocation is the problem that netizens feel headache. Web page background, text, icons, borders, hyperlinks ..., what kind of color should be used, what color should be matched to the best expression of the desired connotation? A little bit of experience here, I hope to enlighten you.