Getting Started with Wireframing using Balsamiq

Wireframing can ideally be defined as an activity to visualize the layout of a screen. There are many wireframing tools present in the market today, but the easiest and the most widely used is Balsamiq – our topic for today. But, before that, let’s first understand why do we need to wireframe?
When it comes to software development, it’s vital to know how the final product will look, even before the development starts. This initial visualization of the product serves as a guideline for all the stakeholders plus helps in avoiding any ambiguity that might arise in the future.
In older days, paragraphs of texts were used to elicit the software requirements.

However, these chunks of text were not enough to get the visualization going – as each person reading the requirements would visualize it in some way that might be different from the rest. This ambiguity leads to a lot of mix-up and results in wasted time, money, and efforts. To help the cause, wireframing comes into the picture. Owing to the ease it brings to the overall development process.

In this article, we’ll help you understand questions like:

•  What is Balsamiq?
• How to get started with it?
• How to export the final wireframe/mockup?

What is Balsamiq?

Wireframing, in all essence, can be carried out on a napkin using a pen. At the end of the day, it’s just a sketch after all. However, when it comes to collaborating and sharing it with professionals, it’s a better idea to switch to one of the many tools present in the market today. One such tool is Balsamiq – it is straightforward to use and provides lots features to build a useful wireframe.
Balsamiq is an excellent tool and fulfils all the requirements of wireframing and collaboration. It has a unique set of features that enable you to do rapid wireframing, get real-time feedbacks, incorporate those feedbacks, and improve the wireframe. This eventually gets the whole team aligned with the functionality of the application regarding the layout.
With Balsamiq, collaborating with remotely located team members is also a breeze as it can export wireframes in PNG or PDF formats that allows flexibility while sharing the wireframes.
10 Most Effective Wireframing Tools

Getting Started with Balsamiq

Balsamiq is available for Windows and Mac OS and can be downloaded online. Once you’ve downloaded the tool and opened  it up, you’ll see a screen like:

As shown in the above screenshot, the user interface for Balsamiq is divided into the four following parts.

• Navigator
• UI Library
• Inspector
• Wireframe space/Area

The section highlighted in red is for toggling between sections inspector and project information. The features are included in the UI library, let’s take a look at it in depth.

The UI Library

The UI library is categorized based on different screen elements.
Let us get acquainted with the different screen elements categories available in Balsamiq.

• All − Clicking on this will show you all the UI elements that Balsamiq offers. Scrolling horizontally will allow you to view or use them.
• Assets − This section includes the things you can upload and later for use in your wireframes.
• Big − This includes the reasonably bigger screen elements like placeholders, browser window, iPhone, and iPad.
• Buttons − This section includes all the button controls that you’ll need in a wireframe, like – action buttons, checkboxes, etc.
• Common − This section comprises of the shapes used to denote the most common interactions.
• Containers − It includes the options like Window, FieldSet, Browser, etc.As the name suggests, it is inclusive of the Window, FieldSet, Browsers, etc.
• Forms −  This category contains all the controls related to forms, like input elements, radio buttons, submit button, and such.
• Icons − This contains the set of icons that you can use to denote a particular operation. For instance, a floppy icon instead of the save button, etc. Balsamiq offers a huge collection of free icons that can be used for various actions.
• iOS − This contains the UI controls specific to the iOS.
• Layout − Layouts are extremely important when you need to represent a basic page/feature. This category includes most of the layouts like Vertical / Horizontal tabs, accordions, etc..
• Markup − This is used for adding a comment on a particular control in the wireframe. It also contains callouts that are used to show connectivity in many of the scenarios.
• Media − All the media-related UI controls are available in this section that helps in showing an image/video/sound in the wireframe.
• Symbols − This is a collection of reusable components which can reduce the time to create the common components.
• Text − As the name goes, this contains all the UI controls related to the text. Features like a block of text, combo box, link bar, etc., are available under this category.

The knowledge of these components coupled with the fact that Balsamiq allows you to easily drag-and-drop the components will help you create wireframes of your choice quickly, and effectively.
Which of These Product Management Tools are You Already Using?

Now, suppose for your website, you’ve created a wireframe of these four pages – Home, Products and Services, Contact us, and About us. Now, we need to perform another essential task that’ll get our wireframe look a bit more like a full-fledged website and less like a sketch. For that, we need to link our pages, as they would ideally be linked in a website. Linking also helps you go back and forth between the wireframes easily.

Linking the Pages

This step will help your wireframes appear in order – like they would on any website. To achieve this navigation, click the link bar on the top right corner.
First, let us start by connecting the Homepage to the Products and Services page:

• Go to Homepage
• Click on the link bar on the top right corner

Refer the properties pane

The green highlighted section shows the various wireframes you’ve created till now. Let us start by linking the Home page. Click on the drop down to see the list of available mockups. It’ll show a list like below:

From the dropdown list that’s displayed, select Products and Services to create a link from Home to Products and Services. Similarly, repeat the same procedure for the other pages.
The Art of Decision-Making: For Managers, Leaders & Product People

Exporting The Wireframe

The wireframe you’ve just created is of no good use if you can’t present it to your client/end user in a more common format, like PDF or PNG. For this purpose, Balsamiq allows you to easily export mockups in either of these formats.
In this example, we’re exporting our mockup in a PDF format. For this, click on the Project menu, then click on Export to PDF.
You’ll get a screen like the one shown below

Select the checkbox – “Show linking hints”.
Then, click Export to PDF. It will show a popup where you can specify a local where you want the PDF exported. The progress will be shown in a progress bar like below.

When the export is complete, there will be a confirmation box. On clicking the box, you’ll be able to view the PDF along with all the navigations you set up.
Building Minimum Viable Products – How Much is Too Much?

Wrapping Up…
There is no denying the importance of wireframing in the world of application development today. They provide many features which end up easing your overall workload – there’s absolutely no dearth of wireframing tools but Balsamiq is one of the few tools which caters your all-around requirements!

Learn Online MBA Courses from the World’s top Universities. Earn Masters, Executive PGP, or Advanced Certificate Programs to fast-track your career.