/ Visual Design πŸ‘€

How the grid system works


A client once told me, "Jamie, can you please try not to use the 'grid thing' in your designs? I want to push your creativity, let you go crazy and not feel restricted in the design layout". I politely thanked him for giving me creative freedom but corrected him - the 'grid thing' is not limiting my design.

In this blog, I have emphasised the importance of making the information in your design accessible and ensuring that your readers know exactly where to go to get the information they need. Grids play an inportant role in building the structure of the layout.

Grid provides a system of how information is placed

Like building a house, you need to lay the flooring before bringing in furniture, and build the walls before planning where the bathroom and bedroom will go.

When you design, you need a basic structure before adding any information. Without structure, you subject yourself to infinite designs. You must start with a guide.

Grid keeps the style cohesive so it is comprehensive

When you have a system set, your readers will have clues on how to access the information they need - even across multiple pages with different content. Below is an interesting example I found on a website (http://www.swapmeetdave.com/Bible/Bibles/Historic.htm), it shows the grid of the Bible in 1606:


The top of the page on this Bible are used for Chapter number, title, and page number, the central coloumns are for main context, and the sides are for notes.

When the information is cohesive and it is displayed in similar layout even across different pages. Readers will feel comfortable browsing as they can easily understand how the rules work and they can access the information they want straightaway.

Grid provides efficiency

As I previously mentioned, the grid system provides designers with a guide to start designing. The system also sets parameters to avoid dragging us into the sphere of infinite creativity. Even when designing a book over one-hundred pages, once the grid system is set, you'll only need to worry about the placement of the visual elements.

The grid system can also improve collaboration - anyone can take over your design when the system is clearly defined. In a more complex design consisting of multiple pages or sections, designers can work autonomously and still be able to synchronise when working on a unified grid system.

To set up a grid, you need to:

1.Set the margin size

Content is placed within margins. One way to set the size of the margin is to base it on the dimension of the media you are working with. Ask yourself: how do you want the content to be displayed in a newspaper? A small booklet? A website on a desktop? On a mobile?

This is how margins look in books:


You must leave some space for the inside margin so the content isn't covered when the book is bound.


You may want to leave some space for the outside margin too, so your fingers can rest comfortably when you read the content and to avoid the content being cut.

According to the golden ratio, a famous diagram is produced with a fixed ratio and provides guidelines for a harmonious layout (see diagram below). Designers tend to keep the upper margin smaller than the bottom one. You should also consider what information you need to put in the margins and decide: the size, the page number, the chapter, and the section title.


2.Set the number of columns

12 columns are recommended as it provides a flexible variety.

There are, however, no strict rules on how many columns to use - it all depends on the type of media you're working with. You may need fewer than 12, you make need more. Always base this decision on the content you are working with.


3.Set the size of the gutter

The gutter is the space between columns. Bear in mind that the gutter should be wider than the paragraph space so readers know exactly where to follow after finishing a paragraph.


4.Set the number of rows

The number of the rows, again, depends on the specific needs of your design and the media you are working with.


When we are confident that the grid system is clear, flexible, and functional; we can experiment with different layouts and include the visual elements (texts, images, graphic or any ornaments).

Be flexible using the grid!

Don't be afraid to break it!


To conclude, a grid will not limit your creativity but will instead provide you with a solid guide to work from. You can use a grid to add rhythm to your design by making it flexible or breaking it! The grid system theory has been used since the Renaissance period and was systematically perfected when Swiss design school emerged. Even today, it is still useful and applicable to digital design for desktop and mobile.

β€œ The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice. ”
Josef MΓΌller-Brockmann