1
00:00:01,070 --> 00:00:02,780
Hey and welcome back.

2
00:00:03,110 --> 00:00:05,070
We're going to talk about the grid today.

3
00:00:05,770 --> 00:00:08,020
Now, what is a grid?

4
00:00:08,750 --> 00:00:10,980
Lots of people are scared of it for some reason.

5
00:00:10,980 --> 00:00:11,870
You know, I get it.

6
00:00:12,110 --> 00:00:15,080
Grids kind of look really restrictive and they look scary.

7
00:00:15,090 --> 00:00:16,210
I mean, just look at this thing.

8
00:00:16,220 --> 00:00:16,670
Wow.

9
00:00:17,390 --> 00:00:21,050
Even though they look like prison bars, they aren't as restrictive as you may think.

10
00:00:21,900 --> 00:00:26,530
The grid is a structure comprising of a series of lines that divide the page into columns.

11
00:00:27,210 --> 00:00:35,040
We have vertical and horizontal, and this structure helps designers arrange content on a page like

12
00:00:35,040 --> 00:00:37,680
you can see here, everything is sitting on a grid.

13
00:00:38,610 --> 00:00:40,680
This is something we never included in our final designs.

14
00:00:40,680 --> 00:00:45,330
You'll never see somebody printed poster like this and have a grid showing, or you'll never see a website

15
00:00:45,330 --> 00:00:48,030
with a grid showing unless somebody purposefully did that.

16
00:00:48,030 --> 00:00:50,360
But usually that's incredibly rare.

17
00:00:50,760 --> 00:00:55,040
Maybe it's a stylistic approach, but I don't really recommend it now.

18
00:00:55,260 --> 00:00:56,970
It serves as a skeleton for your layout.

19
00:00:57,480 --> 00:00:59,910
And originally the grid came from print design.

20
00:00:59,910 --> 00:01:05,400
But if we ever think about where there are grids, I mean, they're basically applied in a lot of places.

21
00:01:05,430 --> 00:01:06,030
Let's take a look.

22
00:01:06,690 --> 00:01:07,920
We got bookcases.

23
00:01:08,610 --> 00:01:10,980
We even have subdivisions.

24
00:01:10,980 --> 00:01:12,870
I mean, they are everywhere.

25
00:01:13,900 --> 00:01:18,760
I want to show you more about, but I want to teach you a little bit of history, because I think understanding

26
00:01:18,760 --> 00:01:21,340
the past will really help you understand the basics.

27
00:01:22,360 --> 00:01:29,170
Now, grids have always been linked to typography over here, they were first used to arrange handwriting

28
00:01:29,860 --> 00:01:33,190
on paper and then later on were transformed into the manuscript layout.

29
00:01:33,650 --> 00:01:34,690
Could see this over here.

30
00:01:35,110 --> 00:01:38,410
And we're going to get into with the manuscript layout, looks like, and what it comprises of.

31
00:01:39,360 --> 00:01:45,000
Since the early days, grids were used to help aid readers in reading, now let's fast forward all the

32
00:01:45,000 --> 00:01:46,470
way to the Renaissance.

33
00:01:47,520 --> 00:01:53,670
Now, this era had a profound impact on great systems, I mean, many artists strived for perfect geometry.

34
00:01:54,240 --> 00:01:57,980
Many paintings resulted in the centered symmetrical layouts like this.

35
00:01:58,500 --> 00:02:00,660
We have very centered layout.

36
00:02:01,210 --> 00:02:04,740
You could see all the symmetry and hidden geometry within this painting.

37
00:02:05,070 --> 00:02:08,790
You wouldn't necessarily notice it if these guidelines weren't here to show you.

38
00:02:08,790 --> 00:02:12,150
But this was a lot of Renaissance paintings really strived for.

39
00:02:13,420 --> 00:02:17,530
You ever heard of the golden ratio in the 13th century, lied to Hong Kong.

40
00:02:17,530 --> 00:02:20,730
It created the diagram to achieve harmonious design.

41
00:02:21,190 --> 00:02:26,500
This diagram was a merger between the grid system and the golden ratio, and it was great to produce

42
00:02:26,500 --> 00:02:29,680
page layouts based off of margins with fixed ratios.

43
00:02:30,130 --> 00:02:32,170
And this technique is still used in today.

44
00:02:32,890 --> 00:02:39,700
You can see that this is a fairly recent layout and it is in fact using it, jumping forward to the

45
00:02:39,700 --> 00:02:47,020
industrial revolution, beginning of mass production and the rise of newspapers, posters, et cetera,

46
00:02:47,260 --> 00:02:51,820
with so much content on one page, like, look at this, it's it's hard to read as is even with a nice

47
00:02:51,820 --> 00:02:57,700
little grid layout, but with so much content on one page, design is needed to develop a way to communicate

48
00:02:57,700 --> 00:03:00,430
their message while allowing for natural reading behavior.

49
00:03:00,790 --> 00:03:01,830
They've achieved that here.

50
00:03:02,320 --> 00:03:04,330
There are newspapers that were much worse than this.

51
00:03:05,490 --> 00:03:11,520
Now, last stop, the grid we know and use today is very much tied to Swiss design, doesn't look like

52
00:03:11,520 --> 00:03:14,370
much, but many systems were born from this.

53
00:03:14,850 --> 00:03:16,860
I want you to Pictures' World War One.

54
00:03:17,490 --> 00:03:18,840
And Switzerland was neutral.

55
00:03:18,840 --> 00:03:22,650
Of course, we all kind of became a common meeting ground for creatives.

56
00:03:23,040 --> 00:03:29,820
And because publications had to set three separate languages, which are German, Italian and French,

57
00:03:29,820 --> 00:03:34,530
because there were so many or there was such an influx of people, designers needed to come up with

58
00:03:34,530 --> 00:03:38,150
a solution to biographers like young, Jewish, old and horrible.

59
00:03:38,520 --> 00:03:39,720
They stepped up to address that.

60
00:03:39,720 --> 00:03:43,440
And for the first time, white space was used as an element in layered design.

61
00:03:43,830 --> 00:03:47,790
And you can see that in a lot of layouts today, a lot of white space.

62
00:03:47,790 --> 00:03:49,080
And they all kind of came from that.

63
00:03:49,080 --> 00:03:54,900
Even if you look at the print design that we saw earlier showing that first grid, that kind of system

64
00:03:55,080 --> 00:03:58,830
was born from this and Swiss design has a profound impact on that.

65
00:03:59,610 --> 00:04:01,800
Now, we're going to jump in into some more basics.