Continuous aesthetics of grid system

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.

The change of 3x4 grid

As early as more than 1300 years ago, Bill Drenttel and Jessica Helfand to use this split-layout relationship in the tatami of Japanese architecture. (Tatami, the old said "folding seats", originated in ancient China, is a room for people to sit or lie a furniture. It was passed to Japan and became the material for laying floors in its traditional room "and room", becoming the place where Japanese families used to sleep, that is, the Japanese bed. http://baike.baidu.com/view/286931.htm)

The rectangle formed by the 3x4 lattice can be divided into 892 different cell forms. Over the years, designers have used grids to make content appear repeating-books, magazines, screens, and many other areas, and the variety of layouts is beautiful. 3X4 is a common example. However, even in this simple example, there are many forms that are unimaginable. Patch Kessler uses algorithms to generate the following large graphs, not only for 3x4 grids, but also for any nxm grids.

In 2006 Drenttel and Helfand obtained a method of Modularization of the American patent 7124360--computer screen layout system. tatami system for rectangular rectangular, through the 3x4 grid (1x1, 1x2, 1x3, 1x4, 2x2, 2x3, 2x4;3x3, 3x4), you can get 3164 kinds of segmentation methods.

The 3x4 grid is widely used in the content of pad application typesetting, this division is not much, more in line with the visual white and visual space of comfort.

In the law of the columns: both vertical and horizontal divisions have two columns, three columns and four columns. A picture or title can be displayed in hurdle. This makes the title more informative than the visual hierarchy of the content.

In combination: Not only the conventional segmentation, but also the upper and lower two layers of the possibility of combination. For example, the bottom right corner of the interface, the upper and lower two tiers, respectively, three columns and two columns.

Reading such an application, you will feel like reading a newspaper, and you will find that it is easier than reading the newspaper, the layout of each page is almost not repeating, read such a magazine to explore the feeling more intense.

The forces of the interface layout

Everyone knows the Metro UI, and in the main screen of Windows Phone 7, the application's entrance consists of two columns of color. This method of information segmentation is basically consistent with the principle of tatami. This makes the flat information interface has a free, personalized way of combining.

Iida InfoBar A01 Mobile Interface Design also continues this design idea. In the mobile demo video, the deep custom Android phone will turn the home page into an application module puzzle.

Some areas of application have real-time information, but you don't feel cluttered with the interface.

In the image browsing process, this separation creates a more natural and hierarchical presentation. Video viewing http://v.youku.com/v_show/id_XMjY3ODgyMjEy.html

Postscript:

For a UI interface, layout is the first step in design, which determines the temperament of the design and so on. The grid system has been in the field of UI design for more than more than 50 years and has been proven to have the most reasonable layout principles. I hope this article can give you a simple revelation.

Resources:

http://www.cameronmcefee.com/guideguide/

Http://thomasgaskin.com/1097344/3-x-4-Grid-Poster

http://www.robbiemanson.com/resources/960px-grid-templates/

http://www.thegridsystem.org/

Http://www.dubberly.com/wp-content/uploads/2011/03/3x4variations-poster.pdf

Http://www.mechanicaldust.com/Documents/Partitions_05.pdf

Article Source: Baidu MUX Reprint please indicate the source link.