Let's get griddy

We’re continuing our #notadesignernewyear challenge by exploring grids and spacing.

So far, we’ve:

• Picked our project

• Gathered and prioritized our content

• Laid out the main pieces of our design into rows

• Laid out our hero

I’m working on redoing my personal site. You can check out the journey so far, but if you’re just tuning in, no worries! You can jump in here.

In today’s issue, we’re digging into grids to help us figure out precisely where to put our elements. We’ll dig into rows and columns and a whole spacing system based on an 8px scale that’s going to be really helpful in making design decisions easier.

This issue of Not A Designer is brought to you by Erik Kennedy of LearnUI, a REAL designer who used to be an engineer, has created design courses taken by thousands of students, and has his own newsletter, Design Hacks. Make sure to check out his stuff! 🤗

Let’s begin!

So I’ve decided on a two-column layout for my hero. But where exactly do I put each element on the page? Where in my column does my heading go? How far away is the subheading? And how far away from that are my links?

For a lot of seasoned designers, this placement process is intuitive. They eyeball the spacing and go with what looks right for them. Indeed, the exact placement of elements is pretty subjective, but I still wish I had some guidelines to help me out. Luckily, there’s a tool that I’ve found really helpful in figuring out where to put things: the 8-px grid*.

*Note: You might also see this referred to as the 8pt grid. It’s the same thing, only we’re using pixels since we’re working with screens.

Intro to grids

Grids can be a really helpful way to bring structure to a page, and they aren’t just used in interfaces. They’re a common tool for all kinds of visual design – posters, graphics, paintings, you name it.

A grid has four key elements: columns, rows, gutter, and margin (note: this margin is not the same as the margin attribute in CSS. I’ll explain shortly).

Theoretically, you can pick whatever sizes you want for these elements, but because we’re using an 8px grid system for our interface, that comes with some standards.

Columns

We start by picking how many columns we want in our layout. We generally want 12 columns. Twelve is a great number for columns because it’s divisible by so many numbers – 1, 2, 3, 4, 6 – which means we can group them in many different ways.

If you have a collage of items, you can have them each take up two columns and fit six in one row. If you’re working with a two-column layout, like what I’m doing for our hero, that’s fine too! We can have each one be six columns wide. If we want a nice wide image but a more narrow text area, we can have the image take up nine columns and the text take up just three columns. So much flexibility!

Your column width is the one thing that we actually don’t want to set to a fixed number. As the window size changes from screen to screen, we want the width of our content to be able to accommodate those changes. Instead, we want to set our spacing, the white space outside of our content, according to our 8px scale.

So we’ll we set our column width to “auto” so that it scales with the size of the frame. One less size to worry about!

Gutter and Margin

But what about the gutter and the margin?

Our gutter is the space in between our columns or rows. For our columns, our margin is the left and right space between the edge of the screen and our set of columns. For our rows, our margin is the top and bottom space between the edge of the screen and our set of rows.

Here’s a diagram to illustrate:

Setting the gutter and margin is the first place where the number 8 comes into play.

8px scale

In an 8px system, everything spacing related is on the 8px scale. That means that your smallest unit will start with 8px, the next will be 16px, then 24px, and you keep going up by 8.

Here’s what the scale looks like:

On occasion, you’ll need something a bit smaller, like when dealing with icons, and you can go down to 4px for those scenarios. But in general, you’ll stick to 8px.

That means that when it comes to picking my gutter and margin values, I don’t have to make up a number – I can refer to this scale.

I don’t know about you, but this gives me a huge sigh of relief.

When you’re still pretty new to design, being given constraints to work within can, ironically, make you freer. It gives you a starting point and reduces decision fatigue. Making decisions becomes easier. Being forced to pick values from that 8px scale helps narrow down your options significantly.

So for our gutters and our margin, we’re going to pick a value from our 8px scale. But which do we pick?

Margin

Let’s start with the margin.

This is where we need to consider the content we’re working with.

For example, let’s say I’m designing something like the Dribbble interface with its grid of images. I want to fill my screen with as many images as possible. I need all the width I can get! That means that my margins are going to be more narrow.

If we measure the margins of this design, they’re about 72px on each side.

But if we’re designing something more narrow, like the hero of my personal site, there’s not a ton of things I need to make space for. I’ve got my photo on one side and my text on the other. To make sure my text is readable, I don’t want it to be too wide. So with all that in mind, I’m going to choose a bigger margin, something like 320px.

Gutter

Now for my gutters. We want something that lets the columns breathe, but just a bit.

For a bigger screen like a desktop, 24px is a value that came up a ton in my research, so let’s go with that. As our screen gets a bit narrower and we’re a bit more pressed for space, we can drop that down to 16px.

