How to wireframe two web layouts in Illustrator using 960.gs

Wireframing websites is a common practice among web designers and developers and for many good reasons. I like to think of wireframing for a website as a “blueprint” to the structure of the site. It helps me visually see the major areas, much like a blueprint to your house would.

In a blueprint to your house, you can easily see where all the rooms are located, how big they are, and where they are in relation to the other rooms in your house. A wireframe for a website works in much the same way: it allows you to see the big parts of content in a quick layout-focused form.

Website wireframing is becoming more and more of an integral part of a web design project and is starting to have more and more importance as new technologies are constantly changing the way we think about website design, such as responsive web design and the multitude of devices that can access the World Wide Web.

Instead of web designers designing in full the look and feel of the site, they often construct these wireframes to get a feel for how major sections of the site are going to intermingle with each other. This is often a time-saver as it allows for web designers and developers alike to problem-solve many layout issues and site readability before ever starting any design.

In this article, I am going to walk you through how to create a wireframe for a website  in Adobe Illustrator using a common grid system called 960.gs. Although most of the web design world does design in Photoshop, I find Illustrator quicker to produce wireframes and allows for more flexibility. You can easily export any Illustrator file into a PSD for further development.

Start with a sketch on paper

I think this is such a vital step to any creative process. Before you can really start designing your website, you may find it best to put pencil to paper and start laying out sections of your website. You can see in the image above I like to use grid paper to help me keep my sketches a little more organized, but feel free to go about this however you want.

Starting from something on paper will help you save time as you are already visually solving layout problems and can adjust as you move to Illustrator to continue to build the wireframe. My sketch above has been done about four times and this is the final version that I would like to move to the computer with.

Download 960.gs

Now that we are ready to move to the computer, let’s start by downloading the 960.gs package and use the Illustrator template. Just head over to 960.gs and click the download button in the center (you know, the “big ol’ download button”). Unzip the download and navigate to Templates > Illustrator > 960_grid_12_col.ai.  You can choose from 12 columns, 16 columns, or 24 columns, but for the sake of this article, we are going to stick to 12 columns for our 3 column layout.

Setting up your Illustrator file

When you open one of the files from the package, you will see something similar to what I have above. For me, all I would like to use is the grid lines, so I find the layer that has the pink shadowing behind it (in this file the layer is called “12 Col Grid”) and go ahead and remove that layer. I am going to create my own columns later.

You will also notice that there two other layers in the file as well. One has the grid lines (which we will be using) and the other will be labeled “Layer 3” or something similar and will have nothing visible on that layer. I lock the grid layer so nothing can be changed accidentally and I start work on the Layer 3 by first renaming it to “Home” (remember, we will be creating a sub page as well).

As you can see in my sketch, my design is very much a 3 column layout. I am going to help myself with this by visually creating these three columns. I do this by creating a rectangle that is 940px wide (I am reserving 10 pixels on each side for padding), then go to Object > Path > Split Into Grid. For my particular design, I set the columns count to 3 and the gutter to 20px (which matches the gutters in the design). After doing this I get a rectangle in three parts just like this:

You can set up the columns anyway you want. I just like to have mine visually at the top of the screen instead of running all the way through the document like the pink ones we deleted earlier.

Start adding sections

Once everything is set up properly and the way you like to work, you can start now getting your wireframe into the document. This is a pretty simple process. I start by outlining the major blocks of content using the Rectangle tool and using a shade of gray as the fill color.

Starting at the top, I put in place where the logo will be, the company name, the member login, and the navigation with search. By drawing out a series of rectangles, I can start to see the layout of the wireframe coming to life. As I am working on it, I don’t concern myself too much with exact sizing of things (especially heights) at this point as the objective is to get the layout in place.  You may also find that while you are doing this, you may need to lengthen the art board to accomodate the size of your wireframe.

Once you get the blocks in place, you should have something very similar to the following screenshot (I made the layer with the grid invisible so you could see):

Adding specific details

Our wireframe is starting to take shape, but it really doesn’t give us much information in the way of what each of those blocks mean. Some of the areas in my wireframe are for navigation, others are for only images, and some are going to be only for actual content (type). In its current form, it is very hard to distinguish this type of content without looking at my notes.

Once you reach this point, you can start filling in other specific details, such as labeling, dummy copy, and the like. I often label some things such as the logo area, buttons, image block, etc. while actually adding some copy to the areas that will be only for text. You will also find you need to add a few things or might need to change things such as the colors of the blocks to help show visual presence on the site.

I went through and did all of the above to the wireframe for the home page of my site:

I didn’t focus too much on the details in my wireframe. I wanted to be able to see, at a glance, what each section would hold. The biggest thing you notice is the bulk of the content on the site under “recent news and events.” Since this is going to be 100% type, I opted to lose the gray box (you can see I did faintly outline this area) and instead put in some dummy copy to show how many news items would go in this box and how I see them laid out.  You can start to clean up the layout and tidy things up as you move into the design phase.

Creating the sub page based off of the home page wireframe

The home page isn’t the only thing you can wireframe on your site. If any other parts of the site have different layouts than your home page, you can benefit by taking the time to create those wireframes as well.

In the example I am using, there are repeating elements that will be on the sub pages as well. The logo, tagline, navigation, sidebar areas (donate and social media), main content area, and footer will all be very similar in layout.

I tend to break down the parts into those that will move and those that won’t. It is safe to say that the header (logo, member login, and navigation area) won’t change from page to page. I lock these down by putting them on a new layer all to themselves. I create a new layer (this one named “header”), select all of the header elements, then right click one of them and click “move to current layer.”  These elements should all now be on the header layer that is easy to click on and off as necessary.

I do this because I don’t want to repeat exactly what I have already done when I start doing the sub page wireframes. The header will be the same no matter what, so I can save some time by hiding the “home” layer and having the “header” always showing.

To start the sub page, I just create a new layer and title it appropriately and repeat the steps above (drawing boxes, labeling) for the sub page. I often find myself copying elements from the home page to move to the sub page as well, so this may help you in the process as well. I did exactly that and here is my sub page wireframe (this time I left the guides on):

Time to start designing!

Now that you have a nice layout and wireframe for the home page and a sub page of your site, this is when you can take the wireframes and start adding your design on top! I normally just lock all of the wireframe layers and start designing on top of them in a new layer until I’m ready to hide the wireframe layers, but to each their own!

In what ways do you create your wireframes?

Image Credit: Allison Joyce/Getty Images