When designing a solution usually we need to show some slick and simple pictures showing user interface we plan to implement. This seems to be the only language both developers and customers seem to understand. Or maybe let me rephrase it to be more specific – screenshot has the highest likelihood that its interpretation by all parties will be similar. Preparing such images takes a long time – the most popular approaches I’ve seen so far are:
- use your favorite graphic editor – e.q. Gimp, Paint.net, Photoshop, Illustrator, etc. The result usually looks good, but is a nightmare to maintain, especially when you need big chunk of text or new large field.
- mock the UI in Word – get a ugly wire-frame of the window only to forget to group the boxes and see them flying around the document after any change
- … or Excel – Excel is good for everything, isn’t it?
- create a form in html – happy styling, call me next week when you’re done!
The process was usually time consuming, but not any more! This week I’ve seen three smart prototyping approaches:
- Balsamiq UI modeler – application to create any UI layout using drag&drop. The web-based demo (functional!) version is available
- Microsoft Visual Studio Express – free, fully drag&drop RAD environment. It seems like an overkill to use it only for this reason, but consider the price tag!
- Microsoft Visio – especially 2010 edition – nice, easy and integrated with Microsoft Office Suite
All above applications let you create both static window images and interactive UI prototypes. Next time you talk with your customer show him a “working” demo next day after you got first requirements – he will love you! And hopefully he will understand what you are actually trying to achieve.
