Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Another way to plan and mock up a project for web-based design is to utilize something called a grid system. The most famous of these systems is something called the 960 Grid System, and you can access the 960 Grid System by going to your web browser and going to 960.gs, for Grid System. The 960 Grid System is a method of laying out web sites by using a grid that is 960 pixels wide and evenly spaced using columns. So what's up with the number 960? Well, it's actually because using a number like 960 lends itself to much cleaner divisions numerically when dividing things into columns, and it also nicely fits on most computer monitors.
Now when you download the grid--and you can do so by going to the 960 Grid System web site; you just click the big ol' Download button as it says-- you'll get several different templates for Acorn, Fireworks, Flash, InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Photoshop. You name it, they've pretty much got a 960 Grid System template for it. Take some time and go through the 960 Grid web site. It's going to be a great learning tool for you going forward if you really want to get into grid-based design. But for now, let's go back and Illustrator it for a moment and take a look at the grid that we have open here.
The Grid System comes in two basic setups: a 12-column and 16-column grid. The 12 column, which is what we are looking at here, contains columns that are 60 pixels wide. So these little light red areas that you see here are 60 pixels in width, and they lend itself to a great even division across the board here. If I wanted to use this to create a mockup, what I would do is startup by grabbing the Shape tool and then using the guides to tell me where to place my content. So for instance, if I want a header that goes all the way across the top here, I can just click and drag until I get to right here, and you see that's 940 pixel wide. And let's say I wanted it to be about 100 pixels tall.
There we go, and there is my header. And then let's say I wanted something that goes about halfway across, so I'll take this and I'll click right up against that guide, drag it out. You can see the numerical values tell me where I am at at all times, and they snap right to these guides as I go. So about 460 should be about enough, and let's do something like 200 pixels tall. There we go. And so if I want to duplicate this, I'll just Command+C or Ctrl+C, Command+F or Ctrl+F on my keyboard. That puts it right on top of it.
I'll switch to my Selection tool and just move it over. And it should sit nicely, just like that, evenly spaced. And so now I'll take this. Let's say I wanted three columns down here at the bottom, and so I'll do something like 300 pixels across, something like that. And we'll do something like 150 tall like that, and I'll copy, and that's Command+C or Ctrl+C. And then I'll Command+F or Ctrl+F twice.
I'll take this with the Selection tool and just move this one over, until it meets right there. Take this one over, and as long as I stay within the grid, I can evenly space things out. I don't have to worry about alignment or anything else. I can just utilize the Grid System as it goes here. If I were to go to the View menu and turn off the guides for a moment, you can see I am creating a web site mockup just by using these squares, and I am using even divisions across, and I am also getting great pixel values so that when I hand this off to a developer, they can easily determine how big the blocks of CSS need to be.
For instance, if I select this one, and look at the Info panel, I know that it's 460 pixels wide x 200 tall. If I grab this one, 940 pixels tall; grab this one 300 pixels wide; et cetera. Now in this case I have made mistake. I kind of dragged it past 300 pixels. That's okay. I can fix that just by using the Transform panel and changing that back to 300 instead of 301. So anytime you make a mistake, you can alter that, but using a grid system is a great way to get faster at prototyping or mocking up whatever it is that you are trying to build.
And utilizing a system like this and implementing it into your day-to-day workflow is really going to take you a long way in terms of getting faster and more efficient. And also, the developers that you work with are really going to like the fact that you are using a standardized system like 960 in order to develop your web sites, because then they can easily implement this system if they already know it, and they can easily translate your designs into functioning HTML and CSS. So take some time, go to the 960.gs web site, and take a look at it. Download the templates and start to play with it.
I have included the 960 grid with 12 columns here, but you might want to play around with the 16 column. There is even a 24 column as well if you need that little small level of control over your grid. So, like I said, take some time, explore this, see if you like it as a mockup tool. If you do, it can really go a long way to help you get faster; if not, you can just go back to your conventional way of creating your own mockups, but I just wanted to give you an idea of how this system works so that you could better understand it and hopefully use it and implement it into your work.
Get unlimited access to all courses for just $25/month.Become a member
117 Video lessons · 43013 Viewers
119 Video lessons · 54336 Viewers
65 Video lessons · 14564 Viewers
113 Video lessons · 82927 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.