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."
From Webopedia
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.
Summary: I really like the simplistic, easy-to-understand, let's-just-wireframe interface for MockingBird. This product has great potential. But the fact that it doesn't have master templates and doesn't export to HTML makes this tool less useful than I need.
- 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.
Summary: this tool reads as if it offers us everything we want, but I find that the interface just isn't pleasing to use.
- 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.
Summary: This tool also reads as if it offers everything we want, but I don't prefer the user interface.
- 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.
Summary: Even though it's a desktop tool, I really like the Axure interface. Its annotations and comments work really well, and I think the SVN capability would let us work perfectly well in real time. It produces very good documents, and I think we could easily live with the local HTML exports (as opposed to online prototypes). It is way expensive, though. Worth it, if you ask me. I really like this tool. Of those I've looked at, it has the easiest-to-use interface by far.
- 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
Summary: Of the pure online tools, I would have to settle on Protoshare. Note that I use the term "settle", because I don't prefer the interface (Mockingbird really has the best one). The widgets and dialogs are intended to be powerful, but really make for just a little bit too many clicks and too much reading. So it seems to me this tool has a learning curve to it, but once over that, I imagine it would be a fast and handy tool.