Thursday, November 3, 2011

Using Wireframes for PA Web Design Projects by: Sue McCrossin

Wireframes make up an important part of every web design project, whether they are pencil sketches or actual HTML prototypes because the whole idea behind the wireframe is that the team invests a bit of time upfront to avoid costly mistakes after development. Designers use wireframes to communicate ideas to clients in a simple and quick manner, and they can also be used to run data and process flows past programmers. They are essential to the process because they save time in programming and make the whole process of web design faster and cheaper.


In most cases, a hand-sketched wireframe is all that is necessary to convey the way a website will function to the client and to other project team members. Only on very large projects is it necessary to build actual HTML prototypes that will function like the web pages. Sometimes a wireframe may start as a sketch. People tend to draw on it or add sticky paper shapes to it. The problem using this type of wireframe is that it looks messy and unprofessional, and it is difficult to share. Using a web-based tool cleans up the wireframes and allows all team members to share the document and make their own changes.

The idea behind the wireframe is to get everyone on the project involved at the beginning in order to save time and expense on the project. Involving the entire team (client, analysis, designer, programmer, marketer, etc.) to conceptualize the design might seem like it would be expensive, but this is actually not the case.

There is no cost for throwing ouy a bad sketch – so many options can be explored to solve the problem.

There is no attachment to a sketch – as there would be for a design that someone labored over – so this allows for a better creative process.

Involving the developers early can help to identify pitfalls before time is spent on design.

Involving everyone early helps in team building and helps to get client buy-in so that final designs have a more likely chance of being approved.

Ideas can be communicated to the entire team so that concepts are not lost when the design is handed to the programmers.

A picture is worth a thousand words, and concepts can be easily explained and even tested by drawing pages and their interactions. This way there is less chance of misunderstandings in later stages of the project.

Wireframes allow the team to hypothetically try a variety of approaches to solve the problem. Sometimes several approaches can be combined to produce the solution.

Wireframes can also be used to test the concept as well as the screen and data flow.

The ideas behind getting all these people together using wireframes is that the process is usually quick and inexpensive. A redesign after work has been complete is always expensive and frustrating.

Even small changes can and should be done via wireframes. It only takes a few minutes to print out a page of a website and sketch the necessary change. Send a photo or copy of that to the client, and it can easily convey what needs to be done, and get the client’s approval. It also allows the client to pose any questions or objections before the work is done.

Using Mockingbird, even a non-programmer can create, link together, preview, and share mockups of a website as long as everyone can use Mozilla Firefox, Google Chrome, or Apple Safari browsers. Wireframes take minutes to create because you just drag and drop the icons on the left into the wireframe on the right. There is a snap-to-grid that makes it easy to position them on a page, and each element can be custom-sized and have text appended. The tool allows for unlimited links to other wireframes, so that you can test the flow of the web pages.

There are 4 pricing plans ranging from $85 to $9 per month, and a free version that allows for one Mockingbird project.

There really is no reason not to wireframe all your PA Website Design projects!

About The Author
Sue McCrossin is owner of PA Website Design, a subsidiary of Boomtown Internet Group. She is always interested in writing about enhancements such as wireframes for better PA Web Design. For more information Pennsylvania Web Design visit our website.
The author invites you to visit:
http://pa-websitedesign.com