Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
When creating layouts, most designers use a grid system that's comprised of a series of columns of equal width, separated by some space called gutters.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
When creating layouts, most designers
use a grid system that's comprised
0:00
of a series of columns of equal width
separated by some space called gutters.
0:05
Let me show you what I mean.
0:11
In Adobe XD,
if you click the name of the artboard,
0:14
which in this case is desktop and
tablet, and
0:19
then in the inspector on the right
check the box underneath grid.
0:23
You'll see a series of columns
overlaid on top of your design.
0:31
By default, there are 12 columns and
each one has a width of 51 units and
0:37
the gutters between each column
have a width of 16 units.
0:44
For the sake of simplicity,
we're going to stick with this default.
0:49
Many front-end frameworks used in web
design Include a customizable grid system.
0:53
So, in theory, you should be able to
work with this grid in Adobe XD and
0:58
then transfer your grid measurements.
1:03
But for the sake of these videos, we'll
just stay focused on the visual design.
1:06
Now in the last video,
1:11
I mentioned there was something
very wrong about this layout.
1:13
If you look along the left
edge of the grid, you'll
1:18
see that things like write a review or
1:25
the search bar are hanging
off the left side, but
1:30
along the right side that's not the case,
1:36
there's a sign up button and
there's the search bar.
1:41
That's because this entire
layout is slightly off-center.
1:47
So let's get to work fixing that.
1:53
First, let's move this nav bar so
that it's centered.
1:57
And the smart guides should help us there,
so it snapped to the middle.
2:03
And since we're working on
horizontal spacing using our grid,
2:09
let's take a look at these lengths.
2:14
Because these are just text lengths,
2:19
I don't think they need to be
perfectly aligned to grid columns.
2:22
But let's try just spacing
these a little differently.
2:25
I'm going to drag some of these,
and oftentimes when
2:34
you have a button like this you
can just sort of eyeball it.
2:39
I like that spacing write a review.
2:45
Some space there.
2:48
Forums, it looks like there's the end of
a column and the beginning of a column and
2:49
the gutter, and it looks like roughly the
same width between the edge of the button
2:53
and login there, so I am happy with that.
2:58
In CSS, of course, this would be a little
bit more precise, but that's fine for now.
3:02
Next, let's take a look at this logo.
3:09
I'll center it first, and
I'm actually going to tap the arrow key-
3:16
About seven times there.
3:24
And I just want to try to
visually center this word zerts
3:27
because we have this little
star up in the upper right,
3:33
so that actually puts
the text slightly off-center
3:38
from the bounding box,
that looks good to me visually.
3:43
And then let's take this tag line and
3:49
let's actually try to just tuck
that underneath zerts there.
3:54
I'm going to reduce the font size
just a little bit, maybe to about 21,
4:02
tried that out, maybe 20, there we go,
4:07
that looks pretty good to me.
4:13
And you can adjust spacing on
these elements however you'd like,
4:19
it doesn't have to follow
this example exactly,
4:24
whatever looks good to you
is what you should go with.
4:27
Now let's center this search bar, so
4:32
I'm just going to drag that over and
let it snap to the middle.
4:35
I wanna check the left and
right sides here.
4:40
It's not perfect but it's pretty close.
4:44
Check one more time here.
4:52
Yeah, that's fine.
4:54
Then there is the new
in your city section,
4:54
so let's just select that.
4:59
And I'm actually gonna use
the arrow keys to move that over.
5:02
Looked like the smart guide
snapped there on the left, and,
5:07
yep, that is perfectly
aligned to the grid.
5:10
Happy with that.
5:14
Actually let's take a look at this text.
5:15
Yep, that is aligned, okay?
5:18
And then the blog section
5:21
is too far to the right and
it's spilling off of the grid.
5:24
So we need to move that over to the left.
5:30
And let's zoom in on the edge
of this column, yep,
5:34
looks like it's lined up there.
5:38
And then finally,
select all of the elements in the footer.
5:41
So we need to select register a business,
support, careers and privacy policy.
5:46
And I'm just holding down the shift key
to select each one of those as I click.
5:52
And then let's just tap
to move those over.
5:58
I'll zoom in here.
6:02
Let's see actually if we can just use
the arrow keys or the smart guides.
6:04
There we go.
6:12
That looks good to me.
6:15
And if you have a horizontal
group of items like this,
6:18
you can actually use these alignment
tools in Adobe XD to space them evenly.
6:22
So let's click this button here to
distribute them evenly horizontally.
6:29
And you'll see that puts
an even amount of space
6:36
between each link here without
adjusting the edges, and
6:38
it's still aligned to our grid columns
there without spilling into a gutter.
6:41
So let's zoom back out here and
take a look at this.
6:48
You may have noticed that some
things like the blog section or
6:55
these content cards are already sized so
7:01
that they span the width of a few columns.
7:06
I did that already intentionally
just to save us some time.
7:10
But normally when creating a new layout,
7:13
you would need to resize
these to the grid yourself.
7:16
So notice how from the blog
hits the left side of
7:19
this column, and
it spans several columns and
7:24
then ends on the right
side of this column here.
7:29
Same thing for this content card here,
7:34
it spans the width of three columns,
goes across the gutters,
7:37
and it doesn't spill into the left or
right gutter.
7:43
But there's one more thing
we need to fix here, and
7:47
that's this second content card for
macarooni & cheese.
7:51
So, let's select that.
7:57
And I'm just going to use
the arrow keys to move it over.
8:00
And it looks like it's slightly
not vertically aligned
8:05
with the other content card, so let's
move it up so that it is, there we go.
8:12
So now the vertical alignment
is consistent because they
8:18
are the same height.
8:23
Let's just check the top there,
yep, that looks good.
8:25
And now it's sitting on
the grid with three columns.
8:30
And that's it, let's zoom back out.
8:37
We'll select the artboard again and
turn off the grid.
8:40
And when you're done, save your work.
8:45
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up