You should be using Balsamiq Mockups

I’ve heard many people rave about Balsamiq Mockups, an Adobe AIR app that helps design user interfaces, but until today I had never looked into using it myself.  Like many developers, I don’t mind opening up my IDE to build a prototype and us that to tweak my user interface from.  I felt that I was saving time, since the prototype was the same codebase that would become the app I was getting my design time for free.

That’s a common mind set, but it’s the wrong one.  You’re not saving time and instead spending more time because the tool isn’t the right one for the job.  Instead of focusing on the user interface you deal with getting the CSS property correct, or the font setting right on the WinForms control.  Even Blend, a tool for creating UI, clouds up your process by distracting you with color options and drop shadow effects.  It gets worse; since it takes so much effort to get something to look the way you imagined in these tool, you won’t change everything to fix a problem.  You accept a subpar user interface and the app suffers.

Today I tried, ranted against, and rejected Seesmic Desktop, the latest twitter client.  Like all twitter clients I’ve tried, it was very proud of it’s UI – to the point it was in the way.  I might be a minority, but I use twitter website almost exclusively, and don’t want a client taking up half a monitor.  I have been thinking of writing a twitter client for me, and I’ve even given it a name: Damn Simple Twitter.  I have an idea what it would look like, so I tried out Balsamiq with a quick mockup:

image

This was a very quick mockup – as in it took me no time at all.  The Balsamiq UI is very intuitive, and I had little trouble finding what I was looking for.  The export features are nice, which include both xml and png and an export to clipboard feature for pasting mockups into emails (and blogs).  There is a full screen mode, and I can see using Balsamiq in a meeting with end users and stake holders to great effect.  Once I’ve mastered the hotkeys, I will be putting this theory to test.

Then, the real magic kicked in – looking at this crudely drawn mockup I started to see faults.  I had moved the user images out of the way of the text, but the UI still felt bulky.  I had a chat window open, and thought “what would a twitter chat client be like?”.  Quickly, I changed my mockup to reflect this, and then i started wondering how I would use this app.  How can I add a tab?  What if I want to manually refresh?  How would I setup my account?  After about 10 minutes of mad mocking, I was left with:

image

I fell pretty good about it too.  More importantly, had I created the first version in code I would have never been able to make it through all the revisions that led me to this design.  The power of right tool for the job.

I’m now using Balsamiq for a larger project at work, and finding that finalizing the user interface and scope to be much easier.  When you have all the proposed features on screen at once, it is easy to see what’s redundant and awkward.  That’s something bullet points and a text description have a hard time exposing.

I’ve given a pretty glowing review of Balsamiq, and I must disclose that I was given a free copy for review.  Actually, I wanted to check out Balsamiq, and hit up my “connections” to get me a free copy (i.e. I begged and abused my blogger status and MVP-ness).  Balsamiq has a free trial version and is currently $75 to unlock the full version.  I don’t have any negatives, but I do have some things I’d like to see added in a future version:

  • Currently you can only save a mockup individually; I’d like to save and load a set of mockups
  • The current method of a “master template” is really just creating a background image and loading that for all mockups – real templates would be nice, similar to slide masters in PowerPoint
  • When viewing a mockup in full screen mode, page up / page down should cycle through the open mockups – this would be nice in a meeting / review setting, to move through each screen of the app while explaining the user story

Posted 04-08-2009 10:50 PM by Michael C. Neel
Filed under: , ,

[Advertisement]

Comments

Parag Mehta wrote re: You should be using Balsamiq Mockups
on 04-09-2009 12:41 AM

Is Devlicio.us turning to promotion showcase??

Michael C. Neel wrote re: You should be using Balsamiq Mockups
on 04-09-2009 9:22 AM

Yep, you caught us!  That's why all the posts for the last two months have been only about commercial products.

Devlicio.us, the finest in quality AstroTurf...

Jak Charlton wrote re: You should be using Balsamiq Mockups
on 04-09-2009 9:29 AM

LOL Michael

As someone who has also blogged about how useful Balsamiq is, and who has also received a free copy ... I'll chime in.

As bloggers on devlicio.us we get free software ... that list in the bottom right of your screen as it happens. It also happens that most of us own licences for a lot of that software already.

But, better still - before Brendan accepts new partners for the sites, we get a discussion - and if anyone objects, Brendan is smart enough to realise it may not be a good fit. So if you like, the partner companies listed are already very well vetted.

Beyond that - we are also free to critique software we don't like (though mostly our energies go into promoting that which we think adds value), and you are free to ignore any mini-reviews we may do.

