Basic knowledge! Grid design principles and techniques that UI designers need to master

Editor's note: This article is suitable for new readers who are not familiar with the grid system. A large number of illustrations and in-depth explanations can help you quickly understand what the grid system is.

Ma Xiaoqing: We all know that in graphic design, using grids to assist design can give the page a unified sense of order and rhythm. In web design, we also need to visually express unity and consistency to make the page more professional and systematic; but at the same time, web design also emphasizes dynamic and systematic thinking compared to traditional graphic design. The grid system can help us formulate the rules of web design. Understanding the basic principles and front-end applications of the grid is very important for web design.

[[250288]]

1. The necessity of web grid system

1. Professional

Establishing a set of basic rules for the page can maintain the consistency and professionalism of the overall design; avoid ineffective design attempts and focus on meaningful design directions.

2. Efficiency

Follow the design details of the grid system, whether it is elements, modules or pages, there are rules to follow, which can reduce the time of design decision-making, reduce external communication losses, and improve work efficiency.

3. Layout Basics

The application of the grid system can serve as the basis for responsive web page layout.

2. Basic Concepts of Grid System

• Grid: The smallest atomic unit of a grid system
• Column, Gutter
• Total grid width (Container)
• Margin
• Box/Area(Col-n)

1. Grid: The smallest atomic unit of the grid system

The grid is a grid system composed of a series of regular small grids, and the grid constitutes the smallest unit of the page. Usually, 8 is often used as the smallest stepping unit of the grid in web design. Some well-known companies divide the grid into 8 as the smallest unit to standardize the order of the page, such as Ant Design, Matierial Design, etc.

Editor's note: Design specification website summary → https://www.uisdc.com/design-specification-website

The benefits of doing this are twofold.

Even-number thinking: Using 8 as the base multiple, element sizes can be recognized and divided by most browsers, avoiding half-pixel situations to the greatest extent possible.

Regularity: All elements are stepped by 8 pixels, and the size and spacing of elements follow a regular pattern.

Why not 6, 10 or something else?

Using 8 as the stepping unit, the progress is appropriate, neither too trivial nor too scattered due to large intervals; many open source codes use multiples of 8 as the default design size; it has been demonstrated many times that the 8-point grid has even formed a set of theories.

Nothing is absolute. If you are making a fixed-structure web layout and do not consider responsive web design, you can also design the grid based on actual conditions using even numbers as the minimum unit.

Why do I strongly recommend the "8-point grid" → "Make design more efficient! Officially recommend this useful "8-point grid" to everyone"

2. Column+Gutter

• Column: Column is the unit of grid quantity. Usually, the number of grids is the number of columns. For example, a 12-grid grid has 12 columns and a 24-grid grid has 24 columns. The gutter size is customized by setting the padding of the column. The remaining part is called the column.

Gutter: The spacing between page content. The larger the gutter value, the more white space there is on the page, and the looser the visual effect. Conversely, the page is more compact. The gutter is usually set to a fixed value.

• 3. Grid width (Container)
• Grid Width (Container): The total width of the page grid system.

4. Margin

• Margin: The outer margin of the grid, which maintains a certain safe distance from the screen width.
• Row: The horizontal grid of the grid system is perpendicular to the columns of the vertical grid. The area where the columns and rows intersect forms the content area of ​​the page. Since most web pages currently use waterfall flow, the up and down sliding area becomes unrestricted and very arbitrary, so this article ignores this part.

It is important to note that we consider the columns of the grid as the width of the column + the slot, so 12 grids means 12 columns. Some articles interpret columns and slots as shown in the left picture below, but from a development perspective, the right picture below is the grid as understood by the front end. We use the grid to set visual rules for the page, but we also need to understand how developers implement the grid to reduce unnecessary communication misunderstandings at work.

5. Box/Area

After the basic grid is established, a piece of content usually occupies the width of several columns and bars. We understand this area as a content box, which is used to carry the content of an area.

Above, the basic concept of the grid is clear, so how do you start to establish a grid system for your own project?

3. How to create a web page grid

1. Determine the screen size and determine the safe range

When we start working on a project, we should first consider the size range within which the design will be made, that is, determine the width range of the grid area.

2. Determine key data: number of columns, width of gutter

Common grid systems are usually divided into 12 or 24 grids. We need to determine the number of grid divisions based on our own projects. The more grids there are, the more detailed the content will be. Usually, 24 grids are often used in background systems with complex information, while some commercial websites and portal websites are usually divided into 12 grids.

The finer the grid, the better. 24 grids are fine, but they can also appear trivial. Too many rules for content arrangement are equivalent to no rules. Some projects will also be divided into 16 or 20 grids according to actual conditions, which is also acceptable.

It should be noted that the slot area cannot be used to place content. Usually, we will set a fixed value for the slot to determine the size of the column.

Calculation formula

Assuming that the width of the content area is W (Weight), the column width is C (Column), the number of columns is n, and the slot is a fixed width G, we can get: W = C * n. Since the slot cannot hold content, the visible content area is: W = C * nG.

For example, we divide the grid for a project with a screen width of 1440. First, we determine the width of the content area to be 1440, 24 columns, and the slot to be a fixed value of 16; then we can get a column width of 60 and a column of 48.

The content area should start from the sink and end at the sink:

Appendix: Sketch Grid Tool

Currently, many software provide automatic grid setting function, and Sketch also provides such a function: Layout Settings.

• Total Width: Equivalent to Container, which is the width of the content area.
• Offset: Indicates the offset of the grid, indicating where the grid starts.
• Number of Columns: Indicates the number of grids.
• Gutter on outside: Remember to check this option. After checking this option, the grid settings will match the front-end grid algorithm.
• Gutter Width: The value of the slot, usually a fixed value, controls the blank space of the page.
• Column Width: The value of the column (bar + slot), that is, the width of a single content area of ​​the grid.