If you want to use the grid system well, you must master these eight tips

Hi, I'm Caiyun. White space and grids are the foundation of any design. Once you really master and use them correctly, grids will help you design reliable and attractive design solutions. So, today I will share the grid design skills I have mastered in UI design. The article is not long, read it carefully, and you will definitely gain something.

What is Grid Design?

The grid is the foundation of any well-designed interface and can be thought of as a framework for your layout. This framework helps organize UI elements, guide users, and define the various parts of your design.

Common terms

The grid is made up of grid units. The layout is placed on the grid, which contains a certain number of columns, with margins on the left and right sides of the columns and padding between each column, also called a gutter.

Tip 1: Choose the right number of columns

Although the 12-column Bootstrap-like grid is the most popular choice, it is not mandatory. When choosing a grid, determine how many columns to use based on the actual needs of the design, and make sure that there are no more or less columns. (Note: You can define the number of columns based on the main size of your interface. Common ones can be set in multiples of 4 or 8)

Tip 2: Understand the constraints

Always use the device screen you are designing for as a benchmark, understand the usage habits of your target users, take advantage of those limitations and learn to design with them.

Most common screen resolutions (px)

• PC: 1440×1024
• Tablet: 768×1024
• Mobile: 320×640 (here refers to 1x image)

Tip 3: Keep the spacing consistent

Unify vertical and horizontal spacing to make layouts more attractive and consistent.

Tip 4: Use the baseline grid

Use a baseline grid to align content and bring visual consistency to text and layout elements.

Bonus tip – adjust font line height to match the baseline grid.

For example, if you choose 4px as your baseline/grid unit, to align text, you need to set the font's line-height to a multiple of that unit, i.e. the line height should be 4, 12, 32, 64, etc.

Tip 5: Use frames and colors

Use the frame as a tool to focus the user's attention on a certain part of the layout, adding extra visual weight where needed. (Note: For example, changing the color of a card to highlight a certain data is common when making a background interface)

Tip 6: Break the Grid

Exclude certain elements from the grid and use this decomposition technique to add value and make certain parts of your design stand out and guide the user.

Tip 7: Dynamic Grid

Make sure the layout you design can adapt to common screen sizes and adapt to multiple terminals to maintain a consistent experience. (Note: Changing the layout does not change the grid system, and the spacing can still remain unchanged)

Tip 8: Use the grid system flexibly

Designing without a grid is certainly possible for small projects, but for relatively large projects, using a grid is very necessary, even mandatory.

Learning to design with a grid is not a rote process, you need to observe the layout from time to time and find the most creative solution for your needs.