Evaluating free mockup apps: pencil and prototyper-free

There is quite a lot of mockup apps around whereas only some of them are under active development and additionally are offered with a non-commercial licene. I (only rawly) evaluated two of them, namely pencil (2.0.3) and prototyper-free (2.1.0) for an application in a web-ui project.

pencil is a classic in the mockup scene and may became most popular by shipping a firefox plugin variant that allows for quick web-based mockup production. however, since firefox meanwhile outruns any developer by updates, the current plugin rendered incompatible with my running firefox installation and i settled for the windows installation package. prototyper-free is, on the other hand, a branch of the commercial, fully fledged mockup tool that has been restricted in functionality and more specific in extensionability (see below) without preventing you from getting your mockup job done efficiently.

Evaluating the candidates against a mockup scenario that comprises a dashboard widget to hold a line- and/or bar-chart as well as some controls to adapt the chart presentation delivered the following results (to me, at least):

Pros, both apps

  • Both apps did not show any buggy or weird behaviour, seems to be relyable software.
  • Both apps offered adequate functionality to get the mockup job done efficiently.
  • Both apps allow for some hardcopy export of the mockup to an image or doc format.

Pros/Cons, both apps

Both apps come with preinstalled sets of controls for different operating systems or the web. However, the pencil control sets, called collections, can be extended by public downloads from the developers site. This is in fact a downside of prototyper-free where extending the control sets, called widgets, requires a commercial licence. In particular, since the dashboard widget mockup in regard will be implemented in extjs, the availability of a dedicated extjs collection with pencil showed up very beneficial.

Concerning the adaptability and the representation of the specific controls, prototyper-free is indeed heading the race due to its commercial ancestor. You can, e.g. for a list control, specify the list elements, a tooltip, the background, the padding and tons more of options in dedicated property dialogue snapped into the multiframe interface of prototyper-free. It also advantageous that the representation of the list control on the layout will already contain all the list elements specified. In such a way, you may estimate what other controls will be obscured when the list control is currently opened.

SNAG-0668prototyper-free furthermore offers a feature to simulate the behaviour of your web mockup in a (chromium portable) window, just to experience the user interface in live action. Finally, there is even a publish online action to place or replace content on a shared location. But, oops, again we find ourselves being aroused to curiosity by a restricted free variant of an actually professional and a (more or less) expensive tool.

SNAG-0671What’s the wrap up? Use pencil to get it going fast, stay free in terms of importable online resources or the set up of own collections. Iff you plan to actually achieve more than just mockups, say you want to even specify the padding of your controls with the model, execute a test against your domain with prototyper-free and then go purchase prototyper (or any other commercial tools).

have fun!

ps. Ähemm, on deinstalltion of prototyper-free, the wizard opens a web-site (to call home, no, no). I would want to express my dislike of this annoying and intrusive behaviour that has become more and more popular lately.


Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.