Saturday, 17 October 2009

UI mockups - nice and easy

I write code. Sometimes it will be a short script, sometimes a web app, next day it can be something with more
traditional user interface but designing user interfaces is my worst nightmare. I can plan the whole app, write and test the code, but when it comes to UI design I just want to run away - it is simply not my game.

Usually when everything is
finally ready (or so I think) somebody comes and says 'Oh! By the way - if you moved this part here, it would be better - easier to use' and quite often they
are right, so I've started asking my potential users how they want it done before I actually create it at all, but for that I need simple drawings that would explain my idea - something they can look at and say if they like it or not. Preparing several sketches takes time, modifying them takes even more... but there is a tool that helps.

A humble screen shot is worth more than a thousand words...


As simple as that - prototype of simple blog layout in less than 10 minutes using Balsamiq Mockups for Desktop (demo version). Simple, nice to use, very effective!

Normally I wouldn't write about 'software' (especially commercial), but there is something special about this one....



First of all the main use of this program is to do mockups of user interfaces - be it web apps (which for me is yet another form of UI), iPhone apps, dialog windows or anything else. Sometimes all you really need is simple wire frame to show what will be where - rough cut to present the idea - and using pen and paper is simply too... boring and ineffective, especially when you want to discuss your ideas, then possibly change it a bit and discuss again. Here comes in Balsamiq Mockups for Desktop.

Mockups for Desktop runs as Adobe Air application so it's cross-platform. The interface is very intuitive and easy to work with, so you can't get it wrong. You can get first mockups ready literally in minutes after you start the application for the first time ever - modeling my other blog layout idea took me just 3 minutes. It is very simple - just drag the element from the UI library to the main drawing area and put it in the right place. Editing objects comes as natural thing - I guess even a child could do it :-)

I won't be telling you how to use it - go figure it out yourself and have fun as I did :-) Wow! I think that was the first time ever I had a smile on my face when trying to work on the user interface side of things. I think it's a really good piece of software and honest 'well done' to the guys at Balsamiq.

BTW. Irek, thanks for bringing it to my attention ;-)