Mockup your UI with Balsamiq.

As you have read in the previous post, during these days I am redesigning completely the UI of my blog. I am not a designer but I noticed that a real process of ‘design’ of a UI should be composed, at least, of two major steps.

Wireframe | Mockup and Final design.

When you work on a new UI project, the first step you have to accomplish is to design a mockup, a wireframe, of the actual layout. Usually we accomplish that using a pencil and a piece of paper. This can be a sample of what you may do:

 

Unfortunately, you can’t go to your customer and present the ‘piece of paper’ as your mockup because it doesn’t sound professional and because is not interactive …

During these months I have found various mockup software’s, more or less complex. I want to specify that a mockup software (IMHO) has to be fast, reliable and easy to use. Otherwise we are going to waste time …

Balsamiq, the perfect mockup software.

A young Swiss guy,Giacomo Peldi has invented this great mockup software, Balsamiq. It is a simple wireframe software written in Adobe AIR, so it can be used everywhere (web browser, win desktop, MAC, Linux …) and it has a nice future of exporting your mockups in PDF, XML, PNG, Flash player.

Crazy easy and crazy fast.

So if we move forward to our blog mockup, using Balsamiq we will be able to do something like this in few steps:

Navigation part:

 

Right side:

 

I can guaranty that when you are going to have a meeting in your company or to your customer it’s very easy and fast to present a mockup sketch that will be interactive (maybe using PowerPoint and annotations) like the one you can create with Balsamiq. Accomplish the same using Photoshop will take a lot of more time and it won’t be necessary for the first approach with the final user.

If you want to give it a shot go to their web site. You can use the trial version online or on your client PC. Trust me you will be very impressed!

Other mockup software you may be interested in.

Balsamiq is not the only mockup software available, but in my opinion is the fastest to learn and to use. Anyway, because I have to be a democratic blogger, this is a list of alternative mockup software you may try:

  • Blend Sketchflow: this is the microsoft mockup software. Very powerful but also very complex to learn.
  • Creately mockup: this company has created a great online product but it lacks in usability, in my opinion there are too many steps to do something. The good side is that it doesn’t mockup only the UI part.
  • Pencil
  • Mockup screen, really well done
    http://www.mockupscreens.com/
  • Smartdraw, they gave me a free license and it’s a great product
    http://www.smartdraw.com
  • ForeUI, more complex but with a Skin function. Very interesting
    http://www.foreui.com

Feel free to try them and let me know what you think about it!

Leave a comment

Your email address will not be published. Required fields are marked *