Welcome back.
Let's talk about grids.
Start the brand new project and add the desktop frame.
Please change the width to 1920 as that's what I always recommend.
Zoom out a bit and let's talk about adding and using a grid system first, how you add that this is
done by selecting the frame like so now and this panel just underneath all the layout, you'll find
the layout grid.
Click it and you'll have a mobile grid applied by default.
Obviously, this is useful for the mobile apps iOS and Android, but for the web design purposes, please
click here and from grid switching up to columns.
Here are the best settings for the grid for the web design project.
12 columns and a margin of 360.
This is what I strongly recommend you use.
Now why do we need a grid?
Well, this helps us align things correctly.
Close this off and grab the rectangle tool.
Imagine we're going to design some cards for an online shop.
Write 12 columns is the standard because we can divide that number by two three four.
What even six?
Here, I'll add the rectangle that spans four columns.
I'll quickly duplicate it.
Then you'll see that it will fit quite nicely.
This grid will show you any imperfections.
For example, let me move this one just a bit to the side.
See how this stands out.
Grids keep you in line, but they also help you in Figma.
When you want to resize something, for example, for the desktop version, resize it for the tablet
version.
So 12 columns.
But why do these 60 on either side?
Well, that's my personal preference.
And here's why these 60 times do is 720 1920 minus 720 is twelve hundred pixels.
This part of the design is called the active area, and this is where all your important elements should
be placed.
Let me show you a quick example, say the New York Times, right?
See how it does a lot of empty space on either side of the content.
That's the 360 margin that we put in.
But here's the thing.
Let's switch to Stripe dot com.
You can clearly see there's a vertical line going across the left side.
Things are perfectly aligned.
OK.
Nothing else goes outside of it.
But on the right side, look what's going on.
What's happening here?
Why is this dashboard design allowed to go outside the active area?
Same thing if we scroll down just a bit.
This is actually not a mistake.
This part here in the middle, this is essential content.
You need to read it.
You need to see it.
But this part that's outside, that's just decorative.
It looks nice, but that's about it.
It's not essential.
Is not important.
So to recap, the grid for the web design projects should be 12 columns, 360 margin, 1920 wide with
a 12 hundred pixel active area.
You can place design elements outside these twelve hundred pixels, but only if they're decorative.
That means that if they're not seen, it's not a big deal.
Let me explain things a bit more.
The most used screen resolution in the world right now is 1920 by 10.
This is why my frame is 1920 and not.
64 14:40 What's something else now was the second most used resolution.
It's thirteen, sixty six by seven sixty eight.
This is mostly used on laptops, older ones, and that gives the thing.
He has a thirteen sixty six frame with a grid that's adapted to that size.
This rectangle here as twelve hundred pixels wide.
This is where the content is going to be placed and you can still see there's a bit of empty room on
either side.
So this is why I recommend twelve hundred pixels for the active area, even on older laptops.
The user is going to see the website in a decent way.
So I'm going to say that again, we design at twelve hundred pixels because this will fit well in most
computer screens and laptops, even older ones.
Now you may ask Chris, what about the 960 grid?
Sure.
That's basically just a bit narrower.
And unfortunately, narrow designs simply don't look as good.
Most people prefer large and immersive experiences.
Now, if that's the case, you may say, but Chris, why stop at twelve hundred?
Why not go to 4500 or 6500?
Maybe even more?
Wikipedia takes up all the screen real estate.
So does Amazon or Netflix.
But these are exceptions, and I can't recommend them.
You'll get into a lot of trouble if you don't follow my advice, at least.
Begin with rules are meant to be broken, sure, but not right now.
Any design that you both please make sure that you follow my advice.
1924 the frame twelve hundred pixels for the active area.
12 columns these 60 margin.
Now, before we end, I want you to do this use shift R that will reveal the dullards on the left and
on the top side.
So that's shift are now.
Click and drag away a guide.
It on either side of the active area here and when you're done here, this is where I'm going to use
as I'm recording these videos.
I'll actually hide the grid for most of the time, and even when it's enabled, it's not going to be
at 10 percent.
Instead, I might use it at three percent or something like that.
And that's because it's distracting, to be honest.
There's a lot to look at, and there are loads of design decisions to be made.
I want you to pay attention to what I'm doing and not be distracted by the grid.
I think that's a much better learning experience to hide the grid.
Simply click here on this icon.
And that's it.
OK, that wraps it up.
Please make sure that you remember those values.
19, 20 and twelve hundred pixels.
These 60 on either side 12 columns.