Wireframe Options

Recently I became involved in Ubuntu Friendly and one of the tools I wanted was a wireframe application so I could make quick mockups moving forward. I learned about several options:

  • Pencil – Pencil is built for the purpose of providing a free and open-source GUI prototyping tool that people can easily install and use to create mockups in popular desktop platforms.
  • Wireframe Sketcher – WireframeSketcher is a wireframing tool that helps designers, developers and product managers quickly create wireframes, mockups and prototypes for desktop, web and mobile applications. It’s a desktop app and a plug-in for any Eclipse IDE.
  • Balsamiq – Using Mockups feels like drawing, but because it’s digital, you can tweak and rearrange easily. Teams can come up with a design and iterate over it in real-time in the course of a meeting.

I eliminated Balsamiq because it requires Adobe Air (which is no longer being developed for Linux).

Pencil:
I found working with Pencil very easy to create the mockup of Ubuntu Friendly. Pencil included resources for Windows, Android, iOS and Web Applications. The drawing produced is very clear and does not simulate being drawn by hand. I had one rather important issue with Pencil; it would not export the mockup as a .png. The dialog box would come up and you would take the steps to save a file, but no file was actually saved. When making a .pdf file the table resource was not rendered.

Screenshot from 2013-02-03 12:50:43

Wireframe Sketcher:
Working with Wireframe Sketcher was not quite as easy as Pencil, nor were there as many built-in resources. The program had no tool to create a table. The resulting sketches simulate being drawn by hand and the program was able to export .png files. This software is also not free and will cost roughly $100.

uf-wireframe

In the end Wireframe Sketcher is the winner as it is able to create functional mockups without requiring Adobe Air or Java and was able to successfully save .png versions. An added feature, that I will not make use of, is that it works with Ecplipse IDE as well. If you are comfortable with Eclipse, or even Visual Studio, the application will be comfortable immediately.

wireframe-sketcher

The IDE style allows you to build an application with multiple screens and even have the screens be interactive. All the other mockup programs I tried lacked this depth. The program even allows for custom made svg images to be used as additional shapes or icons.

If you are an Ubuntu User like I am you can find it in the Ubuntu Software Center.

Screenshot from 2013-02-03 17:01:12

About these ads

10 Responses to Wireframe Options

  1. Thanks for mentioning WireframeSketcher. It does have a Table widget, just search for it in the palette. Some extra stencils are available from Mockups Gallery (http://wireframesketcher.com/mockups).

    Also note that version in Ubuntu Software Centre lags behind a little, so if you want the latest and the greatest then just get the deb package from our website.

  2. nobody says:

    Hey, too bad making freesoftware with unfree tools.

    I recommend to use “Qt Creator”, which can be used to make functional tools, as well as mockups. Its fast to learn, and your mockups are afterwards useable as the basic for the gui part of your programm with many languages, for example c++ or python.

  3. MarkC says:

    Pencil does have a set of “sketchy” widgets included in the palettes on the left, if you want that effect. Unfortunately I’ve found Pencil to be slow and a bit buggy – but other people seem to have more luck with it than me.

    As for the specific issue of exporting a PNG image, taking a screenshot and cropping might have been an option to get round that issue, though it is just a hacky workaround, not a real solution to the problem.

  4. datatec says:

    Are you sure Balsamic requires air? when I went to the download section. http://http://www.balsamiq.com/download it had a .air download, a .exe a .dmg and 32/64 bit .deb downloads. I used the 64 .deb for ubuntu and everything worked well. On the back end perhaps it bundles air as a dependency but I wouldn’t be able able to say since I use some air apps for work already. If it does or doesn’t use air on ubuntu not sure, but works as well as the windows version I used to use.

  5. Greg Melicerte says:

    Do you know you can get rid of the sketchy feeling in wireframesketcher?
    Menu Window> Preferences > WireframeSketcher > Theme > Clean.
    Save and voila !

  6. Kenny Schiff says:

    Turns out that there’s a bug in 2.03 Pencil that is removed if you go back one revision… this version handles .png export with no problem: https://code.google.com/p/evoluspencil/downloads/detail?name=evoluspencil_2.0.2_amd64.deb&can=2&q=

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 35 other followers

%d bloggers like this: