Module and its meaning in space. Modular grid.
Caution, that’s a lot of text!
The modular grid is a universal tool for organizing visual space, used by graphic and web designers alike.
Using a grid when designing is part of a designer’s professional culture. Let’s see why it is so popular.
What is a modular grid?
A module — Is something that is formed at the intersection of vertical and horizontal lines. A module serves as a starting point for all the dimensions in your layout. If you choose an image size for your layout, for example, it must be a multiple of a module. At the intersection of the inter-column distances is formed micromodule, and this is the smallest indivisible value in your layout.
There is also what’s called a “font” grid. This phenomenon has migrated to the web from graphic design and printing. Font grid consists of horizontal lines — rows (like in a school notebook). It comes in handy when you’re working with text and looking for optimal line spacing.
Modular grid. The modules are used to build a grid — vertical and horizontal lines dividing the page into rectangles. The grid determines how the entire layout will look like and where the individual elements will be located: headings, texts, images.
There may be no guide lines in the grid. In this case, the modules themselves form the grid.
The grid sets the standard for element placement: it makes it easier to align elements, add new elements, and maintain the page later. The grid allows you to work faster.
The design system is a collection of rules, restrictions, and principles implemented in design and code.The design system will help make an application into a ready-made cross-platform solution or website without losing recognition and without taking a lot of time for routine work on aligning elements.
The updated Rambler not only changed its appearance, but also acquired a coherent design system, which the service’s product team shared with everyone. This system, too, is based on the 5x5 px principle.
Another popular approach is the “even module” system. In this system, the grid consists of two, four, or eight-pixel columns. The even-numbered module was the basis for Google’s product design system, the famous Material Design. This system takes into account the operation of all the elements of a page or application, down to the animation, and is the basis of many products and sites around the world.
DISCLAIMER: Some materials in the form of text and images is taken from the Internet for educational purposes. The author decided to collect a collection of rules and basic knowledge necessary in graphic design. The materials are not used for commercial purposes.
