Website Design-Principles of Layout

The first step to design the homepage is to design the layout. Just like traditional editors of newspapers and magazines, we regard webpages as a newspaper and a magazine for layout. Although the development of dynamic web page technology has led us to begin to learn scriptwriter scenarios, the foundation of fixed web page design still needs to be learned and mastered. Their basic principles are common. You can understand the key points and draw the opposite picture.
A Layout refers to a complete page (including the framework and layer) that the browser sees ). Because each person's display resolution is different, the size of the same page may be 640*480 pixels, 800*600 pixels, 1024*768 pixels, and other sizes.
The layout is the most suitable way to view images and text in different locations on the page. You may have noticed that "most suitable" is an uncertain adjective. What is the most suitable? Sorry, Alibaba Cloud cannot and cannot provide you with a complete and correct answer. It is like someone who wants to know what the secret of success is. Successful people can only advise you how to use it and how to get it the easiest way to succeed, but cannot tell you the "secret" of one step of success.
In the fourth article of the design series, we talked about the overall idea of the site. The layout is also a creative issue, but it is easier and more regular than the overall idea of the site. Let's take a look at the layout steps:
I. draft
Creating a page is like a piece of white paper. Without any tables, frameworks, and conventions, you can use your imagination as much as possible, draw the "scene" you think of (we suggest you use a blank sheet of paper and a pencil, of course, you can also use the graphic software Photoshop ). This is a stage of creation, not exquisite and neat. You don't have to consider the details function. You just need to outline the idea with rough lines. Draw a few more images as much as possible, and finally select a satisfactory script for continued creation.
Ii. Rough Layout
On the basis of the draft, arrange the functional modules you confirm to be placed on the page. (Note: The function module we mentioned in "homepage design-Introduction" mainly contains website logos, main menus, news, searches, links, advertising bars, email lists, counters, copyright information ). Note: here we must follow the principle of highlighting the key points and balancing the harmonious tone, and place the most important modules such as website logos and main menus in the most conspicuous and prominent positions, then the emissions of the secondary module are considered.
Iii. Finalization
Refined and specific rough layout. (Only by your wisdom and experience can you make creative la。 s by tapping into multiple associations .)
In the layout process, we can follow the following principles:
1. Normal balance-also known as "symmetrical ". It mainly focuses on order, and achieves stable, honest, and reliable results.
2. Abnormal balance-that is, non-contrast, but balance and rhythm must also be balanced. Of course, they are not balanced. This layout can achieve the effect of emphasizing, uneasiness, and high attention.
3. Comparison-the so-called comparison not only uses colors, tones, and other techniques for expression, but also involves the comparison between ancient and modern, new and old, poor and rich.
4. Gaze-the so-called gaze refers to the use of the line of sight of the characters on the page, so that the viewers follow the same mentality to watch the page. Generally, the stars stare at the page.
5. Blank Space: blank space plays two roles. On the one hand, it highlights the excellence of other websites, and on the other hand, it also shows the superiority of webpage taste. This method is very effective for the style of explicit webpage.
6. Try to use images for explanations-this method is especially effective for emotions that cannot be persuaded or expressed in words. The content of the image commentary can convey more psychological factors to the viewer.
------------ (Reproduced from the AD master fan Zhiyu "advertisement production")
The above design principles are boring, but if we can understand and use the page layout, the effect will be very different. For example:
○ When the white background of a webpage is too weak, you can add some color to it;
○ Scattered layout, which can be connected by lines and symbols;
○ There are too many texts on the left, and you can insert an image on the right to maintain a balance;
○ Tables are too regular. You can try using a guide.
Your webpage will surely shine after constant attempts and scrutiny
Let's take a look at the layout that we often use:
1. "T" structure layout. The so-called "T" structure. It refers to the horizontal Website Logo + advertisement bar on the top of the page, the main menu on the left at the bottom, and the content layout on the right. Because of the deep background of the menu bar, the overall effect is similar to the English letter "T ", so we call it a "T" layout. This is the most widely used layout in web design. (Figure omitted)
The advantage of this layout is that the page structure is clear and the Primary and Secondary are clear. It is the easiest Layout Method for beginners. The disadvantage is that the rules are dull. If you do not pay attention to the details, it is easy to "look tasteless ".
2. "Port" layout. This is a pictogram, that is, there is generally an advertisement bar in the upper and lower pages, the main menu on the left, the friendship link on the right, and the main content in the middle. (Figure omitted)
The advantage of this layout is that it makes full use of the layout and has a large amount of information (my homepage belongs to this layout ). The disadvantage is that the page is crowded and not flexible enough. There are also four sides of the blank, only use the window design in the middle, such as Netease wallpaper station.
3. "3" layout. This layout is mostly used for foreign sites, but not for domestic sites. It is characterized by two color blocks on the page, which divide the page into four parts. The color block contains multiple advertisement bars.
4. symmetric comparison layout. As the name suggests, the layout is symmetric between the left and right sides or between the upper and lower sides. The layout is half dark and half light. It is generally used for design-type sites. The advantage is strong visual impact, and the disadvantage is that it is difficult to combine the two parts organically.
5. Pop layout. Pop refers to the term "ad", that is, the page layout is like a poster, with a beautiful picture as the design center of the page. It is often used for fashion websites, such as elle.com. Advantages: Beautiful and attractive. The disadvantage is slow speed. The layout is worth learning from.
The above summarizes the common network la S. In fact, there are many unique la S. The key lies in your creativity and design. Here are four suggestions for layout skills. You can repeat them by yourself:
1. Enhance Visual Effects
2. Enhanced text visualization and readability
3. Unified visual
4. freshness and individuality are the highest levels of Layout
The color of web pages is one of the keys to building a website image. color matching is a headache for netizens. The background, text, icon, border, hyperlink... of a webpage, what colors should be used, and what colors should be used to best express the expected connotation? Alibaba Cloud is here to talk about some experiences and hope to inspire you.