Design before you build with wire frames

Tony Patton explains why using wire frames to properly design a Web application before development work begins will please clients, project managers, and Web developers.

While I spend most of my development time working on Web applications, I often fulfill client requests for Windows client applications. When moving between the two, I am always surprised at how much more planning goes into the Windows application. People often think that Web developers can transform their vague requests into fully functioning Web applications with little or no input from them. Wire framing is one approach or tool you can use to properly design a Web application.

Where are we going?

A common creed expressed by project managers is, "A failure to plan translates to planning for failure." Basically, everyone involved with the project needs to agree upon the vision of what is being built. After all, how can you manage expectations when everyone is working off of their own ideas?

I know a fellow developer who often tackles Web development projects based upon a fixed price to complete the work. The problem with this approach is that he rarely has an upfront plan, so he is often bombarded with feature requests that would be considered outside the project scope. Consequently, he rarely realizes a profit on the project and spends a lot of time scrambling to complete the work.

I rarely get into this type of situation; I make every attempt to hammer out a plan before work begins, or I agree to work on an hourly basis and factor in materials. Let's take a closer look at utilizing wire frames to properly design a Web application before development work begins.

What does it do?

Like every project, you begin by stating the application's purpose. Basically, you want to formalize the problem it is solving and continue onward by stating how it will do it. With Web applications, you should begin by defining the areas of the application.

Weekly development tips in your inbox
Keep your developer skills sharp by signing up for TechRepublic's free Web Development Zone newsletter, delivered each Tuesday.
Automatically sign up today!

Many developers or designers like to begin with the application's home page, but this can wait until all areas of the application are defined. A site map is a good tool to use when designing an application's structure. It provides a quick overview of the application's structure. It is best to keep it to one page, but this can be a problem for large applications. For larger sites, you can sub-divide it into functional areas and develop a site map for each area. You can use tools like Visio or Illustrator to build a visual representation of a site, but paper and pencil suffice as well. With the site map in hand, you can move forward to laying out the individual elements (or pages).

Framing the site

A good analogy for understanding wire frames is building a house. In this case, the site map is the blueprint that is used to build the house, and building begins by framing the house. The wire frame defines the basic frame or structure of a Web application.

You can use an HTML editor or your favorite text editor to build the various pieces of the wire frame. Basically, you translate the elements from the site map to actual Web pages. Individual page appearance is unimportant at this point.

The key is including the necessary functionality on each page, so the application's flow is demonstrated. A good technique is including the page's purpose in its body. This is good information to be presented during a demo of the wire frame, so the client or users can easily agree or disagree with the page's stated function.

Review and revise

The review process is the ultimate goal of the wire frame. In addition to reviewing the purpose of a site element or page, the wire frame allows application functionality to be easily demonstrated. At this point, the client can confirm the design. It provides an excellent forum for locating any errors or problems with the application's design or flow. This is the best time to recognize and correct design errors or omissions, since no actual development time has been spent; also, the cost impact is minimal if anything at all. You can make the necessary changes to the wire frame and review it until everything is as it should be. With client signoff on site functionality, you can proceed to preparing its visual appearance.

The look and feel

You can extend the basic wire frame by adding content and/or images to verify the client's desire for its look and feel. Also, depending on the application, development may be able to begin since the functionality has been set. This may include the backend data model and any programming required for application elements. The text and/or images may be filled in later with placeholders used during development. The updated wire frame with text and images can be used to gain further client signoff on application appearance and presentation.

Know where you are going

Web developers are neither mind readers nor magicians, so it's imperative to have a good plan when developing a Web application. A site map and wire frame allows you to easily state the understood functionality of an application in a manner easily presented to the client. From there, they can confirm or deny that it works as planned. When everyone is in agreement about the plans, you can start development work with a clear goal in hand.

Miss a column?

Check out the Web Development Zone archive, and catch up on the most recent editions of Tony Patton's column.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.

About Tony Patton

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

Editor's Picks

Free Newsletters, In your Inbox