To create a proper systemic approach, we created a scalable grid system. This will allow us to maintain the structure and visual identity across multiple use cases. Grid sizes vary depending on the device, screen size, and resolution. We’ll focus on the most used environment which is the 1200px to 1920px viewport.
We use “Vertical Spacers” to define the vertical spacing between elements and sections. From desktop to mobile we strive to use the same spacers to achieve greater visual balance. By using pre-defined spacing across the whole environment we preserve our systemic design methodology.
We are using a 5px spacing system when defining both the vertical and horizontal spacing between elements. The 5px system allows us to minimize the variety of “spacers” while upholding our systemic design methodology.
The 5px spacing system means that all and every margin, padding, spacing, whitespace, and the divider is divisible by 5. This results in a very precise and easy to follow guidelines where the majority of spacings use rounded numbers.
12 column grid with 70px column, and 30px gutter results in grid spacings and sizes with rounded numbers such as:
— 1/2 column - 570px
— 1/3 column - 370px
— 1/4 column - 270px
— 2/3 column - 770px
— 3/4 column - 870px
It is all divisible by 5, and mathematically balanced for ease of use.
