Advantages of Wireframing
The main advantage of wireframing is that it provides a visual that can be presented to the client without really spending a lot of money. Moreover, wireframing gives you the opportunity to gather feedbacks for prototype usability tests. With wireframes, making design changes are more convenient.
Wireframes allows to test your site. For instance, you can see how easy or difficult it is to locate key pages or to check whether dropdown menus will attract or confuse the user or is the overall navigational scheme more intuitive, incomprehensible or somewhere in between. Moreover, wireframes enables the developer to have a clear path of what has to be done.
Disadvantages of Wireframing
One of the downside of wireframing is that it does not offer any design, or account for technical implications, which make it difficult for the client to grasp the concept. They just can’t see the design behind the fine lines and greyed areas.
Also, wireframes causes time creep because too many time are spent for making the wireframes perfect. Most of the small business uses online applications that are open source, and thus, only few alteration is made in the interactive component.
Methods for Building Wireframes with Illustrator
1st Step: Construct the Document
Open a new document and set the height and width to a real web page. For instance, you can create a new document that is 1280px X 1500px. As you will notice, the document appears to have a green box with crop marks on the outside. When you export your document to another working file, the content inside the green box with crop marks will be the only thing that is exported.
2nd Step: Creating the “Live Area” Guide
After setting up the document, this time you have to setup the live area. To make this happen, you can simply click on the rectangle tool and then click down inside the artboard in your illustrator document, then specify your dimension. I.e. 900px X 1400px. A box with your specified dimension will appear, you need to align this to your art board. To do this, go to window > align then click “Align to Artboard” box. Once the “Align to Artboard” option is selected, click on the “Horizontal Align Center” option and click on the “Vertical Align Center” option in your palette. To make your box into a guide, simply go to View > Guides > Make Guides then you will have your “live area” guide in the center of your document.
3rd Step: Build the “Column Grid” guides
To make a column grid, start by creating another box with 860px X 1360px dimension. You will then have another box that you can make as a column grid. This box can be split into a grid by selecting Object > Path > Split into Grid. You will be prompted with a “Split into Grid” dialogue box where you can set your number of columns. Make this columns into guides by choosing View > Guides > Make Guides. The result of these step is a document containing a “live area” with a “column grid”.
4th Step: Place the Content
You can now place the content in your guide. Position your header, navigation, content, and footer in your document. For example, to make a header, simply click on the rectangle tool and then specify the desired dimension. Place it on top of your grid. The same thing goes to navigation, content, and footer area.
5th Step: Form the Annotations
Creating annotations is very helpful in any part of the design that require more explanation. The explanation of content and functionality will be out of the way of the actual design of the page. In here, you now have a Wireframe document created in Adobe Illustrator.
Just like any design process, you should not be afraid to go over. Spend some time experimenting with different tools and processes until you achieve your design absolutely stunning.
Richard is a creative designer & blogger. He writes for Crayonify about Graphics, Creativity and UX Design. Richard loves to unlock his creativity with writing.