History of the design grid II

In “History of the design grid” we covered the Renaissance origins and 20th century development of the design grid, exploring how 700-year old principles of proportional harmony continue to guide print design. By the end of this post, we’ll see them on the web, too.

Now, let’s round out the subject with a look at the design grid’s more recent history: its overt emphasis in the world of 20th century art and design, the momentary resistance that followed, and finally its subtle and seemingly unshakeable presence in contemporary website design. Read on to see where we stand now, and find some resources to use the grid to its full potential!

20th century art and design

While Swiss typographers were establishing the centrality of the grid in print design, similar movements occurred in the world of fine art.

The grid is probably most evident in the Dutch De Stijl movement, founded in 1917 and headed by artists Theo van Doesburg and Piet Mondrian. Believing in the democratic and utopian potential of modular design and absolute simplicity, they limited their canvases to intersecting vertical and horizontal lines and primary colors.

A De Stijl publication (left) alongside a painting by Piet Mondrian (right) in which the grid is clearly apparent

The Bauhaus school in Germany opened 2-years later, in 1919, and declared as its guiding principle a direct relation between form and function, without any “unnecessary” or decorative components. Naturally, this philosophy led them toward the extremely practical grid, as can be seen in the famous Bauhaus chess set, whose pieces are all squares and rectangles made to fit tightly together for compact storage.

A Bauhaus publication (left) alongside the famous Bauhaus chess set, which has square pieces that can pack together into a compact grid for storage (right)

Meanwhile, the grid became more and more entrenched in graphic design. Looking at these famous posters by Josef Muller Brockmann, Richard P. Lohse, Armin Hofmann and Alberto Longhi, it’s clear they all conform to a strict grid (sometimes it’s tilted but that is the only allowance).

Posters by Swiss designers Josef Brockman (left) and Richard Lohse (right) both conform to a strict grid

So do these by Armin Hofmann and Alberto Longhi

Massimo Vignelli’s famous 1972 redesign of the New York City subway map distorts geographic proportions to create a more easily intelligible map, based on — you guessed it — a grid.

Massimo Vignelli’s 1972 NYC subway map distorts the rail lines to fit them into a cleaner grid

The grid probably reached its loudest presence, however, in the pop art of the 1960s. Artists like Andy Warhol, Roy Lichtenstein, Chuck Close and Gerhard Richter raised the “lowbrow” language of mechanical reproduction to the level of high art, and the grid appeared front and center.

Andy Warhol’s Campbell’s soup cans are arranged in a grid. Photo by profzucker

Chuck Close’s portraiture uses a grid of cells (left; photo by rocor) and Gerhard Richter uses a color grid (right)

Soon, people got tired of it, and during the 1970s and 80s many designers made attempts to downplay or even dispense with the design grid rather than celebrate it. However, the web was about to change everything.

Web design today

For a time, digital technologies were seen as a way to experiment beyond the design grid. But that didn’t last long. Designers now generally find the grid to be an ideal way to organize websites and make them responsive to different devices.

Grids are clean, lend good structure to a website, are easy for users to navigate and spare the designer a whole lot of trouble, as 1 grid can be used over and over. Because websites open up new aesthetic dimensions not available in print — like the use of a new diversity of viable colors, textures and typefaces — the same grid can be used to produce completely different looks.

Traditionally, online grids have stuck to 9, 12 or 16 columns, but as you can see in the designs below, modern web designers sometimes use as few as 3. If 3 is all you need, use no more.

Khoi Vinh made a famous website (here re-titled “Yeeaahh!”) conform to a 14-column grid; he describes the process in this article

The New York Times website is another famous grid, consisting of a thin rail and 5-columns

In this article for Smashing Magazine, Chris Brauckmuller describes how his 3-column grid for FloridaFlourish.com proved sufficient

Browsing the web, the number of unconventional, grid-forward websites is growing as well. Check out some of these awesome examples, some of which use vertical column grids and others of which use a more modular approach.