How to Master the Design Grid
A crash course for designing digital stuff using a grid system
For the past year, I’ve been teaching UX and Product Design at General Assembly here in Toronto. I’ve learned a ton, and the students that come through the door are full of excitement, hope and enthusiasm for building the products and services of tomorrow.
On several occasions I’ve seen that excitement, hope and enthusiasm drain from their faces, and leave them drowning in a pool of despair. The cause? The all-powerful Grid.
In an effort to help those of you who are just starting out in UX/UI Design overcome the panic and confusion that sometimes surrounds the grid, I’ve put together a handy crash course so you can attack the grid like a champ and get cracking on your world-changing ideas. We’ll cover a few different topics here, including:
- The Grid Guts — What’s the grid made up of?
- Designing On The Grid — How to actually lay stuff out on the grid.
- Creative Flexibility — Knowing how to bend the grid to your will
- The Baseline — The other part of a grid system that does wonders for vertical rhythm.
A caveat — This guide is geared more towards responsive web design, and revolves around a fluid 12-column grid, but the grid principles can be applied across any digital thing you’re designing. Let’s dive in.
The Grid Guts
The grid is made up of two main components — Columns and Gutters. Together, they make up the horizontal width of your screen, and they work together, but there are a few rules to know.
The main one is that columns are a happy place where your design elements can begin and end, and the gutter is a dangerous chasm you want to avoid. Simple enough, right?
Now that we’ve got the basics of the grid out of the way, let’s get into actually designing on it.
Designing On The Grid
In order to “align to the grid”, which refers to the horizontal grid of columns and gutters, objects and typography outside of a parent container should always begin and end on the edge of a column. In this first image, these rectangles look innocent enough.
But when we reveal the grid overlay in Sketch, OH THE TREACHERY. Our friend the little rectangle isn’t on the grid. As you can see above, the left and right edges of the little rectangle begin and end in the gutter, whereas the larger rectangle’s edges begin and end in a column. That rectangle knows what’s up.
Creative Flexibility
I know some of you might be thinking that the grid seems pretty restricting, and sure, there are rules, but there’s also ways to bend those rules a bit, which can be extremely liberating. Here’s one of my favourite quotes that Mrs. Vivona, my high school drama teacher said to me:
“You can’t act until you know your lines.”
She’d always say we can’t really be actors until we learned our lines cold. How could we be really creative, and bring our personalities into a role if we were always thinking about what to say next?
For grids, it means you can’t start to experiment, push the boundaries, or infuse your own style into your designs, until you learn the constraints. So get freakin’ wild, and design your hearts out, but keep the rules in mind.
When it comes to bending those rules, remember this — As long as your parent container is on the grid, the stuff inside that container can have some flexibility. Here’s what I mean:
See it? In the above example, both of these design elements are technically on the grid. The text itself isn’t on the horizontal grid, but its parent container is, which makes it okay.
The Baseline Grid
In addition to the horizontal rhythm you’re creating with columns and gutters, there’s a vertical alignment and rhythm that you should create by using a baseline grid.
A baseline is a pre-measured, incremental height that all objects and typography should be aligned to. At Filament, we use a 7px baseline, because for us, 28px is a comfortable, readable line-height for a 16pt base font. Others use an 8px or 5px baseline depending on their preference, or the platform they’re designing for. In our experience, a 7px or 8px baseline works great.
Aligning design elements like images or containers to the baseline means making their heights a multiple of the baseline value — in this case, 7px. For typography, it means the line-height of that typeface is a multiple of the baseline value — so the line height could be 7, 14, 21, 28, 35 etc. It’s important to note that the font size doesn’t have to be a multiple of the baseline, only the line height.
Go Forth and Design
Grids don’t have to be panic-inducing. In fact, they can be pretty incredible once you understand the basics of how to use them, and the more you work with the grid, the better you’ll be at bending it to your will. You’ve got this. I’m looking forward to hearing about your grid success stories in the comments.
Found this useful? A 👏 below will help others find it too.
