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.

Grid-like ceiling tile pattern

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.

Download a free sample from my book, Design Fundamentals.

9 comments

    • Thanks Bojan. I understand people not realizing the benefits of a gird and I can understand that there are times where you might not want to use a gird, but I don’t get why people would be against them in general. They’re such an effective tool for layouts.

  1. I like using grid it makes it easier to remember portions like u mention ratio. And it keeps my ideas organized

  2. I’ve been using grids for a while now, and I can totally see the benefits of having them versus not having them around.

    Without a grid in place, I don’t even have an idea of where to begin tossing things into the design. It usually turns out to be a mess and a total waste of time.

    With a grid set in, its much easier to get started on things, add alignment, proximity and repetition and contrast to a few things and make the design really stand out.

    That said, I’m digging into the book by Khoi Vinh regarding grids at the moment to get more information out of it. I’m pretty sure I’m not using grids as best as they can be right now.

    • I’m so glad I learned how to use them at least well enough. It really does make placing content much easier.

      How are you finding Khoi’s books. As you know I really enjoyed it. It helped me understand a few things i was confused about. Mainly in regards to what base the grid on. I knew screen size wasn’t going to be it. I wasn’t sure how you gather a starting point until reading the book.

      • Likewise, I was extremely confused on what is a good starting point for the grid.

        I’m currently in the middle of the chapter and it seems very very logical to have used the advertisement as a starting point in his example. That was something that is fixed and having a fixed element really opens up the possibilities in grids.

        I’m still not too sure how to create grids when there are no fixed elements in the web design that I should look out for.

        Like for example, there are no real dimensions to how large an image should be, or how large a sidebar should be in a blog.

        I’m still pretty confused, but I think the answers can be found towards the end of the book. I’m going to keep diving forward and see what I can learn from it.

        Thoroughly enjoying the book at the moment, but taking time to slow down and make sure I understand each concept :)

        • I thought you’d enjoy the book. Good to know you are.

          As for your question about a starting point the short answer is you make the decision to set something as fixed.

          The medium answer is you can decide images will be a maximum width and use that max-width as the starting point. Or you can set the max length on a measure of text and use that. Really anything in your content you can decide will have some dimension that becomes the starting point, the same way Khoi used the dimension of an ad unit. The ad unit just happens to have a standard dimension so you didn’t need to make the decision.

          The long answer is your question inspired a blog post and I should be publishing it a week from Monday. It’s basically more detail on the paragraph above.

Leave a Reply

Your email address will not be published.

css.php