Wireframes can Make or Break your Project

Have you suffered the consequences of not reading directions, only to find out later that your partially assembled Ikea couch really did need that cross bar indicated in step 1? One of the greatest challenges to developing web applications is allocating enough time for design and realizing it’s critical value to the overall success of the project. Design’s value gets forgotten when a project goes well because good design tends to deliver a good product. It’s only when things go wrong that managers begin asking questions about why something wasn’t uncovered during the design phase. Business analyst and user experience designers take the heat, and project efficiency suffers whenever developers need to rework their code because of a missed requirement.

What about projects that had a lengthy design phase, but issues remain? In these cases, one needs to evaluate the outputs of the design phase. For many projects, a design phase is considered successful if a functional specification and mockups are completed and signed-off. Done correctly, the specification is the go-to resource for all functional elements on a given page or view. When the project is complete, it should serve as an artifact to help future teams understand how the application works. It helps the documentation team create support documents and training guides. With all the detail included the functional specification, it tends to be long and one-dimensional. It’s an information resource but is also subject to interpretation. This is where wireframes add great value to the design process.

Wireframes can help minimize the unknowns by uncovering issues that would otherwise be overlooked in a specification. Unlike the specification, wireframes are a visual representation of functional elements of of the site or system. Still, project leaders dismiss wireframes as unnecessary or are under the misguided assumption that design mock ups are the same thing.

Creating wireframes allow designers/business analysts to apply the details in the specification to a basic visual flow of the site. While the specification can get a little heavy for non-technical users, the wireframe’s box-and-arrow simplicity is approachable and powerful. This is an important point because the earlier you get stakeholders on board with how the designed system will work, the better chance you have at identifying issues early. Once the wireframes are on paper (or the screen), it’s just a matter of developing use cases and stepping through the scenarios. If there are design problems, you will find them very quickly.

With all the available options out there today, there in no excuse not to develop wireframes for every project. When we started wireframing many years ago, we had to install an Excel macro that allowed us to build very cumbersome and difficult to use pages. It was also a nightmare to maintain. A few years later we started using Flash, which were great for creating prototype pages, but were also difficult to maintain. VISIO was probably the most difficult to use but today we only use VISIO for work flow diagrams. We don’t miss the old days.

Wireframing options

There are many different wireframing applications on the market today. We have outlined three options to suit every budget from old school to high-end wireframing nirvana.  We could spend a lot of time identifying the pros and cons of 10-20 different applications, but we decided to stick with what we like and use.

Axure

For the high-end wireframing, Axure is one of the best. It supports drag-and-drop functionality, making it very easy to create pages. It also provides the ability to link and export the application in HTML or Word so you can build your wireframes, functional prototype and specification in one place.

We never used the specification feature because it didn’t convey information as well as our standard templates. We also had an issue with the Word export if your system only has Open Office. We found it impossible to open the exported document in OO.

Axure

Evolus Pencil

If you don’t want to spend the money on a complete wireframe and prototype package, we think Pencil is a good option. The best part – no download! It’s a Firefox Add-on. This is valuable to the mobile user since you can have the add-on running on multiple computers. We evaluated all of the open source options on the market and believe Pencil was the easiest to use, supports drag-and-drop functionality, and if the existing box-and-shape widgets don’t meet your needs, you can install a new collection.

Pencil

We used Pencil on our last project. Here is a screen shot of it in action:

Pencil in Action

Pen and Paper

If all else fails – break out the pen and paper! Sure, updates can be a little difficult, but if you find yourself in the back of a bus with no access to your computer, there’s nothing wrong with designing your wireframes on paper.

Good Old Paper

Share:
  • Facebook
  • Twitter
  • Identi.ca

Leave a Reply