Foundation Grid & Layouts

The basic principle of the Nets baseline grid is using multiples of 8 (or 4) to define dimensions, padding and margin for all design components.

This proposed structure is based on Google’s Material design guidelines, where all components rigorously align to an 8dp square baseline grid and all typography aligns to a 4dp baseline grid.

Grid

Why is the baseline grid important

Consistency and harmony in your designs

Using the 8pt grid facilitates the creation of an aesthetically pleasing composition to the overall pages you are designing. By using a defined rule of sizing instead of arbitrary numbers to define the space and size of elements, we ensure a visual consistency between different Nets products, and also between the components of each product.

Faster output of design resources

The grid allows teams to move quickly and efficiently. Providing fewer decision to make, the grid reduces time spent fiddling with the elements in design. It also makes things from a development standpoint, as it’s easier to anticipate values instead of having to discuss or measure for each element or margin.

High fidelity mockups

Elements sized according to the grid will guarantee the highest fidelity rendering of graphics and type, given that they will have pixel perfect dimensions.

Aligning Nets Design with industry standards

In Google Material design, created with mobile, tablet, and desktop in mind, all components rigorously align to an 8dp square baseline grid and all typography aligns to a 4dp baseline grid.

While Apple is not rigorous about aligning to an atomic grid, but most elements are sized to fit on a 4px grid. Importantly, outer margins in native apps are always a multiple of 4px.

Example of use

Find below a couple of breakdowns on of how we used the baseline grid in building the Nets UI components created for the Digital Guidelines.

Layouts

Make use of a vertical grid to layout your content, as it provides a flexible and width-agnostic scaffolding system. The grid divides horizontal space into columns, and each column has a width specified as a proportion of the total available page width.

Columns are separated by white space areas defined as gutters, which remain a constant size regardless of the total width of the page or the number of rows. When designing, start with small screens first and afterwards adapt toward bigger resolution screens.

Desktop 1920 Center layout