Design of grid system for Web design

This is an era of information explosion, every day people use the Internet, mobile phones, etc. to receive tens of millions of messages. With the phenomenon of the expansion of information is a problem of the times, people's eyes can not be in the vast and complex information before the focus. How to make it easy for people to see their own information and to bring aesthetic beauty into the task of visual information processing becomes a key problem. The function of satisfying visual information is the primary task, and the aesthetic sense of visual information will be affected when the visual information function is satisfied simply. Just by staying functional, all pages will become dull newspapers, giving people a cheap, boring feeling. And how to make it have beauty, become a difficult problem. Until the grid system has been applied and improved in web design. Grid design makes the information in the Web page meet the features of easy to recognize, hierarchical and so on to make the Web page more formal aesthetic.

　　First, grid system

(i) The significance of grid systems

Grid system (Grid systems) is a layout method, the use of fixed lattice design layout layout, its style neat and concise, easy to repeat, rigorous and without losing beauty. ① because this arrangement is a certain mathematical basis, and in the layout has a status quo ability, so people call it the system.

After the establishment of the Bauhaus design College in Germany in 1919, the design trend of rationality, simplification and function was set up, and the application of grid system was developed. After World War II, the grid system in Germany and Switzerland to improve and gradually affect the world, has become the mainstream of a layout design method. Ii

Before the Web page appeared, the grid design was mainly applied to the paper media. The network age makes the message more time-sensitive and universal. However, faced with the huge amount of information that the Web page needs to carry. The application of grid system in web design not only for simplicity and functional design, but also for web design to give new meaning to grid system.

(b) Principle of grid system fabrication

The design of grid system is the process of dividing the layout of Web pages into regions. For example, a 960px X 600px Web page grid system design, first of all, from the width of the page to start, cell division. A Web page with a width of 960px is divided into 6 grid units with a width of 160px cells. Then adjust the width and spacing of each cell based on what the page needs. Such a grid system has been designed and completed. In reality, the design of grid system is not so simple, and the form of raster design is not only a vertical division.

Grid system in Web design

(i) Information display in the Web page

The information in the Web page is mainly written and image, and the Web page is not like the previous books, newspapers and periodicals. The amount of information in a page is much greater than what a piece of paper can hold. The presentation of electronic information has always been limited.

The width of a Web page must be suitable for the Web carrier--the computer screen and browser restrictions. The width of a Web page cannot be larger than the content display area of the browser. In addition, it is also desirable to find a suitable width under the premise of ensuring the flexibility of the design. On the grid system Research and Web page production experience, web designers summed up a most appropriate page width, that is, "960px."

Computer imaging technology color image is presented in light form, so give people feel less comfortable than paper media and will cause some damage to the eyes. This requires the content of the page page to be clear so that people can easily accept information for visual decompression. Most pages overall layout is longer, the user browsing long time can cause visual fatigue, so be sure to pay attention to the overall page rhythm. A lot of information will make the information more complex and no primary and secondary, so the layout should consciously to highlight important content to make the page rich sense of hierarchy, so that users browsing the page when the idea will be clear.

(ii) Vertical Web grid system

In the web design, according to the common width 960px can be decomposed out of 960 of 26 integer times for the grid design. These 26 integers are "2", respectively. 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480, this is the longitudinal web The page grid system. This kind of raster system is suitable for large portal sites with huge text image information. such as Yahoo, NetEase and so on. ③

The vertical grid system seems to limit the entire area of the page, but in web design designers often use the same area for merging. This will not lose its personality in web design. Not lose their beauty and applicability. In the division of the same time we have to balance the Web page in the balance of power, order beauty and other forms of beauty law.

Web design is always with the hardware changes for the development, with the popularity of widescreen browsers in recent years 960px is also about to exit the mainstream. And designers will also be in the grid system research and Web page production to find a more perfect adaptation to the new mainstream screen grid system.

(iii) Cell grid system

In 2006 Drenttel and Helfand created a grid system with 892 grid forms, based on the common 960*600 ratios of 3x4 cells. Because the system principle and Japan's Tatami segmentation method is similar, therefore also is called "The tatami system". ④

This grid system is a part of the hurdle through the grid of 3 x 4, using this method we can get 3164 kinds of grid methods. This includes, however, a similar grid approach, such as horizontal symmetry or diagonal symmetry. 892 of the ways in the poster are filtered.

The 3 x 4 grid is the most common typical cell grid system, and this segmentation applies to any grid form. This form of segmentation should be carried out on the premise of not being divorced from aesthetics. The cell grid system has a length limit, which holds a smaller amount of information, so it is more suitable for small web sites.

　Three, the aesthetic in the grid system

(i) The rigor of grid systems in web design

Web design can not be separated from numbers, raster systems can not be separated from the numbers. The first thing every web designer touches on the web design first is that the scale of the electronic screen is not measured in terms of the actual scale, but in pixels (px). The smallest unit 1px of pixels is visible, so rigor is essential in web design or grid making. And it is the preciseness of the numbers that makes the grid system a rational radiance.

Rationality is a necessary condition for the function of grid system. In a grid system the form must be attached to the function. So the aesthetic attribute of grid system design is also rational creation.

(ii) formal Beauty in grid systems

The creation of beauty is not perceptual, and the beauty of the rational trend is more pure. The design of grid system needs the aesthetic sense of rationality.

The law of formal beauty, which is based on the human visual law, is a kind of aesthetic law, which accords with the perception of human beings and the influence on human beings. This beauty is a kind of rational beauty, he needs the designer to analyze the factors that form beauty, such as size, position, proportion and so on.

A grid system is like a skeleton in a web design that controls the rhythm of the page. The design of grid system requires the designer to create on the basis of the law of formal beauty. For example, the application of symmetry and equalization in the formal beauty rule can be a page symmetry. The proportion of each cell in the design of grid system if the use of the golden ratio, Fibonacci series and other forms of the United States will make the picture more aesthetic.

　Summarize

The appearance and application of grid system is based on the function and aesthetics, and it can not be separated from the calculation of numbers. Although rigorous but designers can also be in the grid system to play the bold personality, create the enjoyment of beauty.

The Web page itself, with the development of technology, its carrier is expanding beyond the computer screen. Vividly in mobile phones, tablets and other new electronic media. There is also the reform of the computer screen. These all affect the standard of web design. While the standard is changing, the method of raster design will not change. As long as it is necessary to use the form of rational beauty, raster design will always be distributed the brightness of rational beauty.