Building a Website Wireframe in Illustrator

---

The Many Wireframing Tools Available

There are many programs out there for web designers to use for website wireframing. Some criteria to choosing a program to use on a given project are: your familiarity with the program, your ability to work quickly in it, and the given programs functionality and flexibility to make edits.

Some common wireframing programs you could use are outside and within the Adobe Suite. Looking outside the Adboe Suite Omni Graffle is a program that lots of web designers use for wireframing. I tried this program and while its a great tool I just didn't connect with it.

Within the Adobe Creative Suite some common apps to use to build wireframes are Photoshop, Fireworks, InDesign, and Illustrator. Photoshop is a great and powerful tool though to many using the Vector tools in Photoshop feels a bit clunky. Fireworks is a really cool program that works great for building wireframes. I haven't tried out its multi-page functionality yet. So, I can't comment on the breadth of its abilities. Though I like it for building website and wireframe design's quickly. Some people use InDesign because it has multi-page functionality and easily exports pdf docs. So, if you have a large project that has alot of wireframes it may be a decent solution. And then we come to our beloved Illustrator.

Choosing Illustrator for Wireframing

With all these other products that do the job out there why use Illustrator for wireframing? Well for those that grew up using Illustrator allot we are really quick in the program. I feel that no other program compares in feeling of use for me. I use Illustrator for wireframing when I have just a few pages to mock up, as it doesn't have multi-page functionality. So, its especially helpful on small projects. Having all the artwork as Vector in Illustrator allows for really simple and easy changes as clients make corrections and additions to the mockups.

I use vector graphics as the foundation for allot of my web work. It helps to differentiate my style and I love making vector graphics. If you are going to be using Illustrator to mock up the website than it makes sense to use it for the wireframing. Then the conversion from wireframe to mockup is seamless. These are just a handful of reasons why I use Illustrator for website wireframing your list may differ.

Let's Get to Wireframing in Illustrator

For the purposes of this tutorial we are going to be creating a simple wireframe based on a two column blog style design.

Setting Up Your Document

With Illustrator Open go to File > New or (Command/Ctrl + N). In the dialogue box that comes up, see image below, Name your document. For Width enter 1160px (I'm creating a design at 960px so I'm leaving 100px of space on each side). For Height choose 1000px. This is just a guess of how long I think it will be. This will likely need to be modified later though. For Units choose Pixels. Under the Advanced dropdown choose Color Mode: RGB, Raster Effects: Sceen (72pi), and Preview Mode: Pixel.

Setting Up Your Workspace for the Web

Turn on your grid by going to View > Show Grid or (Command/Ctrl + Quote Mark). Now set up the size of your grid. Go to Illustrator > Preferences > Guides & Grid. In the Dialogue Box set up the Gridline Every: 1px and Subdivisions: 1. This will create a 1px grid. Now go to View > Snap to Grid (Command/Ctrl + Shift + Quote Mark). This means when you draw your layout boxes and other elements for your wireframe it will snap to exact pixel measurements on the grid.

Turn on your Rulers View > Show Rulers (Command/Ctrl + R) and set guides that will define the 960 wide main web layout area. First Make sure the rulers zero mark is set to the top left hand corner of the Artboard. Then drag a guide from the left side of the document over until it clicks on 100px mark, as seen in photo below. Do the same thing on the 1060px mark. Now we are all set up to build our wireframe.

Building the Layout of the Wireframe

Wireframes can be used for many different purposes. The wireframe we are using today is being built for the purpose of setting up a layout. Let's say we want to quickly set up a layout and then get it off to the client for approval.

Drawing with the Rectangle Tool (M) is a basic part of building a Wireframe. Even when you are going to be making Rounded Rectangles its still better to use the Rectangle Tool. I'll show you why as I build the header. Draw a rectangle 960px Wide and 120px Heigh, that is about 40px from the top of your Artboard, and on its sides touches your guides. After selecting the Rectangle Tool (M) you can click anywhere in the document and a Rectangle Dimension Dialogue box will come up. Or draw a rectangle with your mouse and use the tools below to manipulate your rectangle if it wasn't drawn at the correct size.

Below are pictured some great tools for manipulating the dimensions of a rectangle. The Reference Point allows you to choose where the starting point is depicted from when changing the dimensions of a rectangle. If you set the reference point to the center. Then growth would happen on either side of the rectangle. If you set it to the left then it would grow to the right if you increased its size. Play around with it. It works great. Then the Width and Height values can be plugged in right there as well. Very convenient. I use these all the time.

Now we are going to round the corners of the rectangle. Go to Effect > Convert to Shape > Rounded Rectangle. Under Relative set the Extra Width: 0 and Extra Height: 0. Set the Corner Radius: 9px or whatever you prefer. We are setting both to 0 because we are not changing the size, but only rounding the corners. The reason to use the Rectangle Tool (and not the Rounded Rectangle Tool) and convert it to a shape is it allows you to change the size of the rectangle without distorting the rounded corners. If you used the Rounded Rectangle Tool and then made your header taller it would warp the rounded edges of your rectangle. By using the Convert to Shape Effect with a plain Rectangle you avoid that problem.

Now we are going to use these same techniques to build the rest of our grid. A time saving technique is to copy our header rectangle that already has the rounding applied to it. That will save yo a step. Then use the Reference Point and Dimension tools at the top to change its values. Repeat this step for each layout area. Following are the dimensions of everything I created in the screenshot below: Header is 960px wide by 120px high, Primary Navigation is 960px wide by 36px high, Main Content Area is 650px wide by 670px wide, Right Column is 290px wide by 670px high, and Footer is 960px wide by 60px high. I haven't named these areas with labels because we are going to be filling in some details shortly.

It also helps to have guides placed for our content area. Main content has 30px of padding and sidebar has 15px of padding. So place Verticle Guides at 130px mark, 720px mark, 785px mark, and 1045px mark. You can see there is 20px of space between main content and right sidebar content areas. I just eyeballed the other spacing.

Add Information and Details

Overall the goal here is to give the client a feel for the spacing and overall look of the site without worrying about color yet.

Stylistically the All Caps Blue elements are labels. Everything else is actual content. I reused some icons from previous projects. This can also speed up development. On my personal blog projects I'm using similar icons and styles, with slight layout modifications. This example would be another Blog Layout along the same lines. I may end up using this for a project at some point. See Blog Elephant for another example styled with similar elements.

I usually go to Lipsum.com to get my Lorem Ipsum test. I can't remember where I got the RSS icon from. If anyone can point it out to me I'll add a link in this post. I likely did a search for "free vector rss icons". Here is a link to some Free Cool RSS Icons at Vectoreezy. Here is a link to Blog Spoon Graphics on how to Create a Vector RSS Icon with Illustrator. I'll be covering some details on the other icons I used here on another tutorial.

Adding Callouts to the Wireframe

Go to File > Document Setup Under the Artboard drop down set your Height: 1300px. This will give you some room to add callout notes below your wireframe. These are just examples of how callouts could be used. Sometimes they are very useful and other times I don't use callouts at all, but rather place the notes directly into the wireframe.

Draw a blue circle and put a number in it and group the element. Then you can move it around to where you need to use the callout and then copy and place it below in the Callout Notes to reference it.

Once your wireframe is complete I recommend adding a touch of branding at the bottom to give it the feeling of professionalism. And add all your contact information. You never know down the road if this will be needed by your client. Keeps it handy for them.

View Full Scale Final Version

The Many Flavors of Wireframes

Wireframes are used for many purposes. The wireframe we created above was used to show a potential client a layout possibility. Imagine this compared to a couple other layout possibilities and it would be some good amunition for the client to decide on a direction. By using illustrator it keeps things flexible if your client has some changes to make to the layout. The wireframe above has some level of detail, but depending on the client's needs you may choose to put more or less details into the wireframe. It will also likely grow as the process of communication progresses with the client.

While this wireframe we created focuses on layout options, wireframes are a great tool to quickly access options for any number of design and functional requirements. You could have a set of wireframes that show different navigation options for example.

This tutorial has reviewed some common elements you could use in your wireframing of documents within illustrator. If you would like to give additional tips on wirframing in Illustrator or links to tools you recommend for wireframing in other programs feel free to comment below.