Think of a design grid like the foundation to a house – it’s a crucial first step in allowing for you to build a functional, and beautiful final product. It signals to the builder/designer where certain elements should be placed, what should align with what, and provides a general outline for construction.
Grids are important, usually invisible elements to just about any design. They are comprised of a certain number of rows and columns that you can align your elements against. Grids can help to keep your content in order, neat, legible and looking good.
Let’s look at some examples of different grid systems.
This example by Nikola from Magazine Designing shows a five-column grid at work. Note how some elements are contained to one column, while others stretch over two, sometimes three columns, and yet the design as a whole appears neat, clean and well aligned.
For a bit more flexibility, consider adding in some more columns, like this example below.
Once again from Nikola from Magazine Designing, this image shows how a twelve-column grid can give you a lot of flexibility when it comes to aligning your elements. Once again, note how some elements span many columns, while others sit over just two. Don’t think of your grid as lines you have to colour inside of, but rather a set of simple guidelines used to help you create a stunning design.
So, find a grid that suits you and your design and move from there.
Now we’ve established what a grid is, what it looks like, and how it works, let’s look at some real world examples of grids at work. Check out this example below by Matt Willey, and try to figure out how many columns he used in this design’s grid.
Did you estimate three? Or perhaps six? Either way, this example has a clear and identifiable grid system to which each element has been aligned, making for a striking, neat and attractive design.
Grids are flexible, adaptable and infinitely handy, so consider using one for your next design and see what it can do for you!