Shulou(Shulou.com)06/02 Report--

What this article shares with you is about how to analyze the raster design of a web page. The editor thinks it is very practical, so I share it with you. I hope you can get something after reading this article. Let's take a look at it with the editor.

Dirty, messy and poor in web design is a problem that we often encounter in the process of design. Usually "dirty" is caused by the improper use of color, and the bad effect of improper use of color is also divided into: "flower, gray", gaudy, gray face is the so-called "dirty". I have already talked about my views on the use of color in design in some earlier articles. Interested friends can refer to the "Color explanation". And the "poor" is basically due to our lack of skill. For example, the details are not handled properly, and a local effect is made rough. This can be called "poor", especially when dealing with designs with 2D effects. But what I want to talk about in this article today is "chaos". What is chaos? The chaos here does not refer to the use of color disorder, nor does it refer to the content disorder, but mainly refers to the layout disorder. In the past, I had the privilege of coming into contact with graphic design, and learned a lot of knowledge and techniques of graphic design. Among them, "grid design" is a theory used to deal with layout in graphic design. So far I am still working on "grid design". Because there is really no good language to summarize the word very succinctly and clearly. This is more like the need to constantly use practice to understand. So a lot of times we can't talk about it. But in the design, this grid is a very useful tool that can help us to complete better works. I can not say that I have a deep understanding of grid design. I just use it in web design based on my understanding of grid design, hoping to give more friends a little inspiration and perhaps open some friends' ideas.

Simple text is no way for designers to read patiently, so it is still the old way to use diagrams to explain the model. This time we use the web pages of Microsoft, IBM and ASTRO to explain. I hope that through the decomposition of the website design of these three companies, I can convey the grid design that I understand. Cut the crap and look at the picture:

We see that there is no obvious line in Microsoft's website design to distinguish different blocks, but when we put a layer of gauze on it, and then draw each part with a solid line, we find that the site is actually in a grid array. So the content in this array is already very obvious, and we found that many blocks are so organized on the page, and some blocks that are not together actually have certain rules. Of course, some people may say that they are all drawn with lines, and of course they are organized and neat. The problem is here, our websites can be separated by vertical and horizontal lines. However, some poorly designed websites may have a very large number of vertical and horizontal lines, too many vertical and horizontal lines and crowded all the time, which shows that the layout of the website is too messy. Or too organized and become average layout, no contrast, lack of beauty. In fact, as long as you use this method to analyze your own design, you may be able to see where the problem lies.

Let's take another look at the breakdown diagram of IBM's website:

We see that the grid of IBM is very different from that of MS, and there are some grids of about the same size in IBM, but it is important to note that these grids are actually generated by a few small blocks at the bottom, and these blocks can also be regarded as horizontal blocks. We can see from here that the layout of IBM is symmetrical. But this symmetry is not easy to notice in the vertical and horizontal line. This is a very clever trick.

Let's take a look at ASTRO's website, which is more entertaining and interesting than the websites of the above two companies.

From these three websites, we can see three different styles of grid design, although they are different, but we can still find that all three will put the most important information on the visual center as much as possible. whether on the left, on the right or in the middle, they all get the largest grid area and get enough attention! Our visual center is also naturally focused on it!

The above is how to analyze the raster design of the web page. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.