1
00:00:00,770 --> 00:00:06,770
So before we can even jump into actually building it, let's talk about some of the basics that impact

2
00:00:06,770 --> 00:00:10,070
all the different decisions surrounding size in measuring and spacing.

3
00:00:11,280 --> 00:00:14,350
The first thing, these units, what is a base unit?

4
00:00:14,730 --> 00:00:16,930
This is our starting point, this is ground zero.

5
00:00:16,980 --> 00:00:18,210
Let's define a base unit.

6
00:00:18,600 --> 00:00:22,410
Now, this is what defines what every single measurement will be.

7
00:00:22,410 --> 00:00:29,970
A multiple of why this makes our designs consistent, improves how we hand off to developers and reduces

8
00:00:29,970 --> 00:00:32,160
the amount of decisions we need to make as a designer.

9
00:00:32,790 --> 00:00:34,710
So what should you set your base unit to?

10
00:00:35,610 --> 00:00:41,370
I use an eight pixel based unit because it makes scaling for a variety of devices easy, most screen

11
00:00:41,370 --> 00:00:42,720
sizes are divisible by eight.

12
00:00:43,140 --> 00:00:44,640
It's also divisible by itself.

13
00:00:45,330 --> 00:00:46,830
Eight divided by two equals four.

14
00:00:47,100 --> 00:00:48,640
Eight divided by four equals two.

15
00:00:49,020 --> 00:00:52,860
There are even four pixels, five pixels, six pixels and even 10 pixel increments.

16
00:00:53,040 --> 00:00:54,270
There is no wrong answer here.

17
00:00:54,300 --> 00:00:58,830
Like I said, I like using eight pixels and spacing icons by four pixel half-step.

18
00:00:59,070 --> 00:01:04,140
Right here we have an eight pixel based unit and you can see it's spaced out at sixteen, twenty four,

19
00:01:04,140 --> 00:01:06,480
thirty two and so on and so forth.

20
00:01:07,350 --> 00:01:12,940
Up next is sizing now all UI elements should be measured in increments of our base unit.

21
00:01:13,470 --> 00:01:18,270
This helps us with a bunch of things like clear alignment, consistency and hierarchy.

22
00:01:18,630 --> 00:01:20,180
Let's take a look at the difference between the two here.

23
00:01:20,970 --> 00:01:22,530
One's using a pixel based unit.

24
00:01:22,540 --> 00:01:25,200
The other one isn't really using anything.

25
00:01:25,200 --> 00:01:26,610
And there is just no rythm.

26
00:01:27,590 --> 00:01:34,700
You know, it may seem minuscule, but if I were checking out a product or website and I came across

27
00:01:34,700 --> 00:01:40,790
a credit card input like this paired with all these different elements, I would think twice about entering

28
00:01:40,790 --> 00:01:41,630
my information.

29
00:01:42,570 --> 00:01:48,150
Patty, this is the space between all of our elements and you guessed it, it is measured based off

30
00:01:48,150 --> 00:01:52,370
of our base unit, distinct spacing, consistent, readable to our users.

31
00:01:52,410 --> 00:01:53,520
Think about this card over here.

32
00:01:53,910 --> 00:01:57,570
All elements are spaced using increments from an eight pixel based unit.

33
00:01:57,630 --> 00:01:58,630
It creates uniformity.

34
00:01:59,160 --> 00:02:03,090
We have 16 pixels on this size, 16 pixels over here.

35
00:02:03,990 --> 00:02:05,220
We got 16 pixels here.

36
00:02:05,340 --> 00:02:10,050
You see on this grid, on the bottom, these rows, which we'll get into soon, the four pixels, four

37
00:02:10,050 --> 00:02:11,100
pixels, four pixels.

38
00:02:12,300 --> 00:02:13,580
Next is.

39
00:02:14,580 --> 00:02:17,120
So what do all these lines and boxes mean?

40
00:02:17,310 --> 00:02:17,980
What are they?

41
00:02:18,630 --> 00:02:20,220
These are some questions you may be asking.

42
00:02:20,430 --> 00:02:22,110
Let's talk about the anatomy of a grid.

43
00:02:22,650 --> 00:02:27,630
All grids are made up of three key things columns, gutters and margins.

44
00:02:28,640 --> 00:02:34,760
The first one is Culp's, let's cover that, our vertical blocks right here, that span left or right.

45
00:02:35,510 --> 00:02:38,690
So right here on this page, we got a little four column grid.

46
00:02:38,840 --> 00:02:46,910
And generally the column with won't change, but the number of columns change from 12 on desktop, maybe

47
00:02:46,910 --> 00:02:49,220
eight to tablets and people like four on mobile.

48
00:02:49,460 --> 00:02:54,950
I mean, you can use anything you want to use six on mobile because it gives me a flexibility to place

