A guide to grids for media and bloggers

How can you make your post more reader-friendly? One of the key design tools that helps achieve this is a grid. Think of it as a frame to help organize information. Today we will share what they are, how they were first used and their significance in media design.

01.

What are they actually?

A modular grid is a system of arranging objects in space based on rows and columns of a specified size. Boxes are where units of contents, such as text blocks, headlines, inserts, and images, can be placed.

Grids are used not only in information design, but also in architecture, interior design or urban planning. In all of these fields, grids are constructed using similar principles; they seek to introduce order and harmony into the design space.

Take a look at this sketch of the development of Manhattan in 1807. It uses a grid of streets running from west to east and from north to south

Why do we need grids?

02.

Originally, grids were used in newspaper printing to improve efficiency. Paste-ups served to reduce the costs of employing full-time typographers by standardizing the page layout and saving time for graphic designers. Soon, paste-ups were replaced with much more flexible modular grids.

In the early 1960s, in line with the new trends, graphic designer Peter Palazzo updated the design of New York Herald Tribune. In 1966, art editor Janet Collins introduced a new design of The Times newspaper in London. Both innovations proved to the industry that a uniform design contributes significantly to the quality of the interaction between the media and its readers. Newspapers and magazines were quick to realize just how helpful grids were and, naturally, equally quick to introduce them into their own work.

Both in the paper media era and in our digital age, grids are very effective in engaging readers by improving text readability and overall experience. In today’s media design, grids help to articles and the publication overall more structured and coherent.

In his book “Grid Systems in Graphic DesignJosef Müller-Brockmann explained:

“By arranging the surfaces and spaces in the form of a grid the designer is favourably placed to dispose his texts, photographs and diagrams in conformity with objective and functional criteria. <…> This orderliness lends added credibility to the information and induces confidence.”

What kinds of grids
can be found?

03.

There is a ton of grid types and configurations: from the simplest squares, like the kind in graph paper notebooks, to sophisticated, compound structures with varying spaces between horizontal and vertical lines.

We have collected the most commonly used grids, the ones that have already become modern design classics. Getting acquainted with these will give you a better grasp of modular design.

Square Grid

The simplest of all, it formed the basis for the grid system. The square grid consisted of squares and looked like an ordinary box table. It was first used in the late first quarter of the 20th century. Graphic designers from Zurich and Basel worked on upgrading it in the years following the end of the war, which coincided with the rising popularity of Helvetica and other similar fonts. This gave birth to the Swiss typographic style.

ON THE LEFT: Robert Büchler, 1914.
Source: Thinking Form

Max Bill’s grids

Max Bill was the first one to use this kind of system approach in book publishing when he designed “Die Neue Architektur” (“New Architecture”). In that book, published in 1940, Alfred Roth first split the page into 9 horizontal modules, which helped to accommodate both images and the book’s trilingual copy with maximum efficiency. Several years earlier, in an interpretation of Bauhaus design, Bill made use of a 6-module grid in his famous Negerkunst poster that he had created for a 1931 exhibition of South African prehistoric rock painting.

On the right: Max Bill, «Die Neue Architektur», 1940 г. Source: Pinterest

Willy Fleckhaus’
12 column grid

In 1959, the designer created his own model of a grid adapted for large format pages. It was initially commissioned by Twen magazine, but in later years Fleckhaus made use of it more than once while working with different publications.

on The left: Twen magazine, February 1970. Source: VFiles

Karl Gerstner’s compound grid

Grid designed by Karl Gerstner for Capital Magazine is a great example of the drastically increased design complexity. As Allen Hurlburt described it, “This is basically a 6-column pattern with a 4-column pattern superimposed. This grid also allows you to choose 6, 4, 3 or 2 columns, but it moreover provides the initial 5-column layout option. This grid requires much experience to handle, and a graphic designer will have to earn that experience by trial and error.”

on the right: Capital Magazine.
Source: Flat File

04.

Are there any alternatives to grids?

Grids are merely one of the many tools at graphic designer’s disposal. Modern-day innovations  provide designers with ample opportunities: in the early 1990s, at the dawn of Internet, websites were designed using HTML tables. Designers either chose to use grids or ignored their existence altogether, depending on what they saw fit. HTML code made it possible to wrap the text around images (the float property).  This, however, did not always look good in practice. What came out in the end seemed rather amateurish because designers lacked an underlying structure that would help them to organize information.

With the adoption of mobile, design approach  had to be revised. Designers realized that complex design looks horrible on smartphone screens, while catchy animated banners often only irritate users.. Moreover, some elements had to be removed or simplified to help with the  loading speed. It is very common to use column grids to create adaptive websites (Setka Editor does this too). There are still some designers who choose not to use them, as they believe that grids are a serious constraint to creative freedom. But our advice is, nevertheless, to get the hang of grids as much as possible – rules ought to be known before they are broken.

To master the use of grids, you would do well to delve deeper into theoretic and practical graphic design, as well as analyse the grids used by your favourite media. This will help you understand what modern-day web design is all about, identify helpful tips and ideas, and accumulate interesting references. These will all prove to serve as investments into a future that will make your online media look better and attract more readers.

AUTHOR: Oleg Uppit