The Grid System

The Grid System concept is fundamentally an integral part of our work as designers – so, it’s fairly easy to overlook the power of grids when focussing more on the elements we want to create.

But first, let’s go through a quick introduction on the history of the grid system. It was first used by a 13th-Century architect, Villard De Honnecourt, who came up with a famous diagram used for producing page layouts with margins of fixed ratios — what was considered a “harmonious” design – which was then merged with the Golden Ratio. The Golden Ratio is a number often encountered when taking the ratios of distances in simple geometric figures.

In the past, this method empowered writers to position their handwriting neatly on paper and later became the universal standard in the publishing industry. Publishing houses all over the world retain strict observance of the grid system in producing copies that users find both pleasing to the eye and in line with what they would expect to see.

Given that printed and virtual pages have a lot in common, it is of no surprise that this trusted, tried and tested method is also used in the digital world for web and mobile application design. Making use of the grid system for the virtual page is a little more difficult than for traditional pages, as web browsers tend to handle content differently due to screen variations. That said, the core principle of the grid remains the same.

Users are most at ease when they see familiar features laid out before them in a manner which they are used to and therefore expect to find them. This is called mental mapping – which, by definition, is a person’s perception of the area of interaction. But how does the grid work? Well, we divide the virtual page into columns which we separate with margins, creating what is referred to as ‘whitespace’. The width of the columns and the margins are equal. This means we can place the content in one or more columns, based on the layout of the design. With this system, one can make use of one, two, three, six, twelve, or more columns.

The grid system then helps align page elements based on sequenced columns and rows and uses this column-based structure to place text, images and functions in a consistent way throughout the design. Every element has its place, which we can see instantly and reproduce elsewhere. Whichever way you use the grid system to build your design, you should always keep in mind certain principles, such as the Golden Ratio.

Today’s screen resolutions can reach very large sizes compared with what was available in the early days of computers. Despite this, one way to play it safe would be to use a 960-pixel width structure. This will ensure that the design is properly displayed on many computer screens. Using such a, relatively speaking, small width structure will still allow designers to modify the layout for mobile devices.

With all the advantages that come with using the grid system, resistance to using it is always just round the corner. Some designers might argue that the grid limits creativity. While this may be true, it is important to recognise that many designers employ the grid system regularly because it is so effective at organising information.

Whichever method designers opt to use, it is imperative to remember that the best layout is one which provides no distraction from the content.

The grid system then helps align page elements based on sequenced columns and rows and uses this column-based structure to place text, images and functions in a consistent way throughout the design.