Website Design Thinking: Web site layout page layout theory

Intermediary trading SEO diagnostic Taobao guest hosting technology hall

The first step in designing a homepage is to design layouts. Just like a traditional newspaper and magazine editor, we treat the page as a newspaper and a magazine for typeset layout. Although the development of dynamic web technology makes us begin to tend to study the screenwriter, but the fixed web page layout is still based on the need to learn and master. Their basic principle is common, you can understand the essentials, from top to bottom.

Layout refers to the browser to see a complete page (which can include frames and layers). Because each person's monitor resolution is different, so the same page size may appear 640 * 480 pixels, 800 * 600 pixels, 1024 * 768 pixels and other different sizes.

Layout, is the most suitable way to browse pictures and text in the page at different locations.

You may notice that "best fit" is an indefinite adjective and what is the best fit? Sorry Apage did not and could not give you a complete and correct answer. It's like someone hoping to know what the secret of success is, what the winners can only advise you on, and what avenues you can make the most easy to succeed, and you can not tell you the "secret" of success.

We talk about design ideas in the fourth article of the site of the overall creative ideas, layout is also a creative layout issues, but more than the site overall creative easy and regular. Let us first understand the layout layout steps:

I. Draft

Create a page like a piece of white paper, without any form, frame and conventions, you can maximize your imagination, you want to draw the "scene" (we recommend that you use a white paper and a Pencil, of course, used to map software such as Photoshop can also). This belongs to the creative stage, do not pay attention to delicate and neat, do not have to consider the details of the function, only the rough outline of the creative outline can be. Draw as many pictures as you possibly can, and finally choose a satisfying script to continue creating.

Two rough layout

Based on the draft, arrange the functional modules that you are sure need to place on the page. (Note: The function module we mentioned in the "Home Design - Introduction", mainly contains site logo, main menu, news, search, links, banners, mailing lists, counters, copyright information, etc.). Note that here we have to follow the principle of focus, balance and harmony, the most prominent module of the site logo, the main menu, the most prominent, the most prominent position, and then consider the secondary module emissions.

Three

The rough layout, detailed. (Based on your wisdom and experience, you can make creative layouts by tapping into multiple associations.) In the layout process, we can follow the principles of:

1, the normal balance --- also known as "well-proportioned." Multi-finger about the upper and lower control form, the main emphasis on order, to achieve stability and honesty, the effect of trust.

2, abnormal balance - that is, uncontrolled, but also to balance and rhythm, of course, are not uniform, this layout can achieve the emphasis, restlessness, high-paying effect.

3, the contrast --- the so-called contrast, not only the use of color, color and other techniques to make the performance, the content can also be related to the ancient and modern, new and old, poor and rich contrast.

4, gaze --- the so-called gaze is the use of page characters in sight, so that visitors follow the follow the psychological, in order to achieve the effect of watching the page, the general use of stars staring like.

5, blank --- blank has two roles, on the one hand outstanding outstanding performance on the other sites, on the other hand, also said that the sense of superiority of the page grade, this method of expression on the style of the body is very effective page.

6, try to explain with pictures --- this method can not be persuasive with language, or the language can not express emotion, especially effective. Picture explanation content, can convey to the viewer more psychological factors.

------------ (Reprinted from the advertising master Fan Zhiyu "ad production")

The above design principles, although boring, but if we can understand and apply to the page layout, the effect is quite different. such as,

○ Web page is too empty white background, you can add some color fast;

○ scattered layout, you can use lines and symbols in series;

○ too much text on the left, you can insert a picture on the right to maintain balance;

○ Form too rules, you can use the lead angle to try.

After continuous attempts and scrutiny, your website will be bright up :)

Take a look at our frequently used layout layout:

1. "T" structure layout. The so-called "T" structure. Refers to the banner at the top of the page banners banner ads, below the main menu on the left, the right shows the layout of the content, because the background of the menu to teach deep, the overall effect similar to the English letter "T", so we call the "T" layout . This is the most widely used web design layout. (Figure omitted) The advantages of this layout is the page structure is clear, the primary and secondary clear. Is the easiest beginner layout method. Drawbacks are rigid rules, if the details do not pay attention to color, it is easy to make people "see tasteless."

2. "mouth" type layout. This is a pictorial view, that is, the page generally has an advertising banner up and down, the left is the main menu, the right to put the friendship connection, the middle is the main content. (Figure omitted) This layout has the advantage of making full use of layout, large amount of information (my home page belongs to this layout). The disadvantage is the page is crowded, not flexible enough. There are also four sides vacated, only the middle of the window-type design, such as NetEase wallpaper station, the little good studio.

3. "Three" type layout. This layout is more used for foreign sites, not much domestic use. Characterized by two horizontal color pages on the page, the overall page is divided into four parts, most of the color bars put ads.

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

5.POP layout. POP quoted from the ad jargon refers to the layout of the page as a posters, with a beautiful picture as the design center of the page. Commonly used in fashion sites, such as ELLE.com. The advantages are obvious: pretty attractive. The disadvantage is slow. As layout or worth learning.

The above summary of the current network layout, in fact, there are many many unique layout, the key lies in your creativity and

designed. For layout tips, here are four suggestions that you can consider for yourself:

1. Strengthen the visual effects

2. Enhance the visibility and readability of copywriting

3 sense of unity of vision

4. Fresh and personality is the highest level of the layout

This article starting small grace studio (www.xiaoguai.net.cn) welcome cooperation and exchange