Understanding grid systems & BootStrap

Hi you, my name is Dan, and by the end of this video you’ll know what a grid system is, and how it influences your web design mockups in photoshop.

This particular video is a free extract from my course called “How to make money building professional website mockups using photoshop”

If you’re serious about making money as a web designer, there’s a discount code for you in the description. Anyway, sales pitch over - let’s learn about good looking grids.

Now the most popular solution to handle different browser sizes at the moment is the grid system. Of the grid systems something called “Bootstrap” is by far the most common. Now whether you are using Bootstrap or any other way to build your website, you are probably

going to be using the grid system, and that’s what we’ll use in our photoshop document. The grid system allows designers to work from a base 12 column grid. Designers can span any amount of these columns to suit their website.

Let’s take a look at this example grid system here on Edward Robertsons’ site - you can see it up here . It’s called “Responsive Grid System,com” Now you’ll see if I scroll all the way to the bottom here, it starts at the base columns of 12. Now I’m yet to see anybody use exactly all 12

of them, unless they may be bullet points or lists, or something similar, so what tends to happen, is designers end up spanning a few of these columns. Done the bottom here, you’ll see that it starts at a base level of 12 columns, and at the top here, you can see we can span those - we can

easily span those 12 columns - say 6 of them and 6 again, to carve our website in half, and this is a really nice number - 12 is a really nice number- because we can cut it into thirds and quarters and sixths all very easily, using the 12 column grid.

This is another example on Edwards site - you can see a couple of example layouts for responses. Now this intro hedge here - forget the heights, because the heights are really short. But see the different cut-ups in terms of the navigation. You can see here is where my logo goes,

and this other chunk here - this other two thirds would be where my navigation goes. This is a span at all, and this is a - say a rotating carousel like they’ve got written here.

These are feature boxes all carved into thirds - ok 4 columns, 4 columns, 4 columns and then my footer would be spanning all three. You can see here is a a couple of different examples of cutting up websites, so I’ve switched here to finish off file that you can download as part of the exercise files,

and if you haven’t done that, do that from the link below, otherwise you can create your own pages. Now what I’ve done is - watch this - if I go to view, and I go to show,and I go to guides, you’ll see that it has been cut up into 2 columns of 12 with s bit of padding in between them all.

So I’ve done it for desktop, tablet and mobile. Now you’ll notice here on mobile, the mobile doesn’t actually have 12 columns like the tablet and desktop. We do this because 12 columns on such a small size becomes this dense mass of columns, and nobody actually cuts a mobile site up into 12 distinct columns.

Now when deciding what pages, and what sizes they should be, you can see the desktop here is 960 pixels wide. When you are deciding what size a desktop should be , a tablet to be and mobile to be, don’t get too caught up on actual pixel dimensions, because there are so many different screen sizes,

it’s impossible to group them altogether into one exact pixel size. You pick a generic size that fits mobile, desktop and tablets that are common at the moment, and that’s going to change as time goes a long as well, so be prepared for - in a couple of years when screen resolutions are all changed, or there is a new kind of

tablety, desktopy, or mobily version that you might have to go through, and design a separate style to accommodate that screen size.

If you are looking for exact dimensions to get started with, then you can download the photoshop template that I’ve got in the resources, or if you’re using - say Bootstrap - you can go and check Bootstrap to see what the medium breaks they’ve used, what they consider mobile is, what they consider tablet is, so we can have a look.

Now I’m over at Bootstrap at “get Bootstrap.com” I’m in the slightly preview version K and version 4. At the moment we are up to version 3, but version 4 will be out really soon, so we’ll be using that for this course. Click documentation and go down to layout and pick grid. Now if I scroll down here, I’ll get to one - this one here says grid options - you

can see here, here’s my small, in case that be mobile to portrait, then I’ve got small, which is considered phone and landscape medium tablet, large is - say a laptop screen, and extra large is a really big - say a I-max screen.

You’ll see the sizes here are written in this measurement called REM, which is a riot em. If you’ve reversed this measurement before don’t worry. Essentially you take a 45 and you times it by 16, 16 is considered the default size in a browser, so 45 times 16 gives us 720 pixels, and if we go back to photoshop you’ll see that I’ve used the 720 pixels

for this tablet, Now when we get up t o Bootstrap 5 and Bootstrap 6, they’ll go and adjust these things, depending on what the most common sizes are. They might get bigger, they might get smaller, whatever is really popular at the time, so that’s a good place for us to start our photoshop mockup.

Now what I’ve done for you here, is - well these guides can be a little hard to work with as well, because they kind of stretch past the pages. What I’ve done in here is - say you’re working on your desktop, you can toggle this layer down. You’ll notice in here I’ve got this one called “Helpful column guides” and if I toggle that down I’ve laid out a couple of basic column grids, so watch this .

I’m going to my View, show guides off, and I prefer to work this way. Say, if I’m doing something that is meant to be 3 columns I’m going to click this on my 3 columns. It’s just a transparent background, so I know when I’m working with my document, I am dragging it around, and I know I am working within these 3 columns here. When you’ve finished using the column, you can turn the eyeball on,

and turn it off on another one to work on a slightly different layout, or a different grid system,

You’ll notice in this tutorial we’re using only 3 of the sizes. We’re using the small, the list 34ems for portrait, mobile for the tablet and desktop.

Now we haven’t done this one in between here, which is a kind of a landscape phone, and we haven’t done the really large or extra large desktop as well. It’s mainly just to keep the time down for this tutorial, and it depends on - I guess it’s the level of complexity your website has.

If it’s a quick throwup website, you might not spend as much time with the XL or the small landscape foam version, and until - maybe the site is a little more mature.

If you are working on a bigger project, then definitely you are going to be looking at all 5 media queries and all 5 sizes here in photoshop, and that’s it for grids.

Now I love to share, so I’ve made a few of these videos free. Of course though I’d love for you to go on and do my full course of over 50 videos. Now I’m saluting and waving, but you can’t see that can you.