WEB200 > Creating a Website Wireframe in Illustrator
Website Wireframes are black-and-white schematic diagrams that illustrate blocks of content, navigation and functionality of a website design. They are used in the process of designing the content layout for pages of a website.
This tutorial will walk you through creating a Website Wireframe document using Adobe Illustrator (CS3):
Download: Creating a Website Wireframe in Illustrator | Premium Design Works
Step One: Creating the Document
I usually make my new document to allow for the height and width of a real web page. I also create guides to help me out with my “live area” of my web page and to help me out with my “column grid.”
NOTE: When creating a Wireframe document, we need to keep in mind that this document can be used to flush out our visual design when we get to it.
In this case I will start out by creating a document that is 1280px X 1500px:
NOTE: You should choose “Web” for your new document profile. But, when you change to a custom size it will change to “Custom.”
By creating a web document with the 1280px X 1500px settings, we have a point to work from that will allow us to design what will happen in the “dead area” of the web page.
You will notice that when you create a web document with the 1280px X 1500px settings you will see a green box with crop marks on the outside:
NOTE: This green box with crop-marks will be important down the road when we use this document to start our visual design.
When we export this document as another working file, only the art inside the green box with crop-marks will get exported:
Step Two: Creating the “Live Area” Guide
Now that we have our document set up, we need to create guides to work from for our “live area” of our web page.
As of late I have been designing web pages with a “live area” of about 900px wide. But, let’s not forget that we will have a “live area” that goes beneath “the fold” of our browser screen. Therefore, I will be creating a “live area” of 900px X 1400px. This will allow for me to have enough vertical room to design content that is below “the fold.”
I will start out by making a box that is 900px X 1400px. To do so, I will need to click on the rectangle tool and then click down inside the artboard of my Illustrator document.
Once I do this, I will get a dialogue box that I can insert my dimensions:
Now I have a box to the correct dimensions.
However, Illustrator has just placed this box in a random spot on my art board:
To get the box in the center of our art board, we will need to use the align palette. If your align palette is not open, go to Window > Align.
Now that you have your align palette open, make sure your box is still selected and click the “Align to Artboard” box:
Now that your “Align to Artboard” option is selected, click on the “Horizontal Align Center” option in your align palette:
And, click on the “Vertical Align Center” option in your align palette:
Your box should now be centered inside your document. You are now ready to make that box into a guide that will be the “live area” of your web page.
To turn this box into a guide, go to View > Guides > Make Guides:
You should now have your “live area” guide in the center of your document:
Step Three: Creating the “Column Grid” Guides
Now that we have created our guide for our live area, we are going to use some of the same steps as above to create our column grid.
I am going to start out by making another box that is 860px X 1360px so I will have a margin around my columns of 20px. I am also going to center that box inside my art board using the align palette again.
The result is that I now have another box in the center of my art board that I will make my “column grid” from:
Instead of turning this box into a guide right away, I need to split it into a grid.
I am going to choose Object > Path > Split Into Grid:
Once I do that, I will get a dialogue box to choose my grid settings.
In the “Split Into Grid” dialogue box I am going to set things to 3 columns with a 40px gutter:
Once I have done that, I will need to make these columns into guides by choosing View > Guides > Make Guides.
I now have a document containing my “live area” with a “column grid” that I can work from:
Lastly, I am going to rename the layer that contains my column grid:
Step Four: Placing Content
Now we need to design the content layout of our web page.
See Also: Content Layout | Premium Design Works
Let’s first start out by creating a new layer to create our artwork within:
You should also lock your “Column Grid” layer.
I like to start out with dividing the page into the main components of layout:
- Header
- Navigation
- Content
- Footer
I will then start with making a box for the header at a dimension of 900px X 180px:
Once I have made my box with the rectangle tool, I will put in place over top my grid:
I will then make the other boxes for the navigation, content and footer areas:
If I hide my guides via View > Guides > Hide Guides…:
…you will see that the areas are clearly defined:
Now that my areas are defined, I need to place the actual content of the page:
Let’s notice that I have used a company name and the actual navigation items from my information architecture. You will find many Wireframes that use dummy links for the navigation. I disagree with that methodology.
If the purpose of a Wireframe document is to show the Client a content layout… You should use the actual navigation items from the information architecture. This will show the Client exactly how the navigation will look and work.
Notice that I have used the actual headlines as well. But, have used “Lorem Ipsum” text for the areas of text that are subject to change.
Step Five: Creating the Annotations
Lastly, we will need to create annotations to describe functionality.
The term “Spotlight Animation” doesn’t describe the contents of the animation. It just tells us that there will be an animation of some sort in that spot of the page. Therefore, we will need some way of describing the contents of the animation to our Client.
Let’s simply place a “call-out” next to the description:
We can then describe the contents of the animation using annotations:
This way, the explanation of content and functionality will be out of the way of the actual design of the page.
We should create these annotations for any part of the design that may require further explanation. Let’s not forget to include the measurement of how wide the page is either.
After adjusting the guides a bit and creating the indicia… We now have our finished Wireframe document created in Adobe Illustrator (CS3):
Download: Creating a Website Wireframe in Illustrator | Premium Design Works
This portion of the Premium Design Works website is written by Mike Sinkula and dedicated to the Web Design & Development students at Seattle Central Community College.
34 Comments:
Leave a Comment:
Thanks Mike,
I’ll be using this for my ux/ui class upstairs
[...] Also: Creating a Website Wireframe in Illustrator | WEB200 | Premium Design [...]
[...] Creating wireframes. [...]
I don’t get it…
[...] Creating a Website Wireframe in Illustrator | WEB200 | Premium Design Works [...]
CANNOT FIND A PLACE TO INSERT CODE???
Try your butt.
[...] Create your own grid in Illustrator [...]
Hey thanks a lot, I’ve heard people using IL for wireframes but haven’t found a useful tutorial!
[...] using InDesign Wireframing using InDesign 2 Wireframing using Illustrator Wireframing using Photoshop 960 Grid System 11 Free UI Kits for iPhone and iPad Wireframing [...]
Verry usefull wireframes. Now I can make my customers understand my projects.
[...] with Software Wireframing using InDesign Wireframing using InDesign 2 Wireframing using Illustrator Wireframing using Photoshop 960 Grid [...]
But you cannot create a custom size web document of this size!! there are only three size preset sizes for web.
Choose “Custom” and type the size in yourself.
Woh! This was what i was looking for.
Wireframe using Adobe Illustrator cs5 i just downloaded for wireframing purpose.
Thanks yaar,
bgb76
[...] Wire-frame Designing for Website in Illustrator: The design tutorial will take you through the process of making a document of Website Wire-frame with the support of Adobe Illustrator. Tags: adobe illustrator, design styles, design tutorials, featured, graphic design tips [...]
Very interesting post. It is pretty neat to be able to create wireframes in Illustrator – and it’s even possible to do likewise using Excel or even PowerPoint (although I wouldn’t really recommend it – you’d be ‘fighting the tool’ too much).
What’s particularly neat is the way you’ve been able to create a grid system, which is something even the dedicated wireframing tools (such as Balsamiq) don’t do (as far as I can recall). That said, depending on your needs, a dedicated tool can make a lot of sense and quickly pay for itself (as it can be lots quicker to create conceptual designs by using pre-made UI elements for instance).
If you’re interested, I interviewed the creator of Balsamiq just the other day – you’d be more than welcome to come visit my prototyping blog (http://softwareprototyping.net) and the Peldi interview is here: http://softwareprototyping.net/interview-peldi-balsamiq/ )
Great stuff, Mike!
How did you bring up the GREEN CROP MARKS? I am not getting any.
I am using Ai CS5
It’s a CS3 thing when you choose a web document.
so this is not available on cs5 ? I was just curious b/c I can’t get it to show up either :-(
Fantastic article! Thanks Mike!
Great article. I really appreciate you giving such detail and screenshots to get me going!
Hey, you can also try a tool like http://www.flairbuilder.com that comes with a built in set of interactive controls and support for master pages and CSS grids. I hope you’ll like it!
Cristian
[...] Creating a website wireframe in Illustrator This Illustrator tutorial will show you how to easily and quickly create website wireframes which are used in the process of designing the content layout. [...]
You are professional.
Thanks for the tutorial. I’ve never really done wireframes other than through really rough, un-detailed hand sketches, so this helped get me going.
You are welcome.
I just found this AMAZING demo on grid-based design from Line25 (of course).
http://line25.com/tutorials/design-build-a-grid-based-web-design-with-css
http://webdesign-sketchbook.com/free-download/
Here’s a grid system sketch template….
i came across these sketching and wireframing PDF’s on smashing today, I;m thinking they might be helpful for sketching ideas out :
http://www.smashingmagazine.com/2010/03/29/free-printable-sketching-wireframing-and-note-taking-pdf-templates/
Thank you to Mike for the initial wireframe resource file which I’m using both for 105, 114 and 170 (So it’s doing triple duty today!) and to Adam Funk (honk!) for pointing out the wireframes library.
Thanks so much guys!
-Max
Some folks out there tend to use the same types of shapes and elements for all their wireframes. This guy has collected all his ‘usual suspects’ into a symbol library in illustrator. He shares it with the rest of the world here… http://www.johnnynines.com/2009/03/wireframe-symbols/
The straight dope!
Phew! That was quite a tutorial!