Wireframing websites is a common practice among web designers and developers and for many good reasons.
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.
Those wireframes and user stories inform the design and development process, where layers of fidelity are added in an iterative process.
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, we are 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, we find Illustrator quicker to produce wireframes and allows for more flexibility.
Start with a sketch on paperI 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 we like to use grid paper to help us keep our 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.
Download 960.gsNow that we are ready to move to the computer, lets start by downloading the 960.gs package and use the Illustrator template.
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 fileWhen you open one of the files from the package, you will see something similar to what we have above.
For us, all we would like to use is the grid lines, so we 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.
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.
We lock the grid layer so nothing can be changed accidentally and we start work on the Layer 3 by first renaming it to Home (remember, we will be creating a sub page as well).
We do this by creating a rectangle that is 940px wide (we are reserving 10 pixels on each side for padding), then go to Object > Path > Split Into Grid.
For our particular design, we set the columns count to 3 and the gutter to 20px (which matches the gutters in the design).
You can set up the columns anyway you want.
Start adding sectionsOnce everything is set up properly and the way you like to work, you can start now getting your wireframe into the document.
We 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, we 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, we can start to see the layout of the wireframe coming to life.
As we are working on it, we dont concern ourselves too much with exact sizing of things (especially heights) at this point as the objective is to get the layout in place.
Our wireframe is starting to take shape, but it really doesnt give us much information in the way of what each of those blocks mean.
Some of the areas in our wireframe are for navigation, others are for only images, and some are going to be only for actual content (type).
Once you reach this point, you can start filling in other specific details, such as labeling, dummy copy, and the like.
We often label some things such as the logo area, buttons, image block, etc.
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.
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, we opted to lose the gray box (you can see we 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 we see them laid out.
You can start to clean up the layout and tidy things up as you move into the design phase.
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.
The logo, tagline, navigation, sidebar areas (donate and social media), main content area, and footer will all be very similar in layout.
It is safe to say that the header (logo, member login, and navigation area) wont change from page to page.
We 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.
To start the sub page, we just create a new layer and title it appropriately and repeat the steps above (drawing boxes, labeling) for the sub page.
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.
We normally just lock all of the wireframe layers and start designing on top of them in a new layer until Im ready to hide the wireframe layers, but to each their own.
