Monday, January 17, 2011

Eclipse-Based Wireframe and Mockup Designer: WireframeSketcher

If you are in need of a capable wireframe and mockup designer for Eclipse, this post will interest you. I was contacted by Peter Severin from WireframeSketcher last month. Peter asked if I was interested in trying out his Eclipse-based wireframe and mockup designer. He also provided a free license key. Thanks Peter!

In truth, I had been looking around for an easier solution to wireframes and mockups. I had been trying to use Adobe Fireworks CS5 in combination with a course from Lynda.com for this purpose but I found the solution and workflow overkill for a web application designer working on his own projects. I need something simpler.

And then there is the issue of platform support. As I have mentioned in previous posts,  I develop on Ubuntu and Mac OSX. My Windows license for CS5 would not help me on those platforms, and running additional virtual machines for the purpose simply complicated my workflow and source control.

Balsamiq looks like a great tool, and I have heard many good things about it, but it suffers from the same lack of platform support on Ubuntu and is otherwise just another tool to manage and integrate into workflow and source control.

WireframeSketcher, on the other hand, is built on Eclipse. It is available in a standalone application, but really comes into its own as a plugin into your existing Eclipse environment. WireframeSketcher, like Eclipse, is cross-platform, and works just as well on Ubuntu or Mac OSX as it does on Windows.


Working with wireframes and mockups in your IDE saves time and simplifies workflow. Without the need to switch applications I found I was using wireframes much more effectively. WireframeSketcher saves designs and mockups as individual .screen files, making them easy to manage within the same project as your source code and using the same source control.

WireframeSketcher is like other full-featured plugins for Eclipse. It provides an editor, several views and a perspective for easy switching to wireframe or mockup design.

Within those Eclipse conventions, WireframeSketcher is like many other wireframing solutions: you drag widgets from a palette onto your canvas. A properties panel allows fine-grained control and configuration. Clickable links can be defined between screens, and boilerplate or common layout can be defined in master screens that is reused across other mockups. These features make WireframeSketcher both easy to use and the equal of other wireframe tools in all the ways that matter to me.

Apart from the benefits from these features and that the integration with Eclipse provides, I will mention three features that surprised and impressed me: Firstly, not only can wireframes be exported to PDF, PNG and to the clipboard, this export can be done as a batch operation. Secondly, Wireframe styles and controls text and data tables using a powerful text markup language that provides a lot of flexibility. Thirdly, the plugin has been remarkably solid and well behaved, unlike many other Eclipses plugins I have tried. It feels polished and refined.

Which is not to say that WireframeSketcher could not be improved. The widget palette could be categorized and easier to navigate. Using the tool is quick, but I think the time spent trying to find a particular widget in the palette could be reduced. WireframeSketcher does not have as many out-of-the-box widgets in the palette as some other tools, although this has not caused me an issue yet. Lastly, the assets functionality, which complements the standard palette with images and master screens of your own, could be improved. Assets require a specifically named and located folder in your project structure. Personally I would prefer a customizable location  for these assets to suit the variety of ways Eclipse may be used. Reuse of assets between projects is not addressed.

I should be clear, however, that these criticisms are relatively minor and have not prevented me from using WireframeSketcher effectively.

WireframeSketcher is an excellent mockup and wireframe tool, and I definitely recommend giving it a try, especially if you live inside the Eclipse IDE. For those of us that need to both design and develop applications the integrated nature of the plugin both enhances your productivity and simplifies workflow. In case I have not been clear, I really like WireframeSketcher!

I would like to thank Peter again for introducing me to WireframeSketcher and providing a free license key, and I hope this blog post plays a part in providing more exposure to his excellent tool.

1 comment:

  1. Ben, thank you for you review!

    The palette does have categories but they are hidden away at the right of the search field. It's not obvious so if anyone can propose a better solution I am all ears! I've tried an accordion control before but that was not ideal.

    I agree that the assets functionality needs improvement and this is what I am working on right now. Making the folder location customizable and adding global assets is on my list. I also plan to make the integration of stencils (like iPhone and Android) much easier.

    ReplyDelete