For as long as I can remember, I’ve been trying to find a better way of documenting designs. I’ve posted about this before, and I still think that Axure looks promising, but most of my IA life’s been based around Visio, some occasional PowerPoint – and on joining Oyster/Framfab – FreehandMX. None of these tools has really baked my cake when it comes to combining text with annotated graphics though. This is a shame because that’s what I’ve been doing a hell of a lot of in the last couple of years. However, after a chance realisation abut MS Word a couple of months ago, the arrival of a Fireworks guru on my project and some good teamwork, things are looking up and I want to tell you about it.

Word can display PNGs. Fireworks’s native file format is PNG. This means that two great tastes can taste great together: use Fireworks to create your wireframes and other graphics (and turn ’em into symbols and do other wonderful things); use Word to link to the Fireworks PNGs. Annotate them, cross-references them, index them, paginate them to your heart’s content – print them out as booklets and navigate around them with the document map (if you have Office XP). Your documents are instantly more usable, less error-prone and generally work better for both readers and writers.

How We Did It

Having inherited a bunch of Freehand wireframes for the first iteration of my current project, we had to convert the files to Fireworks first. Somewhat cheekily, we enlisted the help of a couple of interns for most of this while we worked on producing a Word template to wrap the resulting PNGs. Each Freehand page was converted to a single PNG file and named according to its wireframe reference. We also created another couple of files to store symbols to link to (for re-usable objects – one of the many things that Fireworks does so much better than Freehand).

After some experimentation with the Word template, we were keen to keep it as simple as possible. No larding up with tables, sectional formatting or auto-numbering. If you don’t play Word’s little games, it will complain.

Then we began, and it was good. The initial copy/paste fest from the annotations in Freehand was a pain, but gradually the daylight dawned. Putting each wireframe image in a table on a single page means we have plenty of room to design large pages (printing on A3 if needed). Numbered call-outs on the linked image are slightly klunky to position, but you get used to it. We then have the text for the annotations on the next page. Simple and easy. One of us said they thought Word’s “document map” feature alone was worth the price of conversion from Freehand. No more scroll/zoom hell to find the page you want! No more fretting about text positioning or annotations running over pages; you can re-order sections with a flip of the outliner… the list of joy compared to Freehand (or Visio for that matter) seems endless. ALT+Tab-ing between Fireworks and Word makes it feel almost like one application. An “update links” button the menu bar gives you the latest versions of your graphics to play with.

Fireworks, meanwhile, is better than Freehand for wireframe graphics in many ways. Better symbol handling, better control over things, pretty much better everything. Our only concern was that it being web-orientated, its 72dpi graphics look a bit fuzzy on the printed page. But that’s not turned out to be problem.

Problems So Far

  • For a 30-year old piece of software, you’d think Word would have a lot fewer bugs than it has. Thank the flatulent monopoly that is Microsoft for that I suppose. As long as we eschew the more exotic features of Word, we should be OK. One of these bugs is that the links to the images (kept in subdirectories beneath the Word doc) sometimes mysteriously change their paths, but it’s not a big issue as they can be re-made quite easily.
  • Making PDFs (with Acrobat 7) sometimes takes a couple of goes before all the images turn up. Not sure why. PDF Maker preserves the clickable cross-references (and table of contents links) though, which makes up for this.
  • It’s tempting to break up the document into pieces (using Word’s “master document” feature) so as to make them more multi-user, but we’ve been warned that this will almost certainly lead to corruption. We’re using SourceSafe to keep things ship shape with three of us maintaining two Word documents which currently link to about sixty images between them.
  • With wireframes on one page, and annotations on the other, the documents are getting rather long.

Despite these issues, I for one am hooked. There is no way I am going to go back to using Visio, let alone Freehand. Long live FireWord! Well, until Axure gets serious, anyway.