Psychology of Design: The Grid
March 26, 2020
By Hilary Coles
When you get a new design assignment, you immediately start to think about the layout structure. After all, you want to ensure that you can deliver an organized and consistent design that is appealing.
One of the best tools that you have at your disposal is the grid. A grid system can help you put together different elements and show how they are connected.
Although you may have thought that the grid system is a thing of the past, it is still incredibly relevant today—after all, it’s important that websites be designed to adjust to multiple screen sizes.
What Exactly Is a Grid?
Simply put, a grid is a structure that you create by organizing the layout of different content. A grid divides a page into modules (sections) or columns, ensuring that your content is organized.
The lines of the grid usually aren't visible, but they help you determine the right proportions between the different elements that you want to include in your design.
Why You Should Always Use a Grid System in Your Designs
There are many different reasons you should always use a grid system in your designs. Here are the eight most important ones:
1. A Grid System Keeps Your Content Organized
One of the main benefits of using a grid system in your designs (as well as one of the main reasons why you should always use a grid system) is that it keeps your content organized. When you use a grid system, you have all of the elements perfectly ordered and aligned, and your page design is neat and clean.
2. A Grid System Makes It Easier for You
Design needs tend to come with tight deadlines, so you need to make sure that you do your job well, but quickly. A grid system can be your best friend in achieving this.
You can use grids as guides to discover the best place to put an element, the best size to scale it at, and even the best position—so you’ll be able to speed up your process and still deliver high-quality design work.
3. A Grid System Helps You Mix Different Elements
Most designs include a variety of elements—from text to image—in a wide variety of shapes and forms. You need to make sure that all of those elements are easy to see and read, and that your resulting design is clean and uncluttered.
If you need to add a few lines of text mixed with images, you can use baseline grids. These special grids are simply narrow horizontal rows and that show where your text should go. Baseline grids ensure that the entire text sits at the exact same level.
4. A Grid System Helps You Achieve a More Balanced Design
The benefit of a grid system is that it encourages better consistency in layout and balances your design. When you begin working on a new design project you should first determine the number of columns to structure your layout. This approach makes it easier to align objects on your artboard and maintain appropriate white space.
5. A Grid System Helps with the Hierarchy of Elements
Some designers believe that, because they are using a grid system in their designs, they need to have equally sized blocks. But this isn’t the case.
The truth is that whether you're designing a page, an e-book layout, a booklet, or anything else, you always have elements that are more important than others. When you create different grids in your layout, keep in mind which elements are most important so that they can be placed where they have more visual impact. You can scale up these elements so they spread across multiple columns but you should also consider their placement.
6. A Grid System Helps You Work with Other Designers
One of the most common problems among collaborating designers is miscommunication. They end up being stressed and frustrated, and the final design suffers the consequences.
However, if you use a grid system in your design when working with a colleague, he will immediately understand the overall structure. In addition, he will also have a guide to show him where he should add certain elements.
When you work with other designers, you need to be meticulous. Keeping your grid system useful and functional is the way to go.
7. A Grid System Prevents Cluttered Designs
One of the last things that you want is for your design to be cluttered. A grid system can prevent clutter thanks to its use of margins.
Margins are the space that you have around your design. The more open your margins are, the cleaner your design looks. On the other hand, when you use tight margins, your design will look more cluttered.
You should also consider using gutters. Gutters are the spaces between the columns you created with the grid system. Although you can easily adjust them, it is important to keep them consistent.
8. A Grid System Is Incredibly Flexible
One of the main advantages of a grid system is that it delivers a high level of flexibility. After all, you'll be the one deciding the number of columns that you will use in your design.
Planning a website redesign? Download "Mastering The Art of Website Redesigns" and get everything you need to plan, build, and launch a stunning website.
About the author
Hilary Coles was formerly a Senior Designer at SmartBug Media. She likes branding, visual design and your dog. When she's not helping brands find their identities, she's probably summiting a mountain. Read more articles by Hilary Coles.