I've recently found myself evaluating wireframing tools, and I thought I'd share the results of my analysis. First, let's put out a definition of just what a "wireframe" is:
"[a wireframe] is a visualization tool for presenting proposed functions, structure and content of a Web page or Web site. A wireframe separates the graphic elements of a Web site from the functional elements in such a way that Web teams can easily explain how users will interact with the Web site."
Here are the main criteria I used to compare wireframe tools:
- I would prefer an online tool, or at least a desktop tool that offers real-time collaboration instead of file fragmentation. This tool should offer the ability to preview or user-test the wireframe over the web.
- I would love a tool that promotes and supports gradual enhancement of site elements, starting with basic page elements showing relative priority, then adding layout, then adding visual design.
- I would love functional prototyping, where you can configure clickthroughs from one page in the wireframe to another. In-page functional prototyping (such as drop-downs, popups, overlays, AJAX, etc., would be a bonus).
- I really want master templates to support global changes to page elements (ie, when you change the header or footer or even the layout of the template, it affects all pages in the wireframe).
- Export in HTML/CSS is highly preferred since it would save me time, but it's not completely necessary from my perspective.
- I would love the ability for us to add comments and annotations to individual page elements. This will help us evolve each wireframe, and annotations can serve as valuable notes during development to tell webdevs how each page should function.
I looked at the following tools:
- Like the snap-to alignment!
- Drag pages onto page elements to create links
- I like the ease and simplicity, but there doesn't seem to be a header/footer/page wrapper-- no master templates.
- Only exports as PNG/PDF.
- Exports as HTML.
- I don't like the open dialog, but I love the fact they have templates for different devices.
- Flash-based, and so the interface just isn't as fast as others.
- Controls for master templates are very hard to find.
- Requires Flash
- Has page commenting
- I like the presence of the drag-n-drop widget list, but it's ordered alphabetically instead of by functional groups, and the drawings look like a pencil sketch.
- It's a download, but has collaborative access (even SVN, where you can check out individual pages).
- Can upload files to share.axure.com to generate password-protected prototypes, or can generate local prototypes.
- You can export all copy
- You can gather and manage comments
- You can add annotations/page notes
- Export HTML
- Masters make templates for header, footer, etc.
- Disappointing that you have to publish specs to MS Word
- Disappointing that it's not a one-step publish to a web-available prototype.
- Has templates and masters
- Has component/widget palette, but these tend to be richer and more complex than I really want.
- Has page documentation and annotation
- Lets you modify CSS and HTML