The beauty of UI interface design: Grid system

Article Description: The grid system continues aesthetics.

Grid systems have been applied to the design field for at least 50 years. Grid makes it more enjoyable for the eyes to browse information. From newspapers, magazines, to the mobile phone interface, grid systems permeate all kinds of information communication interface. Let's start with a story. Grid System Exploration Tour!

The birth of the grid system

In the 1692, the newly crowned French king, Louis 14, felt that the French were poorly printed and ordered the establishment of a Royal Special Commission 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.

960 grid System

960 grid system is created by Nathan Smith, in particular, is based on the 960 pixel width, through the division has a regular division, to improve the efficiency of web page development.

The 960 grid system system (or adaptive CSS architecture) was used primarily for rapid prototyping and reduced repetitive monotonous work, but at the moment it began to play a very important role in web design development projects. It will provide a solid coordinate base for your design.

Initially there are two variants: 12 grids and 16 grids. They complement each other to ensure the system's compatibility. Later, more derivatives were produced. The following illustration shows a case of a 16 grid to 3 grids. The web portals of the BBC and Yahoo have adopted a grid system, which is very good at standardizing the information layout and the degree of density of the website.

Some personal site or product display site use grid after more atmosphere, the visual feel more broad. Here are some examples of Web sites:

The grid system guides the layout and white of the page without affecting the personalized requirements of the site. It can be said that the page layout is like a plan, it can outline the quality of the site in advance. Select a reasonable grid for the capacity of the site content. This is not an in-depth description of how to design a Web site using a raster system, and an article can be started if necessary.

With the advent and popularization of large size screens, many websites begin to take the widescreen route, but this does not affect the existence of grid system, on the contrary, grid system has become the basis of multimedia information typesetting. On the mobile side, with the advent of the Flipbord application, the information presentation mode of the magazine typesetting effect is becoming the mainstream form of the content application on pad. The 3x4 grid is the most widely used.

[1] [2] [3] Next page