Principle of layout layout
The first step in the design home is the design of the top layout.
As with the traditional newspapers and magazines, we look at a newspaper, a magazine to make a layout. Although the development of dynamic web technology has begun to tend to learn scene screenwriters, fixed web layout design is still necessary to learn and master. The basic principles are common, you can understand the point, and give it a contrast.
The layout refers to a full page seen by the browser (you can include a frame and layer). 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.
The layout is to discharge pictures and text to different locations in the page that best browsing. You may notice: "The most suitable" is an uncertain adjective, what is the most suitable? Sorry, Abie can't also give you a complete correct answer. It is better than some people hope that the secret of success is, the successful person can only suggest what method you use, what way is the easiest to succeed, and it is impossible to have a successful "secret" tell you.
We are in designing thinking of the series of articles, the overall creativity of the site is also a creative problem, but it is easy to have a regularity than the overall creativity. Let's first understand the steps of layout layout:
A draft
The new page is like a blank paper, there is no form, framework, and conventionally, you can play your imagination as much as possible, draw the "sight" you think (we recommend you with a white paper and one Support pencil, of course, is also used as a picture software Photoshop or the like. This belongs to the creation stage, does not pay attention to delicate and nature, do not have to consider the details, only the creative contours of the rough lines. Do a few more pictures of you, and finally select a satisfactory script as a continued creation.
Two. Rough layout
On the basis of the draft, you determine that the function module you need to place is arranged on the page. (Note: Function Module We have mentioned in "Home Design - Person", mainly including website logo, main menu, news, search, friendship link, advertising, mailing list, counter, copyright information, etc.). Note that we must follow the principles of highlighting, balanced harmony, put the most important modules such as website logos, main menu, and the most prominent position, and then consider the discharge of the secondary module.
Three.
Fine the rough layout is refined and avattern. (Relying on your wisdom and experience, knocking on the side of the side of the association can we make a creative layout.)
In the process of layout, the principles we can follow are:
1. Normal balance - also known as "well". More points, upper and lower control forms, mainly emphasize order, can achieve the effect of setting up honesty, trust.
2, abnormal balance - ie non-comparison form, but also balance and rhythm, of course, is unbearable, this layout can achieve emphasis, uneasiness, high-eye effectiveness.
3, comparison --- so-called contrast, not only using tips such as color, hue, etc., can also involve contrast in ancient and new and old, poverty and rich in content.
4, stare --- The so-called gaze is the use of the person's line of character, so that the viewer will follow the psychology to achieve the effect of the gaze page, generally more stars.
5, blank - blank has two effects, on the one hand, expressed outstanding excellence on other websites, and on the other hand, it also represents the advantages of web level, this performance method is very effective.
6, try to use the picture to explain --- This method is especially effective for emotions that cannot be convinced in words, or use language that cannot be expressed. The contents of the picture explains more psychological factors that can be communicated to the browser.
------------ (Reprinted from Advertising Master Fan Zhiyu "Advertising Production")
The above design principles, although boring, but if we can understand and live in the page layout, the effect is bigger. For example, ○ On the white background of the web page is too virtual, you can add some color;
○ Layout zero, can be connected in series with lines and symbols;
○ There are too many words on the left. You can insert a picture to be balanced;
○ Table is too rules, you can try to try the corner.
After a constant try and scrutiny, your web page will be bright :)
See the form of layout of our regularly:
1. "T" structure layout. The so-called "T" structure. That is, the top of the page is the horizontal bar website mark advertiser, the left side is the main menu, the layout of the content is displayed on the right, because the menu bar background teaches deep, the overall effect is similar to the English letters "T", so we call it "T" shape layout. This is a layout method for the most widely used in web design. (图 略)
The advantage of this layout is that the page structure is clear and the main second is clear. It is the layout method that beginners is the easiest to get started. The disadvantage is that the rule is turtle, if the details are not paying attention, it is easy to "see the taste".
2. "Port" type layout. This is a pictogram, that is, the page is generally up and down, there is an advertiser, the left is the main menu, the right side is a friendly connection, etc., the middle is the main content. (图 略)
This advantage of this layout is to make full use of layout, large amount of information (my home page belongs to this layout). A disadvantage is that the page is crowded, not flexible enough. There is also an empty out of the four sides, only the intermediate window type, such as Netease Wallpaper Station.
3. "Three" layout. This layout is mostly used in foreign sites, and there are not many domestic use. The feature is that the landscape of the page is divided into four parts, and most of the advertisements in the color block.
4. Symmetrical contrast layout. As the name suggests, take the left and right or up and down symmetrical layout, half of the dark, half light, generally used for design sites. The advantage is that the visual impact is strong, and the disadvantage is to make two parts of organic combination difficulties.
5.POP layout. POP leads from the advertising term, which means that the page layout is like a propaganda poster, with a beautiful picture as a page design center. Commonly used in fashion sites, such as elle.com. The advantage is obvious: beautiful attractive. The disadvantage is that the speed is slow. It is also worth learning as a layout.
The above summarizes the common layout on the network. In fact, there are many unique layouts, the key is your creativity and design. For the skill of the layout, you can provide four suggestions, you can scrutinize your own:
Enhance visual effects
2. Strengthen the visibility and readability of the copy
3. Uniform visual
4. Fresh and personalized are the highest levels of layout
The color of the webpage is one of the key to establishing a website image. Color match is a problem that netizens feel a headache. Background, text, icon, border, hyperlink ... What kind of color should be used, what color is best to express the ideal connotation? Abie is here to talk about some experience, I hope to inspire you.
