Arranging elements on a page is what many people think about when they hear the term “graphic design”. And it is true: arrangement and layout of elements are one of the most basic elements of graphic design.
Almost all graphic designers use a very simple tool to guide how they arrange elements on a page: the grid. By dividing a page into a simple grid of rows and colums, and by aligning the elements of the design to the borders of the resulting cells, a designer creates a document that is easy to read, and in which the reader is guided in a natural flow along the page. No wonder that all design and publishing tools, even basic ones, have an option to turn on the grid and let elements “snap” to the grid lines.
Rulers forming a grid in a Keynote presentation. Source: Maarten Lambrechts, CCBY 4.0
Although a grid with straight lines and right angles may sound not very exciting or even boring, grids offer a wide range of techniques to create engagement, tension and surprise.
Because visualisations are in many cases graphical elements on a page, and because a visualisation itself is a composition of graphical elements, it is worth spending a little time looking at grids and how they can help you in designing data visualisations.
The use of the grid started off with the layout of printed pages. Hand written books already were using basic alignment and layout, but with the invention of the printing press alignments became much more precise. Printers adopted it quickly, as you can see on the pages of the Gutenberg bible below.
Gutenberg Bible, Lenox Copy, New York Public Library, 2009. Picture by A GutNYC Wanderer (Kevin Eng), CC BY-SA 2.0
The Gutenberg bible uses a two column grid, with consistent margins and spacing between the columns (these are called the gutters).
The grid used in the design of the Gutenberg bible. Image by Nik1986, CC BY-SA 3.0. The outer and bottom margins are twice the size of the upper and inner margins, putting the text off center and making the pages a little bit dynamic, but well balanced.
In our todays digital world, it is hard to find any publication that is not using a grid in its design. Whole books have been written about the grid.
Source: promopress.es
A poster showing how the grid is used for its layout. Source: GearedBull, public domain
The grid has extended its use from the world of print into the one of digital design, and is also of very high importance in web and interface design.
Responsive grids are a common design pattern in modern web design. Source: codepen.io/travishorn/full/RdPLwj
The grid in a design is usually invisible, otherwise you get a “boxy” design.
