For most design processes, we start with a grid.
Why is the grid so important?
A grid creates simple organization for designers to organize information in a way that users will be able to quickly identify what they are looking for in a piece of media.
Grids can be as simple as box. They can also become very complex. Identifying the best grid for a design is often the beginning of the process.
Brief History
Grids are based on mathematical principals like ratios and proportions. The use of mathematical principles to recreate physical space originated with Renaissance painting, when linear perspective was introduced.
Another mathematical principal used in design and art is the Golden Ratio, which describes two quantities where their ratio is the same as the ratio of their sum and the larger quantity. The Golden Ratio is still used by designer today to create harmonious layouts and designs.
A similar design was created in the 13th century, before the invention of the printing press, by Villard de Honnecourt, to define the margins of book pages.
You may not notice the grid margins of a book layout but these principals are used to make the design readable.
Book and manuscript design informs a lot of the web page grid design we see today. Before the printing press, simple grids were used with illuminated manuscripts to add notes in the margins.
With the introduction of the printing press and movable type, these grid designs became more complex and more visualized.
Industrialization and advertising led to even more complex layouts.
Eventually, the art of grid design was codified by the Swiss Style school of designers.
Grid Components
There are several terms we need to be familiar with to design a grid for wireframes and CSS implementation.
The format is the available space in a medium.
The margins are space between the content and the outside edge of the medium.
Units are the base measurement for the grid. Units can be derived in multiple ways, such as dividing width by the number of columns or basing it on a screen size.
Columns are the vertical blocks of content position on a page. Typically, columns are used to break up large blocks of text to make them more readable.
Gutters are the space in between columns (or rows).
Rows are horizontal blocks of content.
Types of grids
There are four basic types of grids.
The manuscript grid is essentially a box with margins. Manuscript grids are useful for single blocks of text or large images. Manuscript grids with wide margins will focus attentions on the content. Narrow margins will create tension between the medium edge and the content.
A column grid is good for laying out different types of content together. This might be a combination of text, images, icons, links or other elements.
Column gutters are typically more narrow than the margins of a design. This leads the viewer inward to the content. Larger gutters create more tension in the design and lead eyes outward.
Modular grids are like column grids with rows added to divide vertical space. Modular grids are typically used for mediums with organized information like charts and spreadsheets. They were preferred by Swiss Style designers for their qualities of objectivity and order.
Hierarchical grids typically combine other grid types to make a more complex grid to support multiple types of content. Most web sites use hierarchical grids. In a hierarchical grid column sizes can change along with placement of rows and gutter sizes. They require a more intuitive sense of design but still use units and structure.
