Welcome to Balsamiq Prototyping. It is a pleasure having you along for this practical exploration of Balsamiq Mockups. During the course of this book, we are going to explore everything there is to know about this wonderfully simple, yet powerful application; from understanding the application's interface, building a functional and professional wireframe, and finishing with a basic, clickable prototype to show off as part of your professional wireframe portfolio.
In fact, by the time you finish with this book, you will have become an expert in using Balsamiq and you will be able to express your ideas to their fullest and most professionally.
We will begin with the basics of the application and then move on to building a real-world wireframe project. As you progress through each chapter, you will also build upon what you have learned in the previous chapters. Finally, we will review and leave you with tips and resources to take your newly acquired skills to the next level.
In this chapter, we will cover the following:
What is Balsamiq?
Installing Balsamiq
The application
Let's dive right in!
To understand Balsamiq is to understand wireframing. Wireframing is, of course, the sketching out of ideas for a product or web interface in skeletal form, depicting at a high level what it will do, how it might look, and how it will function. Prior to Balsamiq and other similar applications, wireframing was traditionally done by hand on paper, or by using applications like Visio and/or Photoshop.
While these are fine in their own right, Balsamiq offers things others do not. They are as follows:
Ease of use: You will be creating wireframes moments after you open the application.
Simple Tools: Balsamiq is filled with easy-to-understand visual tools that will help you to transfer your ideas from your head to the screen quickly and clearly.
Portability: Balsamiq files can be easily shared among your peers and clients alike. With Balsamiq, you will be designing and sharing your work across multiple operating systems and with whomever you choose via e-mail, in print, or online.
Affordability: Balsamiq is at a price everyone can appreciate. And that is because Balsamiq really does just one thing: wireframing. But, as you will soon see, it does that very, very well.
But enough talk! To really understand, experience, and enjoy Balsamiq, you have to use it. So let's get started.
While installing Balsamiq is pretty straightforward, what instructional book would be complete without showing you how?
Balsamiq will run on Windows, Mac, and Linux. You will also need to download an application called Adobe Air, but more on that later.
Please note that these instructions are for the Macintosh operating system. However, installing on a PC should be a similar experience. Perform the following steps to install Balsamiq:
1. Open a browser and type in http://www.balsamiq.com/download.
2. Once at the Balsamiq website, click on the Install Mockups button to begin installation, as shown in the following screenshot:
You can also download the installation files by scrolling down the page and clicking on the link Mac OSX: MockupsForDesktop.dmg and similarly for other operating systems as well.
3. Once the installation has started, you may see a pop-up message telling you that an application called Adobe Air will be downloaded to your computer. Click on Yes to continue with the installation, as shown in the following screenshot:
4. Read and accept the Adobe license agreement to complete the installation. Once installed, Balsamiq should open automatically on your desktop.
Adobe Air is a cross-platform development environment that allows web developers to create rich web applications and content that is downloadable directly from the Web. As you will see, Balsamiq is essentially a drag-and-drop application with Flash-like capabilities. The Adobe Air application that installs on your machine makes that functionality possible.
When you go to the Balsamiq website to download the application, you will see two application types. One is Balsamiq Mockups and the other is myBalsamiq. The difference between these two is simple. The first is downloadable directly to your computer. The other is a pay-for-use cloud-based application that you access via your web browser.
Note
While I have not tested myBalsamiq, I assume it works exactly like Balsamiq Mockups for the desktop. The major difference would be that MyBalsamiq is cloud-based and requires an Internet connection, while Mockups does not. Regardless, this book assumes and presents material as if you have downloaded Balsamiq Mockups directly to your computer's hard drive.
When you install Balsamiq onto your computer, it will open automatically to a blank canvas. You will then have access to the entire application for free. However, keep in mind that, at this point, Balsamiq is only a trial version and will expire after seven days.
To purchase Balsamiq at any time during your trial, simply return to the Balsamiq website and click on BUY located at the top navigation bar. At the time of publishing this book, a single user license costs $79. It is worth every penny.
With Balsamiq now installed and opened on your computer's desktop, you are essentially looking at the entirety of the application. Let's break it down into its essential pieces. There are two main areas of focus:
1. Application menu
2. Application view
The Application menu, like any menu found in most applications, is found at the top of your computer screen, as shown in the following screenshot:
While most of the items found within these menus are common to all applications, like Save, Open, New, Cut, Copy, Paste, and so on, there are a few that are specific to Balsamiq and that may be helpful to you when working with the tool.
The ones I am referring to can be found under the File menu, as shown in the following screenshot:
This menu item acts as it sounds by making a duplicate of whatever Balsamiq page is currently active on your screen.
This command will save any changes made to multiple pages currently open on your screen. As you will most definitely be working with multiple pages, I am sure you will find this tool to be very useful.
Selecting this command from the File menu saves the entire active page as a .png file. You can also use this command to save parts of a page by performing the following steps:
1. Press the Shift key on your computer keyboard as you select individual elements on the canvas.
2. Select Export to PNG Image from the File menu.
If you choose to save only a portion of the screen, you will see a dialog box with the option to save only what you selected (Export Selected). Or, if you so choose, you can save the entire page with one click (Export Everything), as shown in the following screenshot:
Upon exporting your work, a dialog box will appear telling you where exactly the .png file was saved, as shown in the following screenshot:
Balsamiq mockup files use the file extension .bmml, which stands for Balsamiq Mockups Markup Language.
Unlike the previous command which saved only the active page as a single .png file, this command will save every open page as a separate .png file.
Choosing this command converts all of your open .bmml files into a single, multi-page PDF document that you can print, email, use for building paper prototypes, share with peers, or present to a larger group.
This menu item copies the contents of an entire canvas, or some selected elements of the canvas, onto the clipboard. Once that is done, the content can then be pasted onto a new Balsamiq canvas or into any application that accepts imPhotoshop, MS Word, PowerPoint, and so on.
Speaking of raw XML code, Export Mockup XML
will export an entire .bmml file into raw XML code. From there, the XML code can be imported into another Balsamiq page or saved as pure XML code to share with other developers. When selecting this command, you will see the following pop-up message confirming the action:
To import XML code back into a .bmml file, open a new canvas (Command + N or Ctrl + N) and paste your copied XML code into the text field that appears, as shown in the following screenshot:
If you want to import an entire page as XML, click the menu item called select a mockup and select a page from the drop-down menu. Once a selection is made, the Import button will become active.
Now let's take a closer look at Balsamiq's main application window. This is where you will be spending most of your time.
The application window in the following screenshot, shown here in full, can be broken down into four distinct areas:
The Application Bar sits atop the main application window and contains some of the most commonly used Balsamiq tools.
Starting in the upper-left of the application bar, you will find the Quick Add tool, as shown in the following screenshot:
This tool allows you to find items in the UI Library quickly by typing a letter or word into the text field, utilizing a Google-like autocomplete functionality, as shown in the following screenshot:
Select the most appropriate result in the results list and press Enter on your keyboard. The chosen widget will appear on the canvas. Give it a try.
The Tool Bar offers many of the same tools found in the Edit menu at the top of the screen. However, rather than having to go up to the Edit menu for items like Undo, Redo, Duplicate, Cut, Copy, Paste, and so on, the Tool Bar gives them to you in a more convenient, one-click location, as shown in the following screenshot:
To learn the name of an icon within the Property Inspector, simply hover your mouse pointer over an icon and wait until you see its name in the tooltip provided.
Balsamiq allows you to add notes to your wireframe to note things like user instructions, special notes to the developers, explanations of complicated areas, numbering of items, and so on. These notes are referred to in Balsamiq as markup. By clicking on the Show Markup button, you can toggle markup on and off, as shown in the following screenshot:
Creating markup in Balsamiq is easy. Just click the button labeled Markup in the UI Library to filter just those widgets, as shown in the following screenshot:
We will be taking a closer look at markup in Chapter 6, Presenting Your Work.
Full Screen (Presentation Mode) is a one-click toggle button that resizes Balsamiq to full screen. You will use this functionality when you start presenting your work to clients, or if you want to demonstrate some interactivity using a clickable prototype.
We will learn more about Balsamiq's prototyping capabilities, in Chapter 6, Presenting your Work.
To return to the smaller screen, simply click the Esc key on your computer keyboard.
The UI Library is the part of the Balsamiq application that you will be using often as you build your wireframes. Each graphical element within the library is referred to as a widget. Simply click-and-drag, or double-click on a widget, and it will appear on your canvas, as shown in the following screenshot:
As you can see in the previous screenshot, there are quite a few widgets to choose from. Rather than defining each one here, they are introduced throughout the remainder of this book.
Note
To view a complete description for every widget in the UI Library, visit https://support.mybalsamiq.com/projects/uilibrary/story.
To use the UI Library, click a button just above the UI Library to isolate a specific category of widgets, or simply click on the All button, scroll to the desired element, and drag it onto the canvas. You can also double-click on a widget to place it on the canvas.
The canvas acts as a blank sheet of paper upon which you build your ideas and turn them into working wireframes. Just place some widgets from the UI Library onto your canvas and start building. For more on working with the canvas, explore Chapter 2, Building a Project.
At the very bottom of the application window is the File Browser. Each open canvas page is shown as a tab containing the name of that file. Since you can only work on one page at a time in Balsamiq, the currently active page is highlighted in blue, as shown in the following screenshot:
There are a few things to note about the file browser:
Viewing pages: Click on the tab of the page you want to work on.
Rearranging pages: While clicking on a page tab, drag it left or right and to its new position in the File Browser.
Closing a page: Click on the x icon located to the right of each tab, as shown in the following screenshot:
Adding a page: Hover over a tab in the File Browser and a plus sign will appear, as shown in the following screenshot. Clicking on the plus sign will create a blank canvas page titled New Mockup.
Saving a page: When a change is made to the canvas, the page tab will display an asterisk to the left of the page title, as shown in the following screenshot:
To remove the asterisk, you must first save the page by selecting File | Save, or by pressing Command + S or Ctrl + S, on your keyboard.
Renaming a page: Right-click on the page tab to reveal a menu of options. Select Rename Mockup..., as shown in the following screenshot:
Type a new filename into the text field that appears.
Click on the arrow to see all of your page titles in full. Select one from the menu to bring it into view, as shown in the following screenshot:
If you haven't already done so, drag a few elements from the UI Library onto the canvas. Once placed, click on any one of them to expose the Property Inspector, as shown in the following screenshot:
The Property Inspector is an important tool for controlling much of what happens on the canvas and is a tool you will be using very often in Balsamiq and throughout this book. As you can see in the previous screenshot, there are a number of functions that exist within the Property Inspector. Some might even look familiar to you as they work the same as in other applications.
We will explore many tools within the Property Inspector throughout this book. For now, take some time to explore your new Balsamiq backyard. And don't worry about breaking anything. It is impossible to break Balsamiq.
This brings us to the end of this chapter. By now, you will have installed Balsamiq and Adobe Air on your computer, learned about the essential tools for saving, importing and exporting files, played with the UI Library, placed elements on the canvas, opened, saved and closed pages using the File Browser, and much more.
Now that you have done all of that, take a moment to congratulate yourself. You have survived the boring stuff and can now begin to put everything you just learned into practice. In the next chapter, we will do just that and more.
Are you ready? Here we go!