So before we can even jump into actually building it, let's talk about some of the basics that impact
all the different decisions surrounding size in measuring and spacing.
The first thing, these units, what is a base unit?
This is our starting point, this is ground zero.
Let's define a base unit.
Now, this is what defines what every single measurement will be.
A multiple of why this makes our designs consistent, improves how we hand off to developers and reduces
the amount of decisions we need to make as a designer.
So what should you set your base unit to?
I use an eight pixel based unit because it makes scaling for a variety of devices easy, most screen
sizes are divisible by eight.
It's also divisible by itself.
Eight divided by two equals four.
Eight divided by four equals two.
There are even four pixels, five pixels, six pixels and even 10 pixel increments.
There is no wrong answer here.
Like I said, I like using eight pixels and spacing icons by four pixel half-step.
Right here we have an eight pixel based unit and you can see it's spaced out at sixteen, twenty four,
thirty two and so on and so forth.
Up next is sizing now all UI elements should be measured in increments of our base unit.
This helps us with a bunch of things like clear alignment, consistency and hierarchy.
Let's take a look at the difference between the two here.
One's using a pixel based unit.
The other one isn't really using anything.
And there is just no rythm.
You know, it may seem minuscule, but if I were checking out a product or website and I came across
a credit card input like this paired with all these different elements, I would think twice about entering
my information.
Patty, this is the space between all of our elements and you guessed it, it is measured based off
of our base unit, distinct spacing, consistent, readable to our users.
Think about this card over here.
All elements are spaced using increments from an eight pixel based unit.
It creates uniformity.
We have 16 pixels on this size, 16 pixels over here.
We got 16 pixels here.
You see on this grid, on the bottom, these rows, which we'll get into soon, the four pixels, four
pixels, four pixels.
Next is.
So what do all these lines and boxes mean?
What are they?
These are some questions you may be asking.
Let's talk about the anatomy of a grid.
All grids are made up of three key things columns, gutters and margins.
The first one is Culp's, let's cover that, our vertical blocks right here, that span left or right.
So right here on this page, we got a little four column grid.
And generally the column with won't change, but the number of columns change from 12 on desktop, maybe
eight to tablets and people like four on mobile.
I mean, you can use anything you want to use six on mobile because it gives me a flexibility to place
three elements in a row on the screen.
I even like to use a dimmable.
Like I said, if you want to hang things off the screen, we'll see that later on.
But nothing is set in stone.
Gutters.
This is the white space right here, right between columns, they're dedicated based off of your base
unit.
So some designs will increase that size as you scale up or decrease as you scale down.
Other grids can stay fixed.
It's not really set in stone.
So right over here, this probably like a 16 pixel gutter based off of a pixel based unit.
Margins are the white space between the edge of your column and the edge of your frame.
You can combine all these elements to build different types of grids.
The manuscript grid we saw this before kind of looks like a grid for manuscript.
Right.
Well, they could be useful for defining margins and for large blocks of text.
This is the most popular one.
The column grid kind of looks like the grids you see today.
Kind of what we've shown off now.
These are the types of grids we mostly use.
And these columns are spaced evenly and that's where we start to align our content.
Most grids utilize 12 columns, and you may be asking, well, why twelve?
Well, twelve columns can be divided into halves thirds, fourths and sixth.
This helps for designing for responsive screens, the modular grid.
This is a variation of the column grid we saw before.
You'll notice that they are both vertical and horizontal rows.
So we have vertical columns going left to right, horizontal rows going top to bottom.
And this creates these modules that provide some additional options for single or larger box.
The baseline right now, this one's important.
You just want all the time as well.
I'll get a couple of this with my column.
They consist of these horizontal rows that you see here from top to bottom.
And these provide guidance for typography and other elements.
They create a vertical rhythm and think of when you're in school and used to write on a piece of paper.
Yeah, it's similar to that.
And yes, it's based off of your base unit.
I like to use a four pixel baseline grid now placing typography on a baseline grid.
You use line height and this is that bounding box right around your type.
So say your font size is something like 16 pixels.
You know, your line could be something like twenty four pixels, we have maybe like a 40 pixel type
set over here for the headline and our font size for the headline and for the line height.
We have something like forty eight pixels, so multiply by eight and on that baseline grid.
So we got four pixel here for pixel here.
So we got eight pixel spacing between the top and the bottom here.
We got 12 between the Subedar and the copy.
So this creates this vertical rhythm that really helps to create consistency throughout your whole piece.
Let's jump into responsive grids and figure.