Why You Should Use a Grid for Designing Layouts

UX design is both an art and a science. Not only are we trying to create products and services that work well and are easy to use backed by data, but sometimes we want to innovate and create something new and in that effort, veer away from standards and conventions. Well, I’m here to advocate for a standard that’s gotten a bad rap over the years. The Grit. OK, before you call the grid a shackle to creativity. Hear me out.

Let’s say you wanted to go from the Parsons School of Design in New York City to the Empire State Building to meet up with a friend. Whether you’re a New York City resident or a tourist, it’s easy to figure out how to get from one place to another.

Thanks to the incredible grid system and better yet, the streets are numbered. Grids are fantastic because they create predictability in structures. They allow new and returning visitors to quickly get their bearings and easily find what they’re looking for. Here’s how they provide a consistent reference point making readability and scalability easier. People scan a lot more than they read, and that enables people to quickly find information they’re looking for. Grids also establish a structure which enables designers to quickly organize information, making the site look cleaner and more professional. As a result, they can also help establish break points when you’re making device independent designs.

In short, they’re a great way to create structures without reinventing the wheel. Boring.

But why do you think it’s boring? Because all sites will look exactly the same, even if they’re easy to use. I’m a designer. I need to design, not copy paste. OK, well, what if I told you that you can be creative and use a grid? I’m listening. You can strategically break the grid in order to emphasize important content. However, it has to be done sparingly so that the site structure stays intact. Let’s look at this example from Wayfair. Dotcom Wayfair uses a three column grid system, but they break the grid at five specific moments in order to draw attention towards certain things. For instance, the hero image is very large falling outside the grid area. This is also slightly outside the grid, drawing the user’s eye. Then these two other sections have their own grid, a five column structure which breaks the three column grid, but in a way that emphasizes the contents of that section.

Yes, a grid structure can seem authoritative and rigid at first, but it does provide a set of boundaries and rules that allows users to quickly find information and also enables designers to quickly organize information. Good designers know when to follow the rules, and great designers know exactly when and why to break them. True creativity, after all, lies in the ability to see constraints as opportunities. Good luck.

Happy designing.

Leave a comment

Your email address will not be published. Required fields are marked *