Web Design tips: A grid system for learning web design

Article Description: grid system is a good habit, but also a format of the design tool. With it, you can focus more on content presentation and focus on emphasis.

The grid ensures that the design structure is organized and clearly structured. We can better build the information level of the design through the grid system, make the design read more rhythmic. As with coding, coding requires an organic organization, and web-design grid systems play the same role.

The grid system Designer is comfortable to use, and the developer is good at it, of course, it is also helpful to the user. I've been stressing that design has to be about the user experience-after all, the customer is consuming your content, so you have to provide them with a valuable experience. Using a sturdy grid system can be a great help, not only to keep the design consistent, but also to better guide users.

If your site is well designed, you can use the grid to make your site go further and make it more enjoyable for users to browse. But one thing to note, the grid system does not mean that the rules, blindly follow the grid lines to the layout. With responsive design, flexibility is the biggest feature of the grid system, and the grid system is more flexible in helping you order your layout rather than limiting your design.

What is a grid system?

Contains a horizontal and vertical reference line to arrange the content reasonably.

The most basic grid system consists of a series of horizontal and vertical intersecting guides, which make the layout of the content simple and make the content more readable.
Grid system in the paper media widely used, has a long history, introduced to the web design, there are many CSS grid framework, almost become the standard of web design.

The use of grid system can better control the content and maintain consistency. The uniformity of the layout, the consistency of the natural, so that the navigation function can be more easily used, a good user experience also has. You can also break the grid system, replace it with a better layout, or derive your own layout from the grid system.

Popular Science 960px grid system (http://960.gs/), also known as the 960 grid layout, for several years as a web designer's favorite, is used to build Web sites and design page layout. 。 This is undoubtedly a very good grid system because it is quite flexible. It helps web designers quickly construct a layout prototype for the following number of fences: 9 x 3, 3 x 3 x 3, 4 x 4 x 4 x 4, x 2 and so on. The 960 grid system is probably the most popular grid system now and has been used on many web sites and design templates. such as Sina, NetEase, Sohu and so on.

Example, the Gerstner, is included in the Gridset App
Users do not see grid systems, and few of them can understand the importance of grid systems. There is an old saying that the rules are to be broken. No need to adhere to the form of grid systems, we use the grid system just to understand the layout of the concept and methods, then we can carry out "revolution", innovation.

Online can find a lot of suitable grid framework, of course, we can also create their own. Moreover, it is worth mentioning that the design of grid framework is an excellent thinking training, can let us deeper understanding of the layout, better training in thinking, think will be further.

Benefits of using grid systems

A lot of benefits-design, development, management sites are used.
One of the benefits of grid systems is that they allow for proportional design and can organize a sense of balance between different elements. Grid systems are generally flexible, so they can be adjusted freely when needed.

PS in the reference line

With a grid system, you have a sense of formal and normative design, and a well-structured design. This makes it easier for you to design, as well as for developers.

The disadvantage of grid system

If there are good and bad, let's talk about shortcomings.

First, a lot of people, especially for beginners--grid systems can hinder their creativity. You will feel that your inspiration is tied to these rules. If this happens, I suggest you jump out of the grid system, with their own ideas to design, according to their own experience to arrange elements, and then cut out the grid system, come up with a combination of the two ways, a little adjustment, if the grid system and your original design access too large, can not effectively coordinate, It is recommended that you change a grid system or design one yourself.

Secondly, the grid system is difficult to use, there is a certain cost of learning, need to have a certain mathematical basis, you have to understand the proportion, will be calculated. For those who are not good at math, the grid system is really too complicated. But I think, at the beginning although more difficult to use, but after the habit, you will be handy, the design will be more brilliant.

Application of grid system in design:

A few small suggestions:

Use overlapping grids in your design (gridlines to be visible):
If you like to use the CSS grid framework, that's great, whether it's PS or something, set the grid to overlay, and lock it. There are a few in mind when designing this way.

To set a reference line:

After you have an overlay grid, set up the columns guides. This will allow for a clearer delineation of boundaries.

Try a limited design.

Up to 16 columns, 6 column layout wisest.

Athletes are bound with sandbags when they practice, with limited practice, then take off the comfort and run faster.
So you can try to discipline yourself and practice the layout under restricted conditions so you can focus more and make more progress.

Pay attention to space problems

The greater the width between each column, the richer the space left to the element. But don't forget the spatial layout in the vertical direction. Is it close or full of white? This needs to be determined by the circumstances.

Conclusion

Now you've got a sense of the grid system.
You can try to do more planning before the design, so that the grid system to use more handy, more smooth layout, think more about the structure, think about how the layout of columns to plan the content.

Grid system is a good habit, but also a format of the design tool. With it, you can focus more on content presentation and focus on emphasis.

Original address: webdesign excellent network translation: @MartinRGB