Grid system

Visual representation of a Grid System—inspired by Brockmann

Why?

The question of column width is not merely one of design or of format; the question of legibility's of equal importance.

Use of a visual grid as a design tool isn't a new concept, however the use of it on the web isn’t commonplace. Sometimes, the term “Grid System” is confusing; documentation tends to focus on code, not the purpose of a grid as a design aid, or the principles of grid layout as it is known in Graphic Design. The result is an influx of predictable web layouts.

The Grid System used with Interior is an interpretation of the method detailed in the book: Grid Systems in Graphic Design by Josef Müller Brockmann. This incarnation of Interior is only possible due the new CSS grid spec. Without which, the layout options would be minimal, painfully difficult to create; and simply workarounds.

Criteria

In order to create my Grid System I wrote down the following criteria to help me decide what I needed from it; in note form.


  • How much content a design will consume, and it's inherent nature—this can dictate style, quantity of images and their sizes, volume of copy—the layout should be designed around the content.
  • How much variation is required for a range of different layouts? For example a grid with 3 horizontal cells may not provide enough variation as 4.
  • Layout widths—the cells used are not always fluid I therefore chose cell widths that are divisible within each layout width.
  • The grid system is visual, it’s purpose is for visually understanding the available space in layout.
  • A combined use of pen & paper, Adobe Illustrator, HTML & CSS (and a dash of JS) aids the design process. For example due to the defined layout widths the results are predictable, and useful—less content reflow.
  • The ultimate goal is legibility, therefore opt for column widths that enable it.
  • Select the 3 most popular screen widths (according to stats counter), and apply some content; in order to understand the column widths required for the typography.
  • It’s an ongoing process and, as tradition would have it, was not expected to be a task that was over and done with without revisiting and adjusting the design to accommodate all that comprises it. It's a slow process, however once a layout is established re-use should be possible.
Illustration detaling 3 different layout widths with varying grid cells per width.
Illustration detaling 3 different layout widths with varying grid cells per width.

Process

Calculating width

Font sizes

The font sizes should be compatible with the measure

Line length

The measure suggests 7-10 words per line, therefore a single column width should allow the same at the sizes defined by the measuring system, if a larger font is used more columns will be occupied.

Layout width

I decided up on a series of layout widths based upon the most popular screen resulutions from the results available on statscounter; they dictated how many grid-cells could be used, which fed directly into the decision on a suitable column width.

The grid I implemented on this website works for 4 static layouts and 1 unavoidable fluid layout.

Column width

I analysed how effective the column width would be by meeting the previous criteria and making any necessary adjustments.

Illustration detaling 3 different layout widths with varying grid cells per width.
Illustration of interplay between grid-cells and the measure.

Height

Initially I decided upon computed grid-cell dimensions of 296x296px, this was adjusted to 288x288px for large screens and 288x138px for small to accommodate the Baseline Grid (multiples of 1rem), which the cells must align to on the vertical axis.

After this task was complete I could then establish a very practical Grid System.

Create a grid from grid-cells

Grid creation was loosely based upon what I decided I would need in order to have enough flexibility to be practical yet creative. I took direct influence from Grid Systems in Graphic Design—which I referred to—learning from examples I was able to better understand how important the amount of cells would be as part of the creative process.

Use for design

I applied a true representation of CSS styles to working design files; enabling me to go back and forth between the browser and Illustrator by providing continuity.