Improve the efficiency of thematic production through grid systems and modularity

With the company's business continues to grow, activities such as the tide, the topic like the sea. How can the newly developed cued grow up healthily? The concept of thematic automation automatically emerges from the forehead.

To achieve this complex system must also be step-by-step, initially we hope that through the grid system and modularity, improve efficiency, save production costs.

One, 960 grids

1. What is a grid system?

Grid system in English as "grid systems", is a graphic design method and style. The use of fixed lattice design layout, its style neat and concise.

2. Why is 960px?

A more intuitive saying: Apple Computer 1024 x 768 resolution, the size of the Firefox form is about 974x650. Minus the left and right sides of the 7px border, the actual size of the page is the red part of the above figure, width for 960x650.

Take a look at several examples of grid use:

The old version of the Thunder Home and Channel page application grid system, you can see that there are problems, there is room for improvement in the future.

Why use a raster system? "Beyond CSS" summarizes the following advantages:

1. Can greatly improve the standardization of Web pages. In a grid system, the dimensions of all the components in a page are regular. This for large-scale website development and maintenance, can save a lot of cost;

2. Based on the design of the grid, you can make the entire site the layout of each page consistent. This can increase the similarity of the page, improve the user experience;

3. For designers, the flexible use of grid systems, can make a lot of excellent and unique design.

Many large web sites do not use grid systems, so where is it used? So I think the grid system should be a kind of standard that can adapt oneself business, can help us to improve the quality of the company's product in the actual work. And in our activities and thematic needs, if there is a reasonable grid, I believe that can save a part of the time spent thinking about the prototype, but also to make the topic layout more standardized.

Second, modular

What is modularity? What are the pros and cons? elder brother and other predecessors have summed up countless experience. A simple example:

Container and performance, content separation can be more easily later expansion and maintenance, especially in the topic often have a small structure changes, visual performance transformation of the big situation:

Design a good CSS framework, the rational use of modularity, the first step towards semi-automatic.

Thematic automation can reduce the demand side, design, reconstruction, development, testing and other aspects of costs, but also to meet the emergence of emergency needs. Of course, also need a lot of practice and research, use in a variety of daily topics, the final implementation of simple operation, a key release.

To borrow a short blog: The success of the product is the simpler the better, but this does not mean that the technology behind the product is very thin, on the contrary, due to the complexity of the background technology and intelligence, so that users to use the product simple enough and powerful.

Author: Huang

Article Source: Thunder User Experience Center