Grid your Web page

The formation of grid system

In 1692, the newly crowned French king, Louis 14, felt that French printing was passable, and ordered the establishment of a Royal Special Committee for the management of printing. Their first task is to design a scientific, reasonable, and functional new font. The Committee was led by the mathematician Nicolas Gazon (Nicolas Jaugeon), who based on the Roman, uses the square as the design basis, each font square divides into 64 basic square units, each square unit again divides into 36 small lattice, thus, a printing page has 2,304 small lattice composition, In this rigorous geometric grid network design font shape, layout, test transmission function of the performance, this is the world's first font and layout of the scientific experiment activities, but also the first prototype grid system.

Raster system in English as "grid systems", but also translated as "grid system", in fact, is one thing. But the definition says, grid is more accurate, from Wikipedia, the definition of grid is: Grid design system (also known as grid design system, standard size system, program layout, Swiss graphic design, international plane design style), is a graphic design method and style. Using a fixed lattice layout, its style is neat and concise, popular after World War II, has become one of the mainstream styles of publication design today.

Grid system in Web design

I define the Web grid system as follows: a regular grid array to guide and standardize the layout of the page and the distribution of information.

The Web grid system is developed from the planar grid system. For web design, the use of raster system, not only can make the information of the Web page more beautiful and easy to read, more usability. Moreover, for front-end development, the Web page will be more flexible and standardized.

Grid systems are increasingly being used in web design today, and a Web site that collects an article on grid applications: 30 top-tier blog web design based on grid systems.

Design principle and application of grid system

So how do you design a grid system? Next we will pass the example, detailed introduction Web page grid system principle and the application:

In web design, we divide a page with a width of "W" into N grid units "a", and the gap between units and units is set to "I", at which point we define "A+i" as "a". The relationship between them is as follows:

W = (AXN) + (n-1) I

Because of A+i=a,

Available: (AXN) – I = W

This formula describes the relationship between the layout of the Web page and the grid system behind the Web page. Let's take Yahoo as an example and look at the application of grid systems:

Yahoo website page width is w=950px, each block and block interval for i=10px; If the formula above, you can launch the a=40px, both the Yahoo Home landscape layout design using grid system for:

(40XN)-ten = W

Here we list the numerical tables for w changes when n equals different values:

It can be seen from the table: the layout of the Yahoo home page is entirely in accordance with the grid system design, the width of each block corresponding to the N value: 4,11,9. Here we see a very interesting thing: as long as you guarantee that the N value of each chunk of a horizontal dimension is equal to 24, you can guarantee that the width of the page must be 950px. However, the width of the 950px also happens to be the width value of W when n=24. Thus we draw the following application pattern:

In grid systems, designers make different layouts or blocks according to their needs, and their basis will be to design the corresponding table above. Thus, the application of a grid system will begin. We see that web design using raster systems is very organized and looks comfortable. Most importantly, it defines a standard for the page structure of the entire site. For visual designers, they don't have to worry about a width or height to design a site for each page. For front-end development engineers, the layout design of the page will be completely normative and reusable, which will greatly save the development cost. For content editing or advertising sales, all ads are regular, generic, they no longer have to make a set of different size of the advertising map ...

Of course, as long as you want, we can derive any kind of grid system, just change the value of a and I, this according to the actual situation of the site to make. So how to select the appropriate grid system, the design elements are realized in proportion and harmony by "composing elements and procedures, restriction and choice, proportion of constituent elements, combination, imaginary space and combination, relations between four edges and axes, three laws, circles and compositions, and levels constituting these designs." It's more esoteric, and we're not going to elaborate on it here.

Oh, said a lot of grid system advantages. You may ask: is the grid system really perfect? The answer is no: the grid is not possible at a high level for a page with a high degree of uncertainty about the content information being uncertain. Of course, the specific situation needs to be specific analysis and resolution, which requires designers in the practical application of continuous experience, and constantly practice.