Grids

Grids provide the foundation for organising visual elements and typography. Using a grid is an essential part of our design process to ensure precision, order and clarity within and across platforms.

How it works

Grids are sets of vertical and/or horizontal lines used strategically to define rules for how design elements like image size, placement and even white space will be structured in a layout. Whether it's for print packaging, business cards, or a website or app, a grid defines the "rhythm" of a person's experience with our design. Having a common approach to grids will ensure we're creating a consistent visual identity across every platform for Volvo Cars.

Dividing the grid

When constructing a grid for a new design, we use divisions as a guide. Establish the proper layout size, then start a grid by dividing it into two even columns. Then, divide each column by two, and repeat as needed. This method can be applied to most designs.

Grid flexibility

Create a grid that meets your design requirements. Your format and design elements will determine the structure, complexity, and density of your grid.

Margins

Margins control the space between the edges of the grid and content. Use the divisional method as a guide to define margin widths whenever applicable. When creating margins, be mindful of the impact of different predetermined production methods, as well as accounting for formats where the divisional method cannot be used. Ensure margin widths and related ratios work for all platforms and display devices.

Columns

Column grids are the most common. You can use the divisional method as a guide when creating columns. Place design elements within these columns. Keep your choice of column grid throughout your design to maintain consistency.

A Volvo Cars web page design on a laptop. This visual also shows the 24-column layout grid which is used by designers for this particular platform.

Modules

A modular grid is used to introduce additional layout control horizontally on the screen or page you're designing. A modular grid is basically a column grid with rows added. These vertical and horizontal lines create blocks or "modules." You can also use the divisional method as a guide when creating a modular grid.

A desktop view using a modular layout showing four descriptive images of cars, each in a module within a single horizontal row. The text that goes with each image sits within a module on top of the images.A modular grid is used to arrange more elements in an organised way.

Gutters

Gutters are an important feature of any grid. These spaces clearly separate text blocks. You can continue to use the divisional method as a guide to create gutters. The gutter width should be consistent across your designs. Always align text to the gutters.

Magazine double-page spread: On the left page there is one image and on the right page there are four images, two on the top and two on the bottom. These images are well separated by the presence of gutters as set by the designer.Gutters preserve whitespace to create breathing room in a layout.

Spacers

Spacers determine the amount of white space preserved throughout the design. Space improves readability and legibility, enhances visual aesthetics, and builds a consistent design. You can use the divisional method as a guide to defining your ideal spacers.

Grids/How it works