The grid system gives designers an intuitive reference in terms of page layout and size setting. It makes page design regular, thereby reducing design decision-making costs and improving page layout consistency and reusability. This article mainly focuses on what is a grid system, how to build a grid system, and the application of the grid system. Defining the grid system in advance in the project will help the collaborative designers to output pages with highly uniform element spacing. , I hope it will help you who are learning about grid knowledge! ! !
1. What is a grid system
1.1 Grid unit
A grid is a grid system composed of a series of regular small grids, which constitute the smallest unit of a page. In web design, the size of the grid is often defined as 8, which not only conforms to the even-numbered idea but also matches most mainstream display devices. Currently, the front-end open source component libraries are mostly designed based on the atomic unit of 8.
1.2 Column+Gutter ( Column+Gutter )
The grid system is formed by alternating columns (Columns) and Gutters (Gutters). Columns are the number unit of grids. Usually, setting the number of grids refers to the number of columns. For example, 12 grids have 12 1 column, 24 grids have 24 columns. Gutter The spacing of the page content. The larger the value of the Gutter, the more white space is left on the page, and the looser the visual effect; on the contrary, the more compact the page is. Slots are usually set to a fixed value.
1.3 Box/Area
After the basic grid is established, a piece of content usually occupies the width of several columns and columns. We understand this area as a content box, which is used to carry the content of an area.
2. How to build a grid system
2.1 Determine the width of the grid area
Taking "full screen" in the global control layer layout of "Interaction Specifications Frame Layout Makes Page Modules More Uniform" as an example, the width of the grid area = responsive area – margin*2.
Take the "fixed width" in the global control layer layout of "Interaction Specifications Framework Layout Makes Page Modules More Uniform" as an example, the width of the grid area = the responsive area.
2.2 Determine the number of columns and the width of the slots
Common grid systems are usually divided into 12 grids or 24 grids. The area of the slot cannot place content. We will set a constant value for the slot to determine the size of the column.
Calculation formula: Grid area width = n*(degree of column width + width of slot) – width of slot.
Recommended rasterizer: GridGuide
12 grid system:
The 12 grid system is widely used in the popular front-end development open source tool libraries Bootstrap and Foundation, and is suitable for middle and back-end page design with less business information grouping and large information volume in a single box.
24 grid system:
The 24 grid system is suitable for middle and background page design with large amount of business information, many information groups, and small information volume in a single box. Compared with the 12-grid system, the 24-grid system is more flexible and more suitable for scenes with diverse and complex contents.
3. Application of grid system
3.1 Horizontal division
Taking the 12-grid system as an example, the grid area can be easily divided into 2 equal parts, 3 equal parts, 4 equal parts, and 6 equal parts according to business scenarios, as well as various unequal division scenarios based on the combination of equal division modules. .
Taking the query page as an example, "Filter Area" is divided into 3 equal parts, "Data Statistics" is divided into 3 equal parts, and "Data List" is divided into 1 equal part.
3.2 Vertical division
The vertical division takes 8 as the basic spacing, and divides the information hierarchy through three specifications: 8px (small spacing), 16px (medium spacing), and 24px (large spacing).
In the case where these three specifications are not applicable, the information hierarchy can be opened by adding or subtracting multiples of the "basic spacing", or adding elements (dividing lines). Calculation formula: y = 8 + 8 * n (n >= 0, y is the vertical spacing).
"Summarize"
In a project, multiple designers are involved to complete the project collaboratively. Since the artboards used by each designer are not necessarily the same, it is recommended that the "unified artboard" size is 1440, according to the "global control layer", "content layer", The layout of each layer of the "temporary layer" further determines the overall layout of the project, so that the participating designers have a unified page layout basis. After completing the design according to different business scenarios, the final design produced by different designers will be highly in terms of layout. Unite.
If you are designing a 0-1 project, I hope the layout trilogy "Frame Layout", "Grid System", "Responsive" will help you! ! !
This article was originally published by @龍行大XIONG everyone is a product manager. Reprinting is prohibited without the author's permission.
The title image is from Unsplash, based on the CC0 protocol
Reward the author and encourage TA to hurry up and create! appreciate