Spacing system
One of the most noticeable inconsistencies between design layout and frontend layout is the spacing between the blocks. Even small differences, such as five pixels, a slightly larger line spacing, or inaccurate rounding in elements, can be critical.
Differences between design layout and frontend layout
Moreover, it is sometimes difficult even for professionals to maintain the necessary distances: somewhere the block accidentally shifts, somewhere edits are made to the already laid-out page that are not documented. As a result, the layout does not look like it was originally intended at all.
How to deal with it? We create a vertical spacing system for each project. If you disassemble a layout or page of the site into elements and look at the vertical spaces between them, you will notice certain patterns.
So we get a certain set of space sizes and thus a particular system.
Important: Spaces are placed between blocks on the page, and inside atoms, molecules, and organisms they are already defined in the UI kit. Otherwise, the layout will be difficult to perceive with so many spaces at once.
How the system works
We divide vertical spaces by levels (VR0, VR1, VR2, etc.)
The first few space levels are usually used inside atoms and molecules. Larger spacesare intended for organisms and the spaces between them.
Thus, the relationships between the blocks become visual: a Front-end Developer looks at the layout and immediately sees the patterns that the designer has thought out.
How to work with the system
We set spaceswhen the desktop layout is completely ready and we want to build the system right away, or when almost all the adaptive versionsare completed, and the system is built in parallel.
Important: a space of the same color, being in a specific place, can change its size depending on the adaptive version, but should not change color or height depending on the location. This simplifies the creation of responsive websites and makes spaces predictable at each breakpoint.
How to work with spacers
Important: it is normal when you have to deviate from the system due to some reasons. The main thing is not to abuse it and try to minimize such cases.
Features and benefits of the system
The spacing system allows programmers to easily see the structure. One color is a row in a table with a certain set of spaces, and another color is another row with a different set of spaces. This makes designs neat and the layout predictable.
This is what the spacing system in code looks like
The vertical spacing system is especially useful for large projects with a large number of designs and responsive layout, as well as when working in a team.
On small projects or landing pages, the system may be redundant, as its maintenance requires additional time and effort.