When it comes to building wireframes for my next big project I usually cringe, especially if there are going to be multiple UX team members building them. Everyone has their own style, and usually their own favorite application.  I’ve seen wireframes built in Powerpoint, Word, Excel (yes), Visio, Illustrator, Balsamiq Mockups, the list goes on.

So which of these great apps is best suited for the task?

I’d have to say I have a preference towards Adobe Illustrator and here’s why: Along with being a completely vector based app, it also has a sprinkling of Photoshop, Indesign, Flash and Dreamweaver. Personally I think Illustrator is Adobe’s best app (post your comments below :-).  Wireframing, specifically is great in Illustrator because I have full control over all of my visual design, no matter how simple or complex my wireframes get. I also can create (and share) symbol libraries of common UI elements to rapidly cut down on the time it takes to create each screen. With the new multiple artboards in CS4 I can even keep all my wireframes in one document so I can see them all at once and then EXPORT them in to a multipage PDF with one click (and they all remain vector keeping file size down and retaining detail)! Amazing.

Another HUGE benefit Illustator gives is a seemless transition into the design phase of your project. I know some people will start screaming at the argument that design mockups can be done better and faster in Illustrator rather than Photoshop, so I’ll save that for another post, but opening up your saved wireframe document and then beginning to “color in the lines” like a coloring book is really handy.

In the upcoming weeks I’ll be posting tutorials of the best techniques I’ve learned for quickly building both layouts and design comps in Illustrator.

The future of wireframing

Not sure how much publicity Adobe is giving this new app yet, but if you haven’t heard about it yet you should really check it out. It’s called Adobe Flash Catalyst, and basically  accelerates the process of getting from initial wireframing in Illustrator to final development in Flash or Flex.  Check out their site for a few great video demonstrations.