Website Layout layout Design: Principles and methods of layout design

Source: Internet
Author: User

Web page Production WEBJX article introduction: the experience and method of Web page layout design.

Grasp the necessary methods

When designing , if the designer randomly handles without considering the principle method and the object rule, then a lot of times will appear some not very good result. Although sensibility is a very important factor, design must be emotional, but does not mean that simply rely on emotion can make good design. On the contrary, if the design can take into account the various factors and the use of appropriate methods, then the work will be more appropriate and excellent. In web design, layout design accounted for a very large proportion, you can say that the layout of the good or bad directly determine the success or failure of the page, it can also be said that it is the basis of visual recognition of Web pages. Then in the specific visual design, the layout of what principles and methods?

Create a Grid

Create a suitable grid for the design object. A layout grid is a structure composed of vertical and horizontal lines that can be used to help content structure, which allows objects to create a sense of order. Some people say that the grid is too rigid, the impact of design creativity, I personally think that the grid as a whole large frame, can also be used as a designer to organize text, pictures of the stent, which is equivalent to the basis of the design, there is no good foundation to talk about the excellent design? So the grid not only does not affect the creative play, but can make the designer's thinking rationally comb. Grid use, can better solve the designer on the page of the elements of the positioning of the problem, in this foundation can do a scientific and accurate layout planning. Using a grid at the same time is also one way to make your design more efficient, in the process of translating sketches into design drafts, the main difficulty in layout is how to arrange each element precisely, if it is enough to choose the right grid for design, then the meaning of this starting point can not be underestimated.

Rhythm Rhyme

The rhythm and rhythm of the layout in the Web page comes from the spacing arrangement in typesetting, it is like the beat in the music work, is also an important unit of the organization content. Of course in the painting is also able to embody, but the painting and design works some similar, are through the control of the density of the object to form the rhythm of the harmonious feeling of the picture. In a Web page, you can create a sense of visual harmony through a series of repetitions and fixed intervals, such as the formulation of font size, spacing, distance between modules and modules, and so on.

The vertical rhythm in the web design is more widely used and obvious, such as most information-type sites. Vertical rhythm In this regard to optimize the role of the site is still quite large. What is the vertical rhythm of the Web page? In fact, for the site to set a vertical unit height, like our Notepad, each page is covered with a fixed height of the line. If the text is just at the height of the unit, the layout can achieve a consistent vertical balance and a sense of rhythm. It is clear that a design arranged in vertical rhythm is easier to scan or read because it makes the "appearance" of the content more regular. This method not only applies to the local text content area, for the entire content of the page layout is also useful, of course, in the pages containing complex elements, such as a variety of dimensions of the picture, title, text format, you need to set the height of the unit to do more consideration. However, based on past personal design experience, this precise rhythmic method is not always fully implemented because of the influence of various situations, especially when designing complex pages. However, I personally think that this method is still worth the designers to study the pursuit.

Reflect the level

In fact, there are different levels of relationships in any layout or interface, different organizational structure of content and elements, and content layout level design planning and visual level of design planning is the same principle, visual arts rendering has primary and secondary points, then the level of the layout content is the same as the primary and secondary, for typesetting design time , the designer should put this kind of objective level relationship to the arrangement of the means to restore it. The central role of the layout hierarchy is to improve the visual cues of elements such as text, pictures, and so on to get better interface clarity, simply to make the content easier to read. In the design, you can handle the grading effect by comparing the font size, the text effect, the color block and so on. For example, which words should be bigger, which words should be smaller, which color blocks to heavier, which shallow some ...

It's a headache.

A layout design is completed, take to fill the content found after bad look, serious when the cause of unrecognizable, this is why? Oh! That is because the editor did not follow the layout of the designer to fill the content, which destroys the original layout of the page, no wonder it is not good to see. Therefore, designers should also try to communicate with the editorial staff, and with the design instructions. Because not every editor has a sense of design, sometimes he doesn't understand your concerns, so we have to be strict in order not to make you beat your breast when the work is published.

Summary

It is not a difficult thing to do typesetting design, we can through the font, line spacing, color block, alignment and grid and so on to plan and control, I personally feel that the site layout is also able to communicate with the user, as a designer, we must let this communication remain smooth and pleasant, so that users will like it.



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.