Page grids have been used in print media for many years but the application of them to websites is relatively new. The web being a fluid medium it’s natural to use the web’s default liquid layout. Some structure offers improvement, however, in readabilty, stability, and comprehension.
A grid is a set of horizontal and vertical lines organized around a pattern. It serves to set the placements of graphic elements in relationship to other elements. This can be applied to pages, buildings, walls, or almost anything.
Grids are the foundation columns and walls of the house. The underlying structure for grids provides consistency from page to page and, once established, lets teams focus on other aspects of the design and makes a safe and stable platform or environment for exploring selected variation to provide contrast and dynamic.
Establishing solid grids, combined with a well thought out type ramp also allows for a more agile design process in that lets teams focus on new requirements rather than revisiting less successful design decisions made in the past.
It’s a building block. Once it’s established a team can focus on other things.
Aligning elements to each other provides an opportunity for visual consistency and stability. This comforts the user and reduces the cognitive load for understanding the workflow. It also creates an opportunity to develop patterns across pages, products, or experiences and reinforce the product brand.
In the context of website design, this often requires the creative use of spacing. By using percentage measurements to space elements we can retain the relationship between them as the screen size changes.
Typically a website page grid includes columns with spaces between. Its important that the column width be divisible by the space, or gutter, width. That’s because you sometimes need to design a sub-grid for smaller elements inside the grid such as a header or footer.
The architect Frank Lloyd Wright used grids as the basis of his floor plans, to interesting effect. His Hanna house used a six-sided hexagonal honeycomb grid.
Once a grid is established and relied upon, it’s acceptible, good even, to deviate from it in a small way in a single place. For example an illustration that breaks out of the grid. Or create a pattern related to the grid that’s outside its norm. The strength of the grid makes the dynamic of the variation more pronounced and builds interest.