The Psychology of Grid Based Layouts in Design

Grids are a fundamental design tool that have been used since the modernization of visual design. Using a grid is such a de-facto standard that you may have never stopped to think about why grids improve your designs.

I’d like to explore the psychology behind grids. Let’s start by examining what happens if you design without a grid.

Designing Without A Grid

Designing without a grid (using intuition for spacing and sizing) will invariably lead to arbitrary sizing. For example, a three-column layout may have twenty pixels between the first two columns and thirty pixels between the second two. While the difference may be so subtle it would be hard to pinpoint, there is a feeling of disorder that users will subconsciously perceive.

Designing With a Grid

By designing with a grid not only do you end up with consistent gutters (the space between columns), everything is sized based on a consistent ratio. This makes the entire design feel cohesive. Our three-column layout from above could have the primary content width of 360 pixels and the two navigational columns sized to 180 pixels. These are both divisible by 60 (an arbitrary multiplier for example sake), with the primary content being twice as large as the sub-columns. Not only does this let the user know that the large column is twice as important as the others, there is the intentional order that humans naturally appreciate. Use the size of your base unit (the smallest area of a grid) as a multiplier to intentionally create your layout.

Grids make designing secondary layouts easier as well. Because design should reflect content and context, you will need to alter the design anytime those two aspects change. The homepage of a site will have different types of content and context than an employee biography. Rather than throwing away the entire layout and starting from scratch you can build off of the existing grids and move much quicker.

By basing the new layout on the same unit of measurement (ie, the size of a module) used in the original, the ensures the new design maintains a level of visual consistency [SEE BELOW]. Not only will the user better understand the new layout, the sense of order and organization will be strengthened further enhancing the aesthetic appeal.

One criticism I have of most web-based grid discussions is they focus on vertical columns and often ignore the horizontal field. One of the challenges of designing for the web is providing a flexible framework for content. Widths of columns are defined with fixed widths or percentages, but you don’t always know how tall a spatial area will be. Because of this many designers ignore the vertical field. Don’t be one of those designers. Pay as much attention to the height of elements as you the widths. There will be design elements which have a fixed height. There is no reason you can’t size the height based on the same mathematical ratios that your grid is built from.

Using a grid makes the design look organized, which in turn taps into a natural human bias that finds beauty in order. In addition, grids help the user understand the design (proficiency need), and provide them a sense of consistency (reliability need) creating a more enjoyable experience. The grid is the skeleton in which you communicate to your users using visual language. The grid is also a device that can be used to create designs based on intrinsic biases of what is beautiful.

Grids Are Psychologically Pleasing

Designs with poor structure struggle to communicate anything to the user and always lack a strong aesthetic appeal. Trying to dress up an ineffective layout is a Band-Aid(tm) solution that will always feel lacking on some level. In an industry where shadows, gradients and bright colors get the most fanfare you may be tempted to eyeball proportions. I admit that compared to picking color pallets and photography, sitting down with scratch paper and a calculator to decide how tall or wide to make a rectangle sounds pretty bland. Nevertheless, proportions are one of the primary factors in the perceived beauty of your design. The fact that the same shapes have been found in the most timeless elements of beauty is a testament to it.

I should address the current trend of “breaking” the grid. All design principles can be broken if you understand them well enough. In this case, when used correctly you can intentionally stray from your defined grid to create a sense of tension. This is difficult to execute well, done improperly and your work will look sloppy. Done well and you’ll draw attention to important elements and intentionally trigger a feeling of discontent.

Even when breaking a grid, good visual design begins by finding the strongest structure for both the content and context of the site. As you become more adept at this you will find sometimes just using an effective grid to place content is beautiful by itself, even without graphical touches. This minimalist approach is often the hardest to pull off but the most beautiful when done well.