SUBERAPPS

Intuitive Wireframing With Balsamiq Mockups

Today I am going to talk about an AIR app. If you think all AIR apps are resource hungry and memory hogging, wait till you try this out.

If you’re a web designer, you’ll understand that wireframing is an important step in your designing process. It’s important to layout the design in it’s raw skeleton form so that you know for sure where to put what and what goes where. Having a wireframe ready before heading to Photoshop or other graphics editing app will also help you speed up your design process because you don’t have to think about layout anymore while only concentrating on your creativity.

I have tried many wireframing tools, the most crucial feature I’m always looking out for is keyboard shortcuts. Keyboard shortcuts really aids me in the speed of generating a wireframe, for instance if I want to select all components in a wireframe, the shortcut key that’s already in my muscle brain is Cmd/Ctrl A. Without the keyboard shortcut I would have to select ALL components one by one which is a pain! You get the idea.

Balsamiq Mockups

Balsamiq is one of those wireframing tool that really works. Don’t be deceived by the raw design generated from the tool, it is on purpose. The low fidelity look encourages honest feedback, everything looks hand drawn, sketchy and looks like a “Mockup”. They don’t call it mockups because it’s a finished design. That’s another story altogether.

Just after a few minutes of use, I can feel the developers’ considerate thought process in the app. The app is snappy, the controls like the resize handle hides themselves when you don’t need them, the properties box lowers it’s opacity until you rollover them. The built in guides lets you snap objects to them so that you can align UI components without using your eyes. These are not big features but little things that differentiates annoyance from being a breeze to use.

Adding Components

You can either drag the UI (user interface) components out of the library, or an even faster way is by typing the UI component you want in the UI search box. Once the UI component you want is found, just hit enter. The UI component is added to your wireframe waiting for you to manipulate. We’re talking about speed here. :)

Editing Properties

Each UI component comes with its properties box where you can edit the component by cutting, copying, grouping, deleting, bringing to front or back etc. If you’re a keyboard shortcuts lover, Balsamiq have them built in and they work either on a Mac or PC.

Keyboard Shortcuts

Need I say more? If you’re familiar with Photoshop’s keyboard shortcuts, you’ll get up to speed very quickly with Balsamiq. One other thing to note is that unlike other wireframing tools I’ve used, I am happy to say that Balsamiq Mockups’ keyboard shortcuts works on a Mac.

Exporting

How useful is your wireframe if you can’t bring it out of the app?

Balsamiq gives you a couple of options for exporting like exporting to PNG and most recently, PDF format!

You can even export to clipboard after which you can paste the mockup image anywhere!

Offline & Soon To Be Online

Let’s just say you’re working on a plane, or in some deserted island, Balsamiq lets you work on airplane mode!

Need collaboration with your clients or co-workers? Balsamiq will be shipping a web version soon with collaboration features. Check out the web demo!

Conclusion

I highly recommend web designers to use wireframing tools before the actual design process. Choose a good tool, I have tested Balsamiq together with other apps and I can vouch that Balsamiq is the most speedy of them all!

At $79, Balsamiq is a great tool that you can keep forever.

If you want to learn more, check out the screencast embedded below:

Air Apps