Wireframe Walkthrough

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):

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:



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:



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.

http://www.sccc.premiumdw.com/

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: