Articles, Blog

What is a grid system & responsive mobile & tablet design – Adobe Illustrator CC 2017 [10/45]

November 12, 2019


Hi, my name is Dan. In this video we’re going
to be using Illustrator… to build UI and web graphics. There’s lots of free stuff here
on my channel, please subscribe. Hit the little bell next to this
subscribe button to get notifications. If you want more, loads more. Check out bringyourownlaptop.com, or
check out the link in the description. Hey there, in this video
we’re going to talk about… Grid Systems and Responsive Web Design. So, when people talk
about responsive… all it means is I’m going
to design a site… that responds to the different
devices that I’m using. So if I’m viewing this site here… my site, bringyourownlaptop.com
on a desktop, it looks like this. But when it gets down to a mobile
size, something like this… you can see that the site changes, they
best use the screen real estate… or the screen size for this view. You can see these guys are a big
change, these go side by side. But when they’re on a desktop there’s
4 in a row rather than 2 in a row. And when it gets down to
mobile, it changes even again. The big change is, on a mobile I’ve
decided that that big image at the top… that smiling handsome
man there disappears… he’s not useful on mobile, I’m
running out of screen real estate. so I’m just kind of getting
right to the basics… and using just these thumbnails here. So they’re stacked on top of
each other in one column… but in tablet it’s set to two, and
when it’s out on desktop it is four. So those adjustments, best
use of the screen size… is what’s called Responsive Web Design. So what we’re doing when
we’re using Illustrator… is that when you design
for those three views– so when it starts getting built, either
by yourself or by a developer… they know what they need
to adjust the size to… or the website to look like at
those different screen sizes. Now, the next thing to look at
is what a good system is… because that is the most common
way of breaking the site up. What happens is, there’s an
underlying 12 column grid… that runs along all the web pages. And that’s how you
divide the content up. So what happens is– it’s very similar
if you’re in print or magazine design… a 12 column grid on a
newspaper gets used to… kind of help you get
consistency across many pages. It’s the same here in Web Design. The easiest way to see it
is in our final version. This is our final design. There’s the desktop version,
tablet version, and mobile. And what ends up happening
is, watch this… if I turn on the grids that I’ve got… you can see I’ve divided the desktop… by even making sure I keep
in mind these 12 columns. I wouldn’t have it half way
through this column… they all span to equal 12, so
this guy here is 4 of them… they all add up to 12. It means that at the top
here there’s a line… it’s actually spanning
all 12, and that’s fine. These guys up here need to
be adjusted a little bit. My design, they are spanning
these two columns here. I need to align them up a little
better, and this guy here… he kind of spans the whole thing
because there’s nothing over here. So let’s look at what we’ve done,
and redesign for the tablet. Now what we do is, I could
put 12 columns in here. But you can imagine, if I can press
12 of these columns down to here… even though they’re
technically all there… it becomes a bit harder to design
with hundreds of lines across. Can you see it gets worse
when it gets down to mobile. So you can see what I’ve done, and
what you’ll do as a designer is– I don’t need all 12, that kind of
final adjustment is too much for me. You might like it and you can keep
it 12 columns, I’ve just put 6 here. And I’ve divided them up evenly. This one spans 3, that one spans 3. It’s still divisible by 12,
you can see the spans– half of it would be 6,
and that would be 6… so we’re still using
the 12 column grid… but just visually it’s too
hard to see so many of them. What we’ve decided here, is I’m
going to turn the guides off. That’s the way I want it to look
like when it’s on a tablet device. When it gets down to mobile
I want to change it again. We’ve changed it quite
a bit in this one… the navigation’s changed, down here… and we’ve used pretty
much the whole way down. We’ve used the complete width,
which is the whole 12 columns. I’m going to turn the guides back on. When I’m working on mobile, often
I just deal with 2 columns. So there’s 6 on that
side, 6 on that side. I just use 2, just to
make it a little easier. You can put all 12 there but it becomes
a real headache to align things up. That is the Grid System,
and that’s how… web designers on the other
side divide your content up. You can’t do 13 because it’s really
hard to divide up the middle because it’s an odd number,
so even numbers… most of the time it is 12 columns. So in the next video let’s look at… how to make these columns
so you can design them. How good was that? If you want more, go check
out bringyourownlaptop.com Or check out the link
in the description.

2 Comments

  • Reply MisterBassBoost April 18, 2017 at 10:25 pm

    Nice video! Keep it up!

  • Reply Syed Raza Shah August 1, 2017 at 9:58 pm

    What it means by Full Course at bringyourownlaptop.com? Is that course any different than the one here?

  • Leave a Reply