1
00:00:00,800 --> 00:00:05,900
Earlier, you saw how to use a baseline
grid to create rhythm in a design.

2
00:00:05,900 --> 00:00:09,300
Now, we'll cover some
other types of grids.

3
00:00:09,300 --> 00:00:13,180
Now that you know text is easier
to read when it's in a column,

4
00:00:13,180 --> 00:00:16,740
you may find yourself with
designs that have white space.

5
00:00:16,740 --> 00:00:19,121
How can you lay out the text and
other content?

6
00:00:19,121 --> 00:00:22,541
First up the multi-column grid.

7
00:00:22,541 --> 00:00:26,090
Multi-column grids allow
you to create hierarchy and

8
00:00:26,090 --> 00:00:28,970
integrate text with photos or graphs.

9
00:00:28,970 --> 00:00:30,640
You can define certain zones for

10
00:00:30,640 --> 00:00:35,420
photos, and you can allow content
to span multiple columns.

11
00:00:35,420 --> 00:00:39,270
Aim for an average of 40
to 50 characters per line.

12
00:00:39,270 --> 00:00:40,460
Back to our project,

13
00:00:40,460 --> 00:00:44,697
here's an alternative way we could
layout the type in a multi-column grid.

14
00:00:45,980 --> 00:00:50,775
To create this, click the plus
sign to add another layout grid.

15
00:00:50,775 --> 00:00:55,010
You'll want to define the columns so
they match up with the baseline grid.

16
00:00:55,010 --> 00:00:57,650
So it's important to
see both grids at once.

17
00:00:59,050 --> 00:01:02,590
Select Columns and set it to 3 columns.

18
00:01:02,590 --> 00:01:08,530
For the margin, make it 64 pixels so
it spans two 32-pixel squares.

19
00:01:09,540 --> 00:01:12,940
For the gutter, make it 32 pixels.

20
00:01:12,940 --> 00:01:16,550
This will work best in order to lay
out the type with good measure.

21
00:01:17,980 --> 00:01:22,600
Then arrange the content to align the
columns while maintaining alignment with

22
00:01:22,600 --> 00:01:24,490
the baseline grid.

23
00:01:24,490 --> 00:01:27,754
For the headline,
you'll need to adjust the line height and

24
00:01:27,754 --> 00:01:31,604
remove any paragraph spacing if that
happened to be set on the text box.

25
00:01:31,604 --> 00:01:35,362
I added a photo of Mars to
spice up the white space.

26
00:01:35,362 --> 00:01:39,811
As you work on it, it helps to hide the
grids to check out how the layout looks

27
00:01:39,811 --> 00:01:41,591
without the red guidelines.

28
00:01:47,748 --> 00:01:50,010
Second up is the hang line.

29
00:01:50,010 --> 00:01:51,460
In the hang line grid,

30
00:01:51,460 --> 00:01:56,130
you can divide the page horizontally
to designate a given area of the page.

31
00:01:56,130 --> 00:01:57,420
This is called the hang line.

32
00:01:58,420 --> 00:02:02,810
The area often contains images,
footnotes, asides, and so

33
00:02:02,810 --> 00:02:05,080
on that complement the main text.

34
00:02:06,490 --> 00:02:09,130
Lastly, the modular grid.

35
00:02:09,130 --> 00:02:14,340
These were popular among Swiss
designers in the 1950s and 1960s.

36
00:02:14,340 --> 00:02:18,620
In this style of grid, the art board
is divided into consistent divisions,

37
00:02:18,620 --> 00:02:20,910
horizontally and vertically.

38
00:02:20,910 --> 00:02:23,340
Content can span across
sections as you wish.

39
00:02:24,380 --> 00:02:26,500
That's it for types of grids.

40
00:02:26,500 --> 00:02:29,730
Keep in mind when you design for
the web you want to prepare for

41
00:02:29,730 --> 00:02:31,600
a range of screen sizes.

42
00:02:31,600 --> 00:02:36,280
For instance, a mockup for a responsive
website design could be in three parts.

43
00:02:36,280 --> 00:02:42,160
A desktop design with a three column grid,
a tablet design with a two column grid,

44
00:02:42,160 --> 00:02:44,330
and a mobile design
with a one column grid.

45
00:02:45,340 --> 00:02:48,616
If you're interested in learning more,
check out designers Kirchner and

46
00:02:48,616 --> 00:02:50,920
Muller-Brockmann for inspiration.

47
00:02:50,920 --> 00:02:53,590
I put some links in the teacher's notes.

48
00:02:53,590 --> 00:02:54,350
Stay tuned for

49
00:02:54,350 --> 00:02:59,090
the next video where we'll look at
the super cool world of variable fonts.