4 Reasons Why You Should Design With A Grid

What’s the big deal about designing with a grid and why should we use them? Do we need to use them? What benefits do grids add to a design?

The above questions were asked on a recent episode of The Shop Talk Show. Chris, Dave, and guest Ben Schwarz offered some good answers in between bringing up css grid frameworks which are really a different topic. While I agree with everything they said, I’m not sure someone who already wasn’t convinced of the benefits of designing with a grid would be able to draw the benefits of using a grid out of their conversation.

Listening made me realize while I’m convinced grids are a good tool when developing a layout, I can’t say I’ve ever thought through specifically why they are in order to answer the question and convince someone why they might use one. Seemed like an opportunity to clarify a few thoughts.

The Benefits of Using a Grid

Designers solve problems. Web designers are faced with finding solutions to visual and organizational problems and one approach to solving these problems is the grid. It’s not the only approach you might take, but it’s one with several important benefits.

• Clarity/Order — Grids bring order to a layout making it easier for visitors to find and navigate through information.
• Efficiency — Grids allow designers to quickly add elements to a layout because many layout decisions are addressed while building the grid structure.
• Economy — Grids make it easier for other designers to work and collaborate on the design as they provide a plan for where to place elements.
• Consistency/Harmony — Grids lead to consistency in the layout of pages across a single site or even several sites creating a structural harmony in the design.

Let’s address each of the above in a little more detail. Hopefully I’ll dispel a few myths about grids along the way.

Clarity and Order

Nature tends to move from order to disorder in isolated systems. It’s the concept of entropy or the gradual decline into disorder. The history of humanity is a fight against entropy. We try to create order from the chaos in most everything we do. We organize into social communities and order materials into the buildings we live in. Our struggle is one of creating as much order as we can until entropy inevitably catches up with us.

Grids are tools for organizing space, text, images, and any other element placed in a design

Look around you at all the things that are organized in grids. The windows of a building, chess boards, maps, and modern cities. Grids exist in more places than you might realize.

Grids are a way to create order in layout. When designing you wouldn’t randomly toss elements on the page without thought. Grid or not, you’re going to place elements with some kind of rational logic.

• Main navigational links are grouped together
• Main content is separated and distinguished from footer and sidebar
• Form fields are aligned and grouped together

We organize our designs in order to help visitors find important information and to help communicate information to them. Grids are a natural extension of this simple order and organization. They help your audience predict where elements and information will be, making both easier to find and navigate.

Grids are tools for organizing space, text, images, and any other element placed in a design. Grids add structure to a design. They lead to rational standardized systems that help people absorb the information we’re trying to communicate.

Efficiency

A grid imposes constraints on a layout, which help reduce the endless number of possibilities to a manageable few. In developing a grid you make decisions about where content will and won’t be located.

They make it easier for us to add new content to a design in a way that’s consistent with the overall vision of that design. In helping create an underlying structure they guide us where to place elements and information and allow us to focus on other aspects of the design.

There are a variety of grid types and a well-designed grid still provides enough room for creativity in where to place elements. They just get you there faster, by eliminating options that aren’t unified with the vision of the design.

Economy of Scale

The same way grids help an individual design more efficiently and add content to a page, they help other designers understand the structure of a design and do the same. Your grid becomes a blueprint for the design that others can quickly follow.

This makes it easier for a different designer to take over a project or for multiple designers to collaborate on a project. The grid provides the roadmap for any future layout decisions that other designers can follow.

Consistency, Proportion, and Harmony

Because they constrain all possibilities into a few, grids make it easier to be consistent. The constraints aren’t arbitrary, though. They adhere to a unified concept for the design.

Grids offer a guide to the placement of information and help generate visual hierarchy. They promote rhythm and consistency in a design and help you develop relationships between elements based on rational proportions.

Grid units, fields, rows, columns, gutters, and other parts of the grid are based on geometric and natural proportions. Grids are about ratios like 2:3 and 1:1.618. They aren’t created from arbitrary numbers. These proportional relationships lead to rhythm and structural harmony in your layout.

That grids come from proportions is something to keep in mind as we move toward designing responsively and look more to relative units and proportions.

Summary

Grids are good. They aren’t the only way to solve layout problems in a design and many great designs exist without a grid in place, but they have several benefits that make them a very useful design tool for developing a layout.

As a general rule grids help you order information more efficiently with or without other designers and they help create consistency, proportion, rhythm, and harmony across any design that uses the same grid system.

« Prev PostNext Post »

Download a free sample from my book, Design Fundamentals.