Wireframing with Balsamiq Mockups

Tags: wireframing, balsamiq mockups

Wireframing is an indispensable part of web designing. Yet no successful tool has been discovered so far, to make the process of Wireframing successful.

People stick on to tools like Fireworks, Illustrator, and Photoshop, even now, as they are cheaper and highly user-friendly.  Certain groups of designers use hand-drawn wireframes, often referred as the most apt ones.  Dab a pen and paper and impress your clients, says expert designers!

However a few information architects and UX designers prefer certain specialized Wireframing tools like iRise (http://www.irise.com/) and Axure(http://www.axure.com/).

These tools help in setting better goals, where you can aim at producing efficiently ‘working prototypes’ than‘static linked graphics’. Undeniably powerful, but they have a price tag that that may discourage certain designers. So here is another special Wireframing tool, Balsamiq Mockups (http://www.balsamiq.com/products/mockups). This is relatively simple and reasonably priced.

Before giving a broader description, here are some basic things to know about Balsamiq Mockups

One of the promising categories among the Adobe Air applications, Balsamiq is a highly user-friendly application. The live demo that you get from the site is extremely helpful to know about the application and its use in detail. Balsamiq is a  cross-platform application.

Need a better idea?

A Balsamiq interface usually comprises of three main sections
• An application Bar: Get a set range of cut, paste, and copy controls here
• A UI (User Interface) Library: Drag and drop collection of common interface widgets.
• A Mockup Canvas: Here is your working space

To start with

To build a good Wireframe using Balsamiq is very simple. You just need to drag the required UI widgets from the gallery, onto your workspace. Every element is in the gallery is permanently changeable, editable, as well as resizable. The UI Gallery of Balsamiq contains about 70+ preset widgets including:

• text fields
• form elements
• tab menus
• scroll bars
• image placeholders
• common icons
• charts and graphs
• browser chrome
• iPhone UI elements

This list covers all the major day-to-day needs.

Once you reach the layout, click on the needed UI widget to launch its edit panel which allows the users to change the properties of the elements.

Users can edit the contents directly, by double clicking on the corresponding elements. It’s easy to add new menu items, like adding value to a CSV list.

What if a user needs a ‘non-standard/weird element/widget’ which is not there in the list?

He can use the built-in image widget option.

The image widget has a square placeholder graphic, by default.  Users are free to load any third-party image into these placeholders. An automatically convert an image to grayscale is also offered.

A facility to create and load your own widgets will help users to wireframe any necessary layout using this tool.

To know more about Balsamiq Mockups click http://www.youtube.com/watch?v=zLysy3IPfFI

Comments and Feedback

Post your Comment

Type your comment here*


Verification Code Image

Back to Main Top of Page