Originally posted at the Capital Thought blog
UI brainstorming and design can be incredibly intimidating, especially if you are like me, and don’t have an artistic bone in your body. A lot of software for UI design makes that process even worse for a novice, because of how powerful and complex they are. Thankfully, I came across Balsamiq some time ago and I have been using it here at Capital Thought and love it (and I even look forward to doing UI design)!
Now, I want to give you an idea of how easy it is to use and some of the really cool stuff that it enables you do to with minimal training, and no trouble. I am going to walk you thorough how we might create the design for a blog.
First step, we know we want to make a tabbed interface; Balsamiq has a built-in element in their library for exactly this, and it dynamically lets me generate and rename the tabs. That makes the process incredibly easy.
The next step is to create some content for at least one other tab. For that, all I need to do is clone the existing mockup into a new one and change the active tab. Simply right click on the mockup name at the bottom and select Clone As A New Mockup.
Once that’s done, to change the active tab, you need to use the one part of Balsamiq that I don’t like – their element properties dialog. It is some sort of transparent dialog that you have to hover over the element for a moment in order to get it to fade in. Sometimes, it appears to have issues appearing and you are forced to tilting your head just right to get it to appear (to be fair, I don’t know that this is Balsamiq’s fault or if it is some sort of Adobe AIR weirdness).
In this dialog, you will see controls for changing the appearance of the element and setting up links. Links will let you make elements clickable, so you can go from one mockup to another – very cool stuff.
Finally, you can demo your mockup and click through it like I did in the screencast below.
Overall, Balsamiq is a great product with only minor quirks that I look forward to using for making very quick mockups of design ideas for projects here at Capital Thought.
Disclosure: Balsamiq did give us a license for the full desktop version of Mockups in return for reviewing them. We had been using the demo version, which almost full-featured – just a nag screen every 5 minutes and a more inconvenient save system.