And last of all - seriously Balsamiq not only rocks ... but you can use it on the web for free pretty much ... so you have nothing to lose. If it saves you 30 minutes of time in mocking up a page, it paid for itself.

Tuna Toksoz wrote re: You should be using Balsamiq Mockups
on 04-09-2009 12:02 PM

Ha? Which posts are on commercial products? People here are trying to share their knowledge. We promote good tools, no matter if it is commercial or not, NH is free while balsamic is semi-free. If they fit the job, we even pay for them. As an opensource committer, I do like to receive free licenses from commercial thing and it is the freedom of speech if we talk about that tool.

For this particular case, Michael show how useful a mockup thingy can be, if there is a free alternative of balsamicwe will give it a shot and if we like, we will be writing about it too. Having free license from them wouldn't prevent us from writing it.

And I am impressed by the way you read blog posts, is that really the only thing you see on that post?

Parag Mehta wrote re: You should be using Balsamiq Mockups
on 04-12-2009 11:14 PM

There are lot of alternatives to Balasmiq, some of them even free...

I have no problem with Product review, but when similar free alternatives are available as a Open Source community you should see it.

Free version to bloggers, that's interesting!!!

@Tuna : No, I do see value in the post, but to be honest, if I signup with Balasmiq, it's so easy I can get that without any problem! I don't see it requiring a post.

Jak Charlton wrote re: You should be using Balsamiq Mockups
on 04-18-2009 5:48 AM

>>There are lot of alternatives to Balasmiq, some of them even free...<<

Care to name any? I can't think of any at all ...

Tuna Toksoz wrote re: You should be using Balsamiq Mockups
on 04-21-2009 12:12 PM

@Parag Mehta

Please let us know about it. I personally prefer free ones and like to talk about those projects if they are good enough(doesn't have to be as good as Balsamiq).

Shayne MICCHIA wrote re: You should be using Balsamiq Mockups
on 05-18-2009 4:03 AM

Balsamiq is a great product, another very similar (in that is supports the hand-drawn look) is www.iPlotz.com, also an AIR app.

I currently prefer iPlotz for its better project management and navigation, but am about to buy both as I expect they will go on leapfrogging each other every other week.

Balsamiq have a entry taking feedback on GetSatisfaction

getsatisfaction.com/balsamiq)

iPlotz have a great Rails-like Forum here

http://iplotz.com/forum/

Another decent product is MockupScreens

http://www.mockupscreens.com/

which runs as a native win app and has good navigation and export/reporting facilities, however it has no pencil/sketch look, just a plain/no color ,win style and a web style mode.

All three are worth a good look

Shayne Micchia

Shayne Micchia wrote re: You should be using Balsamiq Mockups
on 07-08-2009 6:48 AM

Further to my last comment on 05-18-2009 4:03 AM

I have fund and am now using a better (for us) product, its called FlairBuilder.com and its GREAT.?

It does what the other do (and as fast) except it goes further (if you want to) - as  its creates interactive mockups that actually run ie. the control are all real controls.

Its doesnt have a "sketchy" look but it being added as we speak, so then it will offer that appealing "not ready" look for managers :-)

See my comment with the (sole Romanian) developer here

getsatisfaction.com/.../pencil_sketch_styles_as_used_by_balsamiq_and_iplotz

I have NO AFFICLIATION with any of these products AT ALL - just a developer looking for the best tools

Comment welcome :-)

About The CodeBetter.Com Blog Network
CodeBetter.Com FAQ

Our Mission

Advertisers should contact Brendan

Subscribe
Google Reader or Homepage

del.icio.us CodeBetter.com Latest Items
Add to My Yahoo!
Subscribe with Bloglines
Subscribe in NewsGator Online
Subscribe with myFeedster
Add to My AOL
Furl CodeBetter.com Latest Items
Subscribe in Rojo

Member Projects
DimeCasts.Net - Derik Whittaker

Friends of Devlicio.us
Red-Gate Tools For SQL and .NET

NDepend

SlickEdit
 
SmartInspect .NET Logging
NGEDIT: ViEmu and Codekana
LiteAccounting.Com
DevExpress
Fixx
NHibernate Profiler
Unfuddle
Balsamiq Mockups
Scrumy
JetBrains - ReSharper
Umbraco
NServiceBus
RavenDb
Web Sequence Diagrams
Ducksboard<-- NEW Friend!

 



Site Copyright © 2007 CodeBetter.Com
Content Copyright Individual Bloggers

 

Community Server (Commercial Edition)