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.
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.