Grids can be used for almost anything.
They’re not there to look good, although
they can.
Instead, they’re practical.
They’re quick to organize, easier for humans
to parse the content inside, and they’re
so much simpler to navigate.
In the context of roads, this means more flexibility
for pedestrians.
It’s great for orientation, tons of intersections.
In this video, we’re going to talk a bit
about alignment and knolling, and grids, when
grids are useful, and when they’re not.
Alignment itself is core to a lot of disciplines,
like orthopedics, and orthodontics, and orthovisual
design on the web, which is visual design
on the web with ortho in front of it.
But, it’s roots, we’re talking web design,
it’s roots on screen and even on paper come
from some of the earliest and most basic aspects
of typography.
In English or Spanish for instance, we read
from left to right.
Languages like Hebrew and Arabic, from right
to left.
The alignment of this text gives humans a
consistent reference line.
They know exactly where the next line is going
to start, and this passage can be a lot more
challenging to read in English, mainly because
the starting point of each line is different,
but also because it’s in German.
But, alignment isn’t just about pushing
text to one side.
In visual design, we can align other edges
of other elements.
In many ways, the more we visually align things,
the better they look.
Don’t believe it?
Enter knolling, the art of placing stuff at
right angles.
Randomness becomes beautiful, if only we organize
it.
Seriously, you can have the messiest desk
in the history of the world.
Watch this, if you employ a simple knolling
technique, things get better.
But for now, how can we take this to the next
level?
Well, we can use grids to help us.
Grids don’t just mean everything is nested
in it’s own tiny cell, we can have content
span cells.
Grids help us align things vertically and
horizontally, and unlike graph paper, not
every grid has to have the same size for every
row and column.
As long as we’re reinforcing that horizontal
and vertical alignment, the size of each of
these can vary widely.
So, when do we use grids in our designs?
Well, sometimes starting with a grid is a
good way.
Some people start with guides, this is a twelve
column guide.
And sometimes starting with this can help
us make decisions about where to place and
size things, a reference.
But a lot of times we don’t even need that.
Maybe we don’t need twelve lines, we have
a section for instance.
We have a container inside of that, that’s
more narrow than the section.
Isn’t this technically a three-column layout?
Well we asked a senior software engineer that
same question.
[McGuire] Olena, is this a three-column layout?
[Olena] Yes.
It’s symmetrical, but we don’t need thirty
vertical lines to get the picture.
But, what about horizontal lines?
Let’s say, we have an element here, and
an element here.
By aligning these elements to a horizontal
line, we’re creating even visual consistency.
This is a grid.
In short, it helps to think of grids, especially
uneven ones that aren’t made of perfect
squares, as guides, like in Photoshop or InDesign.
Create some guides, align stuff, things look
great, work done.
But, sometimes it’s not so great to use
grids.
Circular or curved layouts are tough on their
own.
If you try to start aligning this stuff to
a grid, not so great.
Same with one-dimensional layouts.
A lot of these involve stacking or sorting
things in different widths.
Centering them can look really clean, and
it’s not necessarily a grid.
And sometimes elements of the design have
different widths, take a look at Google Images.
The top section is one-dimensional.
In other words, it has everything lined up
going only one way.
But each item has a different width, based
on the text inside.
And the other thing here is the results themselves,
notice how because the images are inconsistent
in terms of width, notice how they don’t
follow a grid structure.
There are some interesting things going on
where Google is cropping and sizing to keep
the edges and the gaps similar but you can’t
draw a traditional grid around this content.
And you wouldn’t want to, because everything
has a slightly different shape, different
width.
In fact, sometimes over-griding things leads
to an overly rigid result.
Grids, and alignment in general, can be used
to make things look and read a lot better,
but if you’re following a grid-based path
in which literally everything is inside a
grid, it can also make your design and your
whole layout more complex.
So, what’s the absolute rule?
The rule with grids is this: there are no
right or wrong answers.
If we’re thinking of grids as an alignment
tool, we can use them to help us create better
looking and more legible layouts.
It’s a balance we can achieve over time.
To put this in a real world perspective, we
can look at any number of print layouts.
Books, magazines, newspapers, these industries
have pushed forward grid-based visual design
over generations.
Many layouts follow this kind of alignment
and structure.
And grid-based layouts use these guides, these
often invisible lines, that organize content.
And with a lot of these layouts, it's not
just the alignment that we can focus on, it’s
the gap between these invisible cells of content.
In web design, especially using tools like
CSS Grid, this is referred to as the grid
gap.
This is the space between the columns, and
the space between the rows, inside a grid.
There are a ton of layouts on the web that
do the same.
Let’s look at B&H’s website, this whole
thing is made of grids, but there’s an important
note here.
Just because the visual layout is a grid doesn’t
mean it has to use CSS Grid, or any specific
technology to achieve the result.
But, what it means is that the content is
organized in a visual grid.
There are rows, there are columns, they both
serve as guides.
And, they structure the content inside.
A lot of the web doesn’t use grids at all.
Most of the modern web is built using the
box model, or boxes stacked on top of each
other and next to each other, just like a
Word document, content flows from the top
left of the page.
And this is a good thing, because it helps
us create adaptive layouts that respond to
the width of almost any device.
But, with modern tools, like CSS Grid, we
can create beautiful, structured layouts that
also respond to the type of device we’re
using.
We’re going to go deeper into this later
on in the course as we build out our actual
site, and we’ll use grid-based layouts,
and nongrid-based layouts, but that’s it.
Grids help us align and group parts of our
design, and the results are functional.
And they often make things more pleasing to
look at, and that’s an overview of grids
in web layouts.
