Create a 12 Column Grid in Adobe XD

Create a 12 Column Grid in Adobe XD

Hi there, this video is all about creating
something called a Baseline Grid. Some of you will know what that is,
some of you won’t. Basically it’s lots of squares
like this to add a bit of… visual consistency where
things start lining up. Allowing the design to kind of breathe
a little while you’re working. Everything has its place,
everything’s lined up nicely. Let me show you how to make one,
and why you might use one. So we’ve done a little bit
of this before… but we’re going to go into
a little bit more detail now. Especially with the grid, and something
called a Baseline Grid system. Let’s do the comments first because
they’re easy, and they just kind of recap. So I’m going to click on
my word ‘Homepage’. I’m going to say, I want a grid,
I want it to be layout. I want it to be–
I’m going to turn it to ‘1’… and I want to make sure
that it’s my ‘1366’ wide. So then I know I’m kind
of within those gaps. If you do then want to
use a 12-column grid… which a lot of designers do… and you can tow it in there
and just use this kind of columns… to add a little bit of consistency
throughout all the web pages. I don’t want to add consistency
for this particular one. Also you can do 6, doesn’t have
to be 12, it can be 4. Just something that’s easily divisible… but I’m just going to use 1. Now we’re going to introduce
this thing called a Baseline Grid. So you can have both a layout
and a square grid, both of them. I’ll show you what they are. Basically if I zoom in here
you’ll see that… at the moment I’ve got a square grid,
and it is 4-pixel grid. I think my colors, the opacity
is quite up, quite high. I’m going to turn it up to really strong… so you can see it a little bit
clearer on the video. So basically what I’ve got now is… XD said, every– I’m just going
to give you a guide. Every four pixels I’m going
to draw a little square. And it just allows you, when you’re
designing, to add some consistency. We’re going to cover this more and more… because it’s not a hard topic
but it becomes more obvious later on… when we’re working through
fonts and a few other things. You don’t have to use a Baseline Grid.
I’ll show you what it does. I’m going to switch to our old version
of the wireframe. And in here I’m going to click on
the name and do the same thing. Turn on the ‘Square’ grid. I’m using 8 here instead of 4. And what it’s going to allow me to do is,
can you see, there’s no… there’s no consistency,
can you see, this one kind of… see the lines here,
just don’t want kind of… they’re all just kind of
all over the place. And I’ll show you what I’d end up doing. I’ll double click to go inside. And what I want to do is I want to try
and adjust this so that it will snap. So it starts snapping to these grids. So that you’ve got at least some sort
of consistency across these guys. I’m going to click on him,
drag him out, so he’s lining up. You can see now, there’s a bit of– it’s just one of those things,
if you’re new to design… when I first started InDesign,
I was like… “Why would you bother
with all those grids?” Then after a while you start realizing… there’s just a, I know,
when things start lining up… in a kind of consistently
left and right lined up… there’s a relaxing of
the design, kind of like… takes a breath and kind of goes, “Hah!” Everything kind of lines up, which is nice. But for a long time I just
didn’t care, but I do now. You can see here, I want, the spacing is– or this to be consistent with this. So I’m going to go into this one
and just bring it in. Especially when you’re not using columns… a grid system’s really handy,
just to lock it all in… make sure the Types are all locked in. You can use your arrow key
to type it around. That’s just a quick little introduction… of what you use a Baseline Grid for,
and why you’d bother. We’re going to turn it on in this version. We’re not going to have it so dark,
and now what size should it be? We’ll look at this later on,
but basically divide you… whatever your body copy size, by half,
that’s going to make a life a lot easier. So I’m going to use 16 point. And for my body copy, I know that
I use 16 point on everything. If you don’t know yet, don’t worry,
you can change this later on… but I’m using 16 points,
so I’m going to divide it by 2… which is 8 pixels squares… and I’m going to turn this down
so it’s not so deafening… visually deafening. I’m going to introduce
a couple of shortcuts. I might have done this before… but it’s ‘Command Shift’ and apostrophe. Will turn on the layout,
so these kind of giant column. If you do just Command Apostrophe’,
it turns on the grid. So you end up kind of toggling
that on and off quite a bit. So I’m just holding down my ‘Command’ key,
which is ‘Ctrl’ key on a PC… and just clicking the apostrophe key. I turn this on and off all the time
to get things to line up. If you can’t get yours to work with
that shortcut, it’s, whatever appears… these are the two that you want
on your computer. You can see, in my case,
just command apostrophe. So I’ve created my columns,
I’ve created my grid system. What I’m going to do as well
before I go is… I’m going to turn it on,
and I’m going to set it… I’m going to make this the default. So whenever I make a new page
it’s going to do this. Same with the layout,
I’m going to make this the default… so that every new page has this. If you decide to not move on with
the grid, I’ll understand, it’s okay… but for now let’s jump into the next video. Hi there, I hope you enjoyed the video. My name is Daniel Scott. If you would like to do the full course… there will be a link in
the description for that. Please give this video, on YouTube here… a thumbs up, really helps me
in what I’m doing. Also, consider subscribing to the channel. I release a video like this every week,
for your viewing pleasure. All right, bye.


  1. Do you have any course about how to use 12 column grid system in web design ( I need a complete course about 12 columns & How-to use 12 columns grid while web design in Photoshop or other designing tools)

Leave a Reply

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