With 12 columns, a 24px gutter, and a 320px margin, here’s what my layout looks like so far on Figma’s Macbook Pro 16” frame, which has a screen width of 1728px.

Making this in Figma, a great, collaborative design tool I use for all my design work, is super easy. Let me show you how.

In the right panel, click the “+” icon under “Layout grid.” When you do, Figma defaults it to “Grid 10px.”

Click on the grid icon on the left and select “Columns” from the drop down.

Then fill in your values for count, margin, and gutter.

This is great because it gives us guidelines on where to place things moving across the screen.

But we’re not just laying things across the screen, we’re also laying them down the screen.

But before we dig into that, let’s take a quick design break!

I’m super excited about Not A Designer’s January sponsor, Design Hacks, a newsletter run by incredible designer Erik D. Kennedy. Design Hacks helps you create better designs. It features short, original UI/UX tips & tactics. It’s read by over 50,000 people from Apple, Google, Stripe, and more. Check it out here.

So how do we know where to place things as we move downwards?

You might think we need rows, but rows aren’t exactly the right tool here.

The problem with rows is that we’ll need to specify how many we need and we’ll need to give them a margin and a gutter too. These rows might be a helpful way to lay out large sections of our page, but that might change so I don’t want to hardcode that number just yet.

Instead, I want something that will help me place all the tiny rows of elements that make up each section. What we want are guidelines with a lot of flexibility.

Sometimes, we’ll deal with elements that we want spaced close enough together and only need a teeny bit of breathing room, like between our heading and subheading. Other times, we’re spacing out two sections that might need a bigger break from each other.

So how do we get a system that gives us that flexibility?

This is where the “grid” part of the 8px grid system comes in.

When you set up your columns in Figma, you may have noticed that it actually gave you three options of what to add: grid, column, and rows. In CSS, we use the term “grid” even when we’re just adding columns without the rows. To figure out how to space things moving down, instead of adding rows, we’re going to add a grid that has lines for both columns and rows.

By adding a grid, we’ll get guidelines for both rows and columns spaced a certain number of pixels apart going all the way down and all the way across. We don’t really need the column guidelines since we already specified our columns, so will just use the row guidelines.

Since we’re using our 8px spacing system, we’ll space the guidelines exactly 8px apart.

Let’s add that now.

With this grid, I know that the smallest amount of space between two elements is going to be 8px but it can get as large as I want! Wonderful. That gives me both constraints to get going in addition to that flexibility that I need.

But I’ve still got quite a few values to pick from. How do I choose the right one?

This is where we introduce an important design principle that can help us out: proximity. This principle states that when two elements are close together, we assume they are related. The further apart, the less related we think they are.

Let’s use an example to illustrate.

In my hero for my personal site, I’ve decided on a two-column layout: one for my text and the other for my image. In the first column, I have my name, the subheading, and my social links.

How do I use the proximity principle to determine their spacing?

Well, I know that the content of those three elements are pretty tightly related, so I want them to be visually close to each other. So on my 8px spacing scale, I want to pick something on the small end. Let’s pick 16px and see how that feels.

Here’s what that looks like with the columns and grid.

And here’s what it looks like without the columns and grid.

Not bad, but I think we can do better.

We’ve determined that the three elements are all related to each other, but they’re not equally related. I would say that the heading and subheading are more closely related to each other than they are to the social links.

So if I use the principle of proximity to inform my spacing further, I would keep the spacing between the heading and subheading at 16px and increase the spacing between my subheading and my social links. That way, my heading and subheading will feel like a little group, separate from the links. Let’s try that and see how it feels.

Here’s the version with the columns and grid.

And here’s the version without the columns and grid.

I like this better. It feels like a small change that packs a punch. It’s more organized, more intentional. The difference in spacing allows me to communicate the way the different elements are related. Doing it on an 8px scale made picking the spacing easier. Are two items more related? Go lower on that scale. Are they less related? Go up.

Now it’s your turn. Try laying out the hero of your project using an 8px grid system.

Do that by going into Figma and:

• Setting up your columns: Go for 12 columns, a 24px gutter if you’re on desktop (16px for mobile), and determine your margin (still on our 8px scale) based on your content

• Set up your 8px grid so you have guidelines for the vertical spacing

• Use the principle of proximity to determine your spacing between elements, still using the 8px scale

I will say that using a grid or a column system isn’t mandatory. In fact, Erik Kennedy isn’t a big fan of them. He thinks of grids as a tool that helps with alignment more than anything else. But I find that when I don’t know where to place things, columns and grids give me a starting point by narrowing down my choices and making the decision a lot easier.

So if you end up using a grid system for your design, let me know how it goes!

Happy designing <3

Saron