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
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
Thirsty for more grid systems? Let's go!
Resources
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
Earlier, you saw how to use a baseline
grid to create rhythm in a design.
0:00
Now, we'll cover some
other types of grids.
0:05
Now that you know text is easier
to read when it's in a column,
0:09
you may find yourself with
designs that have white space.
0:13
How can you lay out the text and
other content?
0:16
First up the multi-column grid.
0:19
Multi-column grids allow
you to create hierarchy and
0:22
integrate text with photos or graphs.
0:26
You can define certain zones for
0:28
photos, and you can allow content
to span multiple columns.
0:30
Aim for an average of 40
to 50 characters per line.
0:35
Back to our project,
0:39
here's an alternative way we could
layout the type in a multi-column grid.
0:40
To create this, click the plus
sign to add another layout grid.
0:45
You'll want to define the columns so
they match up with the baseline grid.
0:50
So it's important to
see both grids at once.
0:55
Select Columns and set it to 3 columns.
0:59
For the margin, make it 64 pixels so
it spans two 32-pixel squares.
1:02
For the gutter, make it 32 pixels.
1:09
This will work best in order to lay
out the type with good measure.
1:12
Then arrange the content to align the
columns while maintaining alignment with
1:17
the baseline grid.
1:22
For the headline,
you'll need to adjust the line height and
1:24
remove any paragraph spacing if that
happened to be set on the text box.
1:27
I added a photo of Mars to
spice up the white space.
1:31
As you work on it, it helps to hide the
grids to check out how the layout looks
1:35
without the red guidelines.
1:39
Second up is the hang line.
1:47
In the hang line grid,
1:50
you can divide the page horizontally
to designate a given area of the page.
1:51
This is called the hang line.
1:56
The area often contains images,
footnotes, asides, and so
1:58
on that complement the main text.
2:02
Lastly, the modular grid.
2:06
These were popular among Swiss
designers in the 1950s and 1960s.
2:09
In this style of grid, the art board
is divided into consistent divisions,
2:14
horizontally and vertically.
2:18
Content can span across
sections as you wish.
2:20
That's it for types of grids.
2:24
Keep in mind when you design for
the web you want to prepare for
2:26
a range of screen sizes.
2:29
For instance, a mockup for a responsive
website design could be in three parts.
2:31
A desktop design with a three column grid,
a tablet design with a two column grid,
2:36
and a mobile design
with a one column grid.
2:42
If you're interested in learning more,
check out designers Kirchner and
2:45
Muller-Brockmann for inspiration.
2:48
I put some links in the teacher's notes.
2:50
Stay tuned for
2:53
the next video where we'll look at
the super cool world of variable fonts.
2:54
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