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.