Eclipse Search

Loading

Feb 25, 2009

WireframeSketcher - Review and free licenses

A picture is worth of 1000 words. That is why I have a habit of creating mockups/prototypes of UI before creating the real ones. There are umpteen number of tools available in the market, but I'm comfortable with plain old paper & pencil. Mostly because I don't need complex tools and partly because if I convert the price from Dollars to Rupees it would leave a bug hole in my wallet. Add to that I use Mac (my personal laptop), Windows (my official laptop) and Linux (my spare desktop). It is hard for me to find a simple tool that would work on all OS and still available for a cheaper price. To end my worries, here is WireframeSketcher.

Its an Eclipse plugin, so it works perfectly on all the platforms. Lets talk about simplicity.
The tool is as simple as it gets. The editor works on a .screen file, which can be kept under any project. In the editor, you have a drawing canvas and a palette with the most commonly used UI widgets. Drag and drop the elements you need from the palette to the canvas. You can group elements, adjust the Z-Order, move or resize them. Sounds like a perfect fit for me. Here is a screen shot of the product in action:

WireframeSketcher
I usually create the mockup and then create the actual UI. For a change, I tried creating a mockup of the existing UI. The mimicked picture:
WireframeSketcher

Thats a pretty rough sketch. But creating the above took me less than 5 mins! I can spend a little more time and make it look more like the original picture, but I think this conveys the message. I wish it supports more options like generating SWT/Swing code from the mock up. How cool that would be? Awesome, but that would would deviate from its mail goal - creating mockups. I think it will compromise on the simplicity as well.

I wish I could write more about this tool, but honestly there is nothing like you working on this. You don't have to go thru a a big manual. Just create a new .screen file and start using it. Period.

Overall, its a neat and simple tool that helps you to create mockups. If you are looking for a such a tool to prototype the UI and explain it to the customer/boss and willing to live with minor nuances, then this tool is for you. If you are looking for more advanced one with complete control over the UI, you have to look elsewhere.

Now lets come to the last part - cost of it. Right now there is no commercial version available. Evaluation licenses are available to play around with the tool. If you want a full free license, here is a chance exclusively for the readers of this blog.

All you have to do is to post a comment answering this simple question: "What are the pros of UI prototyping?". Remember to enter your comment on or before March 3rd, 2009 and your comment should have your name and email id. Peter will be selecting 5 random answers and will be giving out licenses to them.

