You really have to check out this product called Balsamiq Mockups. I have never had the design skills I wish I did so when products like this come around I get really excited. When I need to create a mockup I am really talking more about a wire frame or prototype. This is not a design mockup but more from a functional standpoint on how our project is going to function. We will spend some more time on this later but this leads into Interface driven development which I am becoming a huge fan of. This type of development is much more Agile and is starting to make a lot more sense to me.

mockups_fpa

I actually talked my boss into picking up some copies of this and everyone really loved the product. The first thing you will notice is that it is an AIR application. The interface is very user friendly and easy to drag components around. The available components are broken up into different sections and very easy to find. There is also a quick add so for those of us who hate the mouse will be happy

Another great feature of the product is being able to rapidly design prototypes using a clone feature. If you are going to use screens that are close to each other you can simply create a new prototype based on a current one. I found this to be a real time saver. Another feature allows you to dump the mockup to XML. I am not quite sure where this is going but I really hope this allows for basic html code generation later on.

So here are a couple examples of some work  I did using this wonderful tool. I was creating a mockup of an administration tool and I wanted to show the user list and user add/edit screen. While this is very basic It only took minutes and this give the client a very visual representation of the flow before any real time is spent coding. There are some really cool features of certain components as well. If you look at the button bar I have the ability to highlight the current page and in the grid a row is selected. This allows for story board / walk throughs of the application.

users

user

 

Just tonight I was trying find a quick way to produce some UML. While this tool is nowhere near some of the UML software out there this is just another example of quickly prototyping something with Balsamiq Mockups.

Employee