Balsamiq Mockups - it Roqs (Web Prototyping Software)

Recently I heard about a piece of software for creating mockups for web apps. After a brief read of the features and nature to the tool it sounded almost too good to be true.

Striking the prototyping balance...
For many years, I have tried virtually every type of prototyping method for web page design.  Each has its own dedicated following (fanboys), advantages and disadvantages.


Examples of prototyping methods used previously

Method	Description	Advantages	Disadvantages
Pencil & Paper	Just as it sounds, sketch it out on a pad of paper.  Other variations include cutting and pasting paper to show interaction	Focused on ideas and functionality (if done with layers) Anyone can have input Less pride of ownership Can do it anywhere more info	Very tedius (especially if you have little to no drawing skills) No scale to duplicating elements
PowerPoint / Visio	Create a background image and start building on top of it with boxes / cut screenshots	Easy to duplicate elements Can show animation (PPT) On most desktops more info	Animation is very tedius Stuck with 1 page size (for all intensive purposes this is the case)
Photoshop	Use the industry standard image softwrare to build your comps	Powerful use of layers Easy to duplicate elements Lots of tools and templates available more info	Not always available Expensive Not easy for a novice Often focuses on "sexiness" instead of usability Animation not easy more info
Fireworks	Similar to Photoshop (and Illustrator) but handles reuse and "animation" better	Powerful use of layers Easy to duplicate elements Good animation tools more info	Not always available Expensive Not easy for a novice Often focuses on "sexiness" instead of usability
Dreamweaver	Use the most popular WYSIWYG tool to write HTML	WYSIWYG click and add elements Quick edits (small changes) Templates more info	Not always available Expensive Not easy for a novice Bad tradeoffs in having semi hi fidelity and inability to reach quickly to big changes (CSS can be a pain)
Straight HTML/jQuery	Grab your favorite Text Editor / IDE and start coding.	Closest approximation to the final product Adds real interactivity Forces designer to think of practicality jQuery adds lots of powerful tools to speed up layout and functionality more info	Strong technical knowledge needed Hard to react quickly / in real time to radical changes Often focuses on "cool factor" instead of usability

And then came Balsamiq Mockups...perhaps the perfect balance

Balsamiq Mockups (BM from now on) is from a micro-ISV called Balsamiq.  The founder is a former Adobe employee who decided to head out on his own and moved back to his home country of Italy to focus on the company.

The product's objective is to give you most of the advantages of Paper Prototyping but with the added value that comes from being digital (quick repetition and duplication, capture state easily, collaboration across long distance, etc...).

The interface is simple and the usability is very high.  Although it is a young product from a young company, the software so far has worked fairly reliably.

Every element acts a lot like a visio element.  They can be resized (I really like the autosize feature), grouped, layered, duplicated, etc... There are a minimal set of properties that many controls have to adjust background color, to add a real image (the sketch it feature is helpful to not lose site of the mockup's purpose), or adjust font sizes (this last feature is limited and something I suggest improving below).

Since I installed the application (it is Adobe AIR based) a couple of days ago, I have used it to mockup some important page changes that we are considering.  It is amazing how fast I was able to whip up the new design ideas using this tool.  Most recently, I have been doing these mockups using a combination of Firebug, Firefox, jQuery, and SnagIt.  For small changes I will continue to use these tools, but Balsamic Mockups was much easier and quicker for me to sketch up big changes to the pages, especially when it came to layout.

Examples of mockups from Balsamiq (I cannot show my mockups due to our corporate policy e.g. trade secrets)

  

 

What is still needed for the software right away:

• Zoom - You cannot zoom in or out of the page.  Needed, especially for us without fancy monitors (or on noteboooks)
• Adjust font size & style for all (or most) controls - font size and styles can only be changed in certain types of text controls but not all (ej, lists, some  text, etc...)
• Personal Library for Custom controls - Lets say that you created an image using an asset from your site.  You should have a simple way to add this to the collection for use in other prototypes.
• Naming Exported PNGs - you can export mockups at any point to a PNG file, but you are never given an option to name the PNG file.

Other items to add in the future...

• Interactivity - add clickable links to navegate between mockups (or PNGs), perhaps add common effect features (slide, fade, lightbox)
• Integration with other services - Balsamiq will focus on creating plugins and small opps for the web office.  It would be great to be able to export mockups or PNGs to photo sharing services like Picasa or collaboration sites like Basecamp.

Conclusion - it Roqs!
I love this software.  Looking over the blog posts, there seems to be a healthy rate of updates to the software, so I can only expect the features to become richer over time.  You can see on their site that they already have a fairly large following.  They can happily add one more (and any one else that I can convince) to that list of happy users.

You can try it using their online trial (benefit of being AIR based) although it is time-limited.