A Century of Grid Design

Tatsiana Artsemiuk

UI Designer

Grids are everywhere. In website design, print production such as magazines, books or leaflets Even the streets you walk and the modular furniture in your house follow some kind of grid. They help designers organise any type of system in a clear way which is easy to navigate through and are used extensively within digital products such as websites or apps. To understand why it developed as one of the most effective ways to design we should examine the history of grid design.

De Stijl Impact

The Dutch ‘De Stijl’ movement is considered to be the direct ancestor of modern grid systems. The followers of the movement considered that global visual language should correspond to the modern / new era. Some people think the movement appeared as a reaction against over-decorative ‘Art Deco’ style. The founders of the movement Theo van Doesburg and Piet Mondrian created a new visual style in 1917 based on simple geometric forms, perpendicular lines and primary colours. The new style replicated the new world, suggesting a totally new attitude to colour and grids, and was promoted through their magazine.

Early 20th Century Impact

A few years later, the Bauhaus school was opened with the declared principle of “Form and Function”. This means function dictates the form and shape when designing objects. This was the opposite of what it was like before when decorating the objects was more important. It naturally led them to the very practical grids used in industrial design and architecture. It was based on a system of joining / fitting different parts which extended to typography where it was based on joining or separating letters, words, paragraphs, images and shapes.

Sources: Graphics and Typography and ZID Imperio

Swiss Influence

The modern typography grid terminology is mainly associated with Swiss design and such names as Muller Brockmann, Max Bill, Richard Paul Lohse and Karl Gerstner . Switzerland was a neutral country during the First World War and became a shelter for numerous talented refugees where their creativity could grow. In addition to that, the overall conditions of this particular time created a lot of typographical problems which designers had to solve. For example, a lot of multi-language documents had to be printed, which required an extra column for French, German, English or any other necessary language translation.

Due to their contribution the classical “symmetric” approach (text is positioned in the center of the page) to print was changed. They created multi-column grids where text could be positioned and aligned to any side of the page. This gave them a system where you could move text and other objects around, and resulted in more space for more information. Some terminology commonly used by designers appeared as a result from their work such as gutter, grid, modular grid and so on.

The Swiss designers approach to design became the essence of all modern design processes for digital or print products.

Sources: Winter-Hebert, Shillington and Suhdudeblog

The 21st Century Response

Different grid systems were adopted by designers for digital products such as websites, apps, and software. Generally designers use 9, 12, or 16 columns for web grids, with 12 being the most popular, but there are other different combinations possible. When some of the columns are joined together, we can see much more different variations of grids which give different proportions to the page.

Grids helps designers to organise the page in a clean, legible, structured way which is easy to read and navigate through. A standard grid can help a designer to organise the same page in numbers of ways, and this is especially useful in responsive design. One of the best-known users of the grid structure for this is Bootstrap, something widely-used on websites today. The same grid can be used with numerous amounts of types and can still look different either through how it is styled or depending on the viewport being used.

Staying On The Grid

The grid has been around for a long time but it is still relevant. Design and technology may have evolved but the grid has survived through all of these changes. It is an example of “if it is not broken, don’t fix it”. Grids help designers in different fields to organise and clarify the look and feel of any type of digital or print project. They help designers to systematise their work and help the user to read and navigate through pages in an easy and clear way.

The grid is something we use in Graphic Mint in all of our User Interface (UI) Design projects. Why not check out our UI Design services here, where you can also contact us today to see how we can help you.