我的 blog, 我的 thoughts.

Menu

Free Wireframing and Mockup Tools Impressions

I’ve tried a couple of wireframing apps that are free (or have a free option) and are web-based. I don’t have a set criteria so all of these impressions are pretty subjective and not that in depth. One feature that I really would like, though it may not be that practical/useful, is to have vectorized output (if exporting as PDF or SVG).

Many of these apps have common features listed below (including my personal rank of importance for my purposes):

drag and drop interface (important)

decent collection of basic UI components (important)

multi-page support in a single project (semi-important)

interactive prototype with links to different pages within the project (nice to have, but not that important)

collaboration framework; inviting people to view/edit in real-time (nice to have, but not that important)

As such, most of what I say about each one will focus on the drawbacks, particularly the ones that were deciding factors to not use them.

Okay, this one isn’t really web-based, but it’s not a desktop application either. It’s actually a Firefox extension. This one has been around for awhile and it works pretty well; it has support for multiple pages and a pretty good selection of widgets. The major downside is export options. Frankly, they suck and some of the export profiles/plugins don’t work. Thus, this one is out the window for me.

This web app seems too good to be true, and as it turns out, it doesn’t work as well as I would’ve liked. A seemingly small but important gripe is the selection tool. Click an object to select (which highlights the border with dots on where you can resize it with a mouse drag). That makes sense, but the only way to get rid of the border is to select another object. What that means is you can’t click outside the object on the canvas to unselect the object, so your stuck with the border highlighted until another object is selected. This is a minor aesthetic detail, but it becomes a big deal when the project is exported, because the selection border shows up in the final export.

Another drawback for me is the font; it looks kinda ugly and I didn’t see any option to change it. And the last gripe I have with it is even though it can export to PDF, the output isn’t vectorized.

Google Drawings

Implemented with HTML/CSS/Javascript

This is part of Google Docs so it’s more general-purpose than the other ones. All-around, however, it embodies all the features that I think are important, namely SVG output, font modifications, and sharing options (included with every google doc). But since it’s not specialized for wireframing, it has some drawbacks for this goal. No multi-page support and no options for implementing interactivity. This feature isn’t as important to me mostly because I’d rather first choose an overall design scheme and implement the actual flow using code (currently experimenting with a lightweight web framework called Sinatra, built using Ruby).

This is the webapp that I actually won a Cr-48 from! (No I haven’t received it yet, but hopefully I will soon). This app is pretty powerful and has a really nice and smooth interface. It’s also got several useful export/publishing options including PDF (vectorized! Yes!) and link-sharing. There is multi-page support and interactivity as well via links to internal pages or external sites. The only drawback is the free package is pretty limiting (only 60 objects per document), but for basic/small wireframes, it works great.

For offline option, I’ve tried using Inkscape, based on this presentation by someone who prototypes for Fedora. The presentation is a nice quick intro to using Inkscape for this purpose, and SVG can be used to create interactivity by attaching javascript (since it’s an XML document). SVG also has pretty wide support across modern browsers.

More…

For more wireframing options, check out this blog post on speckyboy. Some brief thoughts on some that are listed in the post:

Tiggr – needs more experimenting with, generates a HTML/CSS prototype but has no other export options. Interface implemented in flash.

fluidIA – not that easy/intuitive to use, but looks like it could be powerful if learning curve is overcome; still immature.

Mockflow- implemented with flash, needs more experimenting. There are several export options, but in the output, text is not vectorized (overall quality is still good though; you’d have to zoom in a lot to see the pixels)