49
00:02:54,950 --> 00:02:56,400
three elements in a row on the screen.

50
00:02:56,450 --> 00:02:57,950
I even like to use a dimmable.

51
00:02:58,220 --> 00:03:02,360
Like I said, if you want to hang things off the screen, we'll see that later on.

52
00:03:02,360 --> 00:03:04,070
But nothing is set in stone.

53
00:03:05,050 --> 00:03:05,610
Gutters.

54
00:03:05,920 --> 00:03:11,260
This is the white space right here, right between columns, they're dedicated based off of your base

55
00:03:11,260 --> 00:03:11,530
unit.

56
00:03:11,560 --> 00:03:16,450
So some designs will increase that size as you scale up or decrease as you scale down.

57
00:03:16,960 --> 00:03:18,310
Other grids can stay fixed.

58
00:03:18,340 --> 00:03:19,560
It's not really set in stone.

59
00:03:19,570 --> 00:03:24,070
So right over here, this probably like a 16 pixel gutter based off of a pixel based unit.

60
00:03:25,020 --> 00:03:29,550
Margins are the white space between the edge of your column and the edge of your frame.

61
00:03:30,270 --> 00:03:33,480
You can combine all these elements to build different types of grids.

62
00:03:33,960 --> 00:03:38,590
The manuscript grid we saw this before kind of looks like a grid for manuscript.

63
00:03:38,610 --> 00:03:38,950
Right.

64
00:03:38,970 --> 00:03:44,100
Well, they could be useful for defining margins and for large blocks of text.

65
00:03:44,730 --> 00:03:45,770
This is the most popular one.

66
00:03:45,780 --> 00:03:48,840
The column grid kind of looks like the grids you see today.

67
00:03:48,840 --> 00:03:50,910
Kind of what we've shown off now.

68
00:03:50,910 --> 00:03:52,470
These are the types of grids we mostly use.

69
00:03:52,470 --> 00:03:56,790
And these columns are spaced evenly and that's where we start to align our content.

70
00:03:56,910 --> 00:04:01,470
Most grids utilize 12 columns, and you may be asking, well, why twelve?

71
00:04:01,890 --> 00:04:08,160
Well, twelve columns can be divided into halves thirds, fourths and sixth.

72
00:04:09,150 --> 00:04:13,420
This helps for designing for responsive screens, the modular grid.

73
00:04:13,980 --> 00:04:16,980
This is a variation of the column grid we saw before.

74
00:04:17,520 --> 00:04:22,980
You'll notice that they are both vertical and horizontal rows.

75
00:04:23,580 --> 00:04:28,230
So we have vertical columns going left to right, horizontal rows going top to bottom.

76
00:04:28,650 --> 00:04:35,580
And this creates these modules that provide some additional options for single or larger box.

77
00:04:37,050 --> 00:04:39,170
The baseline right now, this one's important.

78
00:04:39,540 --> 00:04:40,650
You just want all the time as well.

79
00:04:41,010 --> 00:04:42,770
I'll get a couple of this with my column.

80
00:04:43,320 --> 00:04:47,600
They consist of these horizontal rows that you see here from top to bottom.

81
00:04:47,610 --> 00:04:51,800
And these provide guidance for typography and other elements.

82
00:04:51,960 --> 00:04:56,800
They create a vertical rhythm and think of when you're in school and used to write on a piece of paper.

83
00:04:57,390 --> 00:04:58,790
Yeah, it's similar to that.

84
00:04:58,890 --> 00:05:01,050
And yes, it's based off of your base unit.

85
00:05:01,410 --> 00:05:06,710
I like to use a four pixel baseline grid now placing typography on a baseline grid.

86
00:05:06,720 --> 00:05:12,330
You use line height and this is that bounding box right around your type.

87
00:05:12,870 --> 00:05:16,620
So say your font size is something like 16 pixels.

88
00:05:17,780 --> 00:05:23,640
You know, your line could be something like twenty four pixels, we have maybe like a 40 pixel type

89
00:05:23,690 --> 00:05:28,390
set over here for the headline and our font size for the headline and for the line height.

90
00:05:28,640 --> 00:05:34,270
We have something like forty eight pixels, so multiply by eight and on that baseline grid.

91
00:05:34,280 --> 00:05:36,200
So we got four pixel here for pixel here.

92
00:05:36,560 --> 00:05:40,670
So we got eight pixel spacing between the top and the bottom here.

93
00:05:40,920 --> 00:05:46,010
We got 12 between the Subedar and the copy.

94
00:05:46,100 --> 00:05:52,550
So this creates this vertical rhythm that really helps to create consistency throughout your whole piece.

95
00:05:53,520 --> 00:05:55,550
Let's jump into responsive grids and figure.