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:
Mockingbird (http://gomockingbird.com)
- 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.
MockFlow (http://mockflow.com)
- 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.
iPlotz (http://iplotz.com)
- 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.
Axure (http://axure.com)
- 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.
ProtoShare (http://protoshare.com)
- 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.
Comments (2)
November 21, 2011
6:57PM | #
Tom, I'm glad you were able to give ProtoShare a try! Collaborating with internal and external stakeholders is really important to us and key to the development process, so we've been working hard on expanding our collaboration capabilities (in fact, a new release is coming out in December 2011).
Being able to have a single repository for all your creative planning is also important (design comps, discussions, live web views, and low-fi wireframes evolving to hi-fi wireframes), so there is some complexity to get over. I'm sorry about the interface frustrations you ran into.
We are always working to improve our product, so if you use ProtoShare again, please contact our Support team to answer questions and log issues that we can work on in the future.
Best of luck in your search,
Andrea
@ProtoShare
December 8, 2011
4:19PM | #
Hey Tom, you should also take a look at FlairBuilder. Maybe you'll find it useful. It's a desktop application, but lets you build powerful interactive prototypes. Soon it will also support HTML export.
It also lets you annotate your wireframes, and your team can see the wireframe in an online viewer. Handy! :)
Let me know what you think!