Balsamiq: Easy UI Mockups

posted on 12/11/08 at 08:59:55 pm by Joel Ross

About a week ago, I was finally to a point where I was ready to take on a new feature at TrackAbout on my own. Well, it was just one screen, but it was a fairly complex screen, so I was asked to come up with an idea of what I thought it should look like. In the past, I've done mock ups in the past, but before diving into the pain that is Visio, I decided to ask our team what we've used in the past.

Joey said he'd been happy with Balsamiq, so I decided to give it a look. I was immediately impressed. It was so easy to use, and much, much more intuitive than what I was used to. In less than an hour, I was able to create mock ups for my screen in 4 different states.

Then, when I needed to make updates the next day, it was as simple as importing an XML document to get back to where I was the day before. Oh yeah. Did I mention I did this all online in a browser? Yeah - no software to install and all in the browser. They have lots of controls you can use, and it's all drag and drop. They've even added keyboard shortcut support, so things like copying, pasting and selecting work just like they would in a desktop application.

Since I can't really show what I actually designed, I spent 5 minutes creating a simple mock up of - guess? - a bracket, much like we have on Tourneytopia. Here's what I came up with:

BalsamiqScreen

It's all drag and drop, and you can quickly get a realistic mockup going in very little time. It's definitely a tool I will be using in the future when I need to layout new user interfaces.

Tags: | |

Categories: Software

4 comments »


 

4 comments

Comment from: Drew [Visitor] Email · http://atcrawford.com
I've played with Balsamiq's trial version. I like how it has a hand drawn kind of look, so it is clear that it is just a mockup.

What kind of options do you have to share the mockups? Can you export it as an image or something along those lines?
12/12/08 @ 11:15
Comment from: Joel Ross [Member] Email · http://www.rosscode.com
Drew,

You can export a .png file, as well as the underlying XML. Then people can see it, or if they want to modify it, you give them the xml, and they can import it and be able to edit it.
12/12/08 @ 11:22
Comment from: rainwebs [Visitor] Email · http://blog.rainer.eschen.name
We use it on a daily basis in our project. It's intuitive, easy to use and the results are really cool:

http://blog.rainer.eschen.name/2009/02/25/balsamiq-mockup-on-air/
02/25/09 @ 14:13
Comment from: mark vernon [Visitor] Email · http://iplotz.com
Please check out iplotz.com, a web app and desktop app for creating navigable wireframes and mockups (sketch style components also), with collaboration features as well.
03/05/09 @ 02:11

Leave a comment


Your email address will not be revealed on this site.

Your URL will be displayed.
(Line breaks become <br />)
(Name, email & website)
(Allow users to contact you through a message form (your email will not be revealed.)