AJ Karim’s Ramblings

Wireframing Software Recommendations

// August 23rd, 2009 // Project Management

Depending on the organization you work for the glorious task of wire framing a web site or project to detail functionality deciphered from the business requirements/client requests may fall on the producer’s lap. In speaking with several friends in the industry it seems to really depend on how big or small the company is that you work for. If you were a Senior Producer at Leo Burnett for example a producer with work with Information Architect specialists to design/develop the wire framing/sitemap documentation. With smaller boutique agencies like RED Interactive, that responsibility may come back to the Project Manager/Producer.

In all honesty I am not opposed to producing sitemaps & wireframes… As with all aspects of a project’s strategy these very important tasks should not be done within a bubble. Here has been my strategy as of late:

Step 1 – Work with the client and account manager/director to understand what the project is all about – review the RFP & Proposal as well as have a client kick-off with all project stakeholders (Art Director, Tech Lead, Account Manager, Client).

Step 2 – Lay out an agenda for an internal kick-off with the team to understand what we will be proposing to the client as a strategy to meet the needs they have come to us to address.

Step 3 – Work closely with the Art Director on what creative answer they will be developing for the client and confirm with the Technical Director that what may be proposed in the static comps is do-able.

The above three steps should give you as a producer/project manager enough amo to begin developing a sitemap or wireframe.

Sitemaps & Decision Trees:
When it comes to creating the project map or any decision trees I can’t recommend anything but Microsoft Visio for that task. Its been around the longest (sorry mac users) but the latest version is incredible. There are numerous templates that can be found around the web, and its just as easy as it comes to laying out the project map.

In fact, in working with the team during the internal kick-off you may have already white-boarded out a sitemap and homepage and/or underlying page. Take those sketches or doodles and make it digital. I highly recommend starting out with Balsamiq Studios Mockups.

This is the easiest wireframing software out there – is it client-presentation ready? That is up to you… its cute… but depending on your client and the project, this may not be how you want to output your wireframes. What I like about it its cheap (80 bucks) and you can even try it for free – finish things up & do a “print screen” and see how that works for you. They even have iPhone app wireframing capabilities which is really cool for all you producers working on mobile elements to your projects.

So I start with Balsamiq – create a couple wireframes & present those to the Art/Creative director & Technical Director. They may have changes or suggestions which I will implement, and I essentially get sign-off that from a functional standpoint this is how they plan to implement the project.

Again depending on the client I may take those wireframes and re-purpose them utilizing Axure or Protoshare. I have used both & there are advantages to using one over the other. In the end a lot of what they offer is the same & benefits producers/project managers greatly. I liked Axure a lot, big fan, but having to download software to run it & its costs may be prohibitive to some. Protoshare allows anyone to see or review documents you create as long as you have a web connection and a web browser. Axure’s technical documentation output is much better then what Protoshare’s produces – more thorough and laid out better. With Axure – once I am done laying out the wireframes, the documention it produces on the fly for my technical developers is incredible. Protoshare’s is nothing special at all, but I know they are coming out with a new version. With Protoshare you can shre a link with a client and have them leave little “pin” points on certain elements and it leaves a nice history of comments on pages your team is developing. Eventually you can even upload a static comp with transparent buttons or CTA’s to illustrate a fake web site…

Its a toss-up, try both, spend some time creating a fake small project (i.e. newsletter sign-up) and see which one works for you…

Good luck – email me if you would like more advice on anyone of these tools, or templates I have worked with and developedd.