(In case you don't want to expose your email id in public, just leave the comment and send your name & email id to my email id: grprakash@gmail.com)

19 comments:

  1. Just for completeness, this is very similar to Balsamiq Mockups.

    Rich
    ReplyDelete
  2. The biggest pro to me is that you can often radically rework the UI once you realize that there is a simpler way of doing something. Sometimes you sit down with one preconceived way of doing something but when you stare at it on the screen you see that it's too clunky to be workable. Just having the ability to play around with different approaches can save a lot of dead ends.
    ReplyDelete
  3. Rich,

    I know about Balsamiq Mockups and it's a good product. Hopefully there are enough differentiators to make WireframeSketcher stand out on its own. From the top of my head:
    * It's part of your IDE
    * The UI is more responsive
    * There is an Outline view
    * It works on Linux be it 32 or 64 bits distribution.

    There are other things I plan to add in the future that will benefit greatly from the fact that WireframeSketcher is an Eclipse plug-in.


    Peter.
    ReplyDelete
  4. biggest pro - to me it's the fact that you can sell your ideas/development much easier with mockups. It gives your "clients" a better idea of what you are going to come up with in the end - and by that helps to prevent big missunderstandings...

    that it helps yourself to evolve ideas is a big pro too!
    ReplyDelete
  5. They say that a picture is worth a thousand words. With UI prototyping I can have that picture quickly before I will actually write that thousand words to make it work. Having a prototype I can add, delete and move things around without going through a write-compile-run cycle each time. I can change things in a matter of seconds. I can test different user scenarios and discover design flaws at an early stage of development and then correct them at a next to zero cost. And when I'm happy with the prototype I can show it to my colleague, my boss or my friend without them having to run any code. Finally I could probably even make it a part of a documentation (at least an early version of it).
    ReplyDelete
  6. For fun, time saving, communication, and easy to modify.

    Sung-Ahn, Kim (ccoroom @ gmail.com)
    ReplyDelete
  7. biggest pro for me, is the vision customers get of the final product, but don't decide the gui(swing/swt/html/..) you will take. You couldn't do the same with a gui builder like Matisse, because the effort is too big to change the picture after every discussion with the customer. It's also to swing/swt/whatever based, so you couldn't change without making the customer confused.
    An other pro is the the possibility to "paint" a gui with your customer, because it's fast and easy!

    schindler.markus @ googlemail.com
    ReplyDelete
  8. UI prototyping for me is a possibility create and show to possible UI solutions to customer before implementing it in real application. When I got basic requirements from customer, I can create some prototypes according them and this prototypes show details and unclear requirements. As result I can communicate with customer and propose possible solutions to him before start implementation.
    All development iterations become clearer to each other. I don’t need replace UI implementation after showing next iteration build such as everything was resolved before implementation.


    Siarhei Berdachuk
    berdachuk @ tut.by
    ReplyDelete
  9. Very nice tool Peter - and thanks to Prakash for popularize it :)

    I always work in small teams with agile processes, like extreme programming or scrum. That's why you have to communicate a lot - also with the customer, not only on milestones. So I see a great advantage of those mockups in direct discussion and development with the customer. You can be in the customer's place and can develop the UI prototype in collaboration with him. You are independent of selecting any layouts or so, you just "draw" the UI and the customer can directly specify how it should look like. So the acceptance of the customer rises because he feels like being directly involved in the process. Besides it saves time because you only have to reify the mockup after the customer-session and that's it.

    It seems to be a great tool.

    greets
    Jan
    ReplyDelete
  10. UI Prototyping is a very effective tool for client communication discussion use cases. It is easy to establish a common baseline on the necessary ui elements without getting distracted about colors, forms or stuff.
    We use wireframesketcher for our current client and he is quite fascinated about the effectiveness of this simple tool.

    UI Prototyping is a very good tool to discuss with your clients and also to get a sense for necessary stuff on each screen. And i think on such a basic level communication with designers and usability experts is still possible without having too much overlap in the fields of expertise. Our clients love the process. And we love them.
    ReplyDelete
  11. Great comments everyone! Some of you did not leave any contact information. Please contact me or Prakash with your email address. I'll wait a bit before selecting the winners.
    ReplyDelete
  12. It's time to select the winners. Thanks to this little online random generator the winners are:

    * bmetz
    * Michał Tkacz
    * Anonymous (schindler.markus)
    * Siarhei Berdachuk
    * janreimone

    I will follow up shortly with your key. Happy wireframing and stay tuned for plugin updates!
    ReplyDelete
  13. Congrats winners and a big thanks to Peter
    ReplyDelete
  14. thanks Peter and Prakash
    ReplyDelete
  15. Good articles and thanks for sharing! But it's so weird that you blog is in a mess through my new Firefox. I dont think it's my explore problem? Beacuse it's pretty normal when visit other websites.Cool, i am impressed with the views there, it is really a good idea to visit UK to enjoy our holiday!
    By Jordans 5
    ReplyDelete
  16. @herana,
    I appreciate your input on the page layout. I'm using Firefox as my default browser and it looks ok in my system. I quickly verified this using Adobe's BrowserLab, and it looks OK in all the browsers I've tested. Probably some plugin that you had might have changed the layout.
    ReplyDelete
  17. I've just written a review of wireframesketcher after using the product for over a month. I have found it to be a very reliable addin for Eclipse and a great tool, especially when used with the SVN Plugin. Read more here http://bit.ly/wireframesketcher
    ReplyDelete