Grid basics

Grid systems were popularized by Swiss typographers in the years after World War II. Initially, they were used to create modern layouts with a uniform and consistent structure.

As they discovered the power of grid systems, it allowed them greater layout variety and creativity while still maintaining clear information hierarchies.

This is approach is particular useful in a digital world when designing an interface with several levels of visual or functional complexity.




Grid systems in a digital world

Grid systems are even more important in a digital age. It allows designers to create simple mathematical rules to determine the relationships within interfaces and layouts, often necessary to manage complex corporate systems.

Simple mathematical rules based on digital grid system determine retlationships within Interfaces and Layouts. Making design rules easy accessible to many contributers with different levels of design experience.

The goal for a digital design system is to create the least amount of assets and rules, yet have the greatest flexibility. With rules that are easily accessible, contributors with different levels of design experience, large teams of Marketers, PM’s, Designers and Engineers can clearly understand the constraints and at the same time innovate and coordinate to create a cohesive brand and product experience.

Digital grid systems

Digital grid systems are based on the limitation of the screens they serve. In our case we base our grid on the smallest unit of a screen a pixel. To give us the greatest predictable flexibility, the QuickBooks Design System uses a minimum unit of 4 X 4 pixels.

Therefore, 4 is the magic number in all of our rules. It drives how column layouts are determined, elements are designed, how components interact with each other. The success of a digital design system lies in the intelligence of its math.

  • Was this Helpful?