Reflection on grid design of Web page

Original address: http://andymao.com/andy/post/82.html

Web Design in the dirty, chaotic, poor, we are in the design process often encountered problems. Usually "dirty" is caused by improper use of color, and the bad effect of improper use of color is also divided into: "Flowers, ashes", fancy, disgraced is what is said here "dirty". I have already discussed in some of my earlier articles my views on the use of color in design. Interested friends can check out the color explanation. and "Poor" is basically due to our skills are not skilled enough to produce. For example, the details of the processing is not in place, a local effect produced rough. This can be called "poor", especially when it comes to designing works with 2D effects. But what I am going to talk about today in this article is "chaos." What is Chaos? The chaos here is not to refer to the use of color disorder, nor refers to the content of chaos, but mainly refers to the layout of chaos. I had the opportunity to contact the graphic design, and learned a lot from the graphic design of some knowledge and techniques. "Grid Design" is a theory used in graphic design to deal with layout. So far I've been studying "grid design". Because there is really nothing better than the language can be very concise and clear generalization of the word. This is more like the need to constantly use practice to understand. So many times we are unable to tell. But in the design of this grid is to help us to complete a better work of a very useful tool. For raster design I can not say that is profound understanding, I am here just based on my understanding of raster design, will be used in web design, hope to give more friends a little revelation, perhaps to open some of the ideas of friends.

Simple text is no way to let designers look at the patient, so it is still the old way, using the diagram as the explanation model. This time we use the Web page is Microsoft, IBM, Astro Three company website to explain. I hope that by breaking down the web design of these three companies, I can convey the raster design I understand. Say less, see figure:

We see that Microsoft's Web site design does not have any obvious lines to block different blocks, but when we put a layer of yarn, and then use the solid line to draw each part of the picture, we found that this site is actually in a grid array. So the content of this array is already very obvious, and we found a lot of blocks in the page is so organized, and there are some not together in the block, incredibly there are certain rules. Of course, some people may say, the line is drawn out of course, it seems orderly. The problem here is that our site can be separated by a vertical line. But some poorly designed sites may have a very large number of vertical and horizontal lines, too many of them and are crowded all the time, which means that the layout of the site is too messy. Or is it too organized to be evenly arranged, without contrast, devoid of beauty. In fact, as long as the use of this method to analyze the work of their own design may be able to see the problem.

Let's take a look at the decomposition diagram of IBM's Web site:

We see that IBM's grid is very different from MS's, there are some pretty large grids in IBM, but it's important to note that these grids are actually generated by a small number of blocks at the bottom, and that all blocks can be considered as a horizontal block. We can see from here that IBM's layout design is symmetrical. But this symmetry is not easy to notice on the vertical and horizontal lines. This is a very clever trick.

Let's look at Astro's website, which is more entertaining than the websites of the two companies above.

From these three sites we can see three different styles of raster design, although different, but we can still find that the three will be as far as possible to put the most important information in the visual center point, whether it is on the left or right or the middle, they have got the largest grid area, get enough attention! Our visual center is naturally on top of it!

Speaking of which, I still feel that I have not been able to understand the role of grid design. Here is a call for your friends to mention your views. I will continue to focus on the grid design in the future, hoping to make it more clear in the Web design role!