I was first introduced to Balsamiq while working as the Director of User Experience for a software company in Chicago. Until that point in my career, I had been designing user interfaces and clickable prototypes using Photoshop, handcoding layouts in HTML and CSS, and spending a lot of time learning prototype software like iRise and Axure.
Now, these are all great tools and should be explored fully. But, my role with this company was different. I was working as a user-experience architect alongside a large agile team of developers. In an environment such as this, it meant that I no longer had the luxury of time to transform my ideas into hi-fidelity layouts and complex clickable prototypes. Instead, I now had to work faster, more efficiently, and deliver creative concepts that were clear and concise, but in a fraction of time. There was simply no time to wireframe in Photoshop or code HTML, and to be honest, Axure was just too cumbersome, personally speaking, for doing quick and dirty designs that my development team demanded. Then, I discovered Balsamiq.
I was first introduced to Balsamiq by a developer on my team. He had been using it to sketch rough ideas to share with his development colleagues. Of course, I was immediately impressed. After all, developers are not known as the visual folks on the team, as much as working with detailed, text heavy requirements, and raw programming code. So, when I learned that a developer was already using the tool effectively, I knew I had to learn more.
From the moment I launched Balsamiq Mockups, its value was immediately apparent. Gone were the complicated toolbars with multiple menu options to learn. Gone too were the long hours toiling over hi-fidelity Photoshop mockups or tweaking handcoded HTML and CSS. With Balsamiq, I was able to design simple, concise, and effective designs using simple graphics and in half the time! As a result, my development team could immediately see what I wanted and could ask the right questions early. Plus, with Balsamiq's ability to make simple, clickable prototypes, I could impressively present my ideas to the team with ease.
With Balsamiq, I found a tool that let me express my ideas without the pressure of having to be perfect. I was also able to design with the same creative intention, but on a very basic and raw level. The focus became less about the tool I was using and more about the architecture of the design. In other words, with Balsamiq, I had found the tool I had always been looking for. I am sure you will agree.
Chapter 1, Getting to Know Balsamiq, starts with the basics of Balsamiq and walks you through the installation and the ins-and-outs of the application. Learn important menu items and about the application screen itself, setting the stage or what's to come.
Chapter 2, Building a Project, is a continuation of the essential elements of Balsamiq - like layering, alignment, and grouping, as well as an introduction to the project work you will be completing throughout the remainder of the book.
Chapter 3, Working with Symbols, discusses one of the more useful tools in Balsamiq. Symbols allow you to work more productively by allowing you to take greater control over your wireframes.
Chapter 4, Building Data Tables, deals with deciphering and presenting data online, one of the key challenges of great user interface design. Often, it could mean taking Excel data and making it interesting for your site's visitors. Not an easy thing to do. This chapter will walk you through good data table design and explain how to present data that is readable, useable, and presented effectively with Balsamiq.
Chapter 5, Icons, Images, and Text, presents you with three elements that are vital to a successful user experience. Knowing how to use each of them could make or break your entire design. In this chapter, we walk through these essential elements and demonstrate how to use them effectively in Balsamiq.
Chapter 6, Presenting Your Work, teaches you how to present your work to an outside audience. Whether you are creating a clickable prototype, a printable PDF, or exporting your work as a raw XML code, Balsamiq does it all with ease. This chapter shows you how.
Chapter 7, Parting Thoughts: Resources and Recommendations, will leave you with some very useful books, websites, and general tips that take what you have learned using this book and Balsamiq to the next level in terms of skill, creativity, and career.
This book is complete with multiple real-world examples using Balsamiq. As a result, you will need a few things to get the most out of your learning experience:
A copy of Balsamiq, which you can download at: http://www.balsamiq.com/download. While the initial download is free, it will expire after seven days.
All of the examples in this book, including screenshots, were created using a MacBook Pro. However, these should all work similarly on a PC.
A connection to the Internet is recommended, as the files for the exercises are downloadable.
This book is for anyone serious about wireframing, designing, prototyping, and communicating user interface design ideas.
That means:
User Experience (UX) professionals
Developers looking to visualize their ideas to colleagues
Product Managers
Graphic Designers
Anyone else who wants to convey ideas quickly and easily
In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.
Code words in text are shown as follows: "Click the arrows until the Pos numbers read: 79,260".
New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "Locate the widget called Video Player from the UI Library."
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.
To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title through the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website, or added to any list of existing errata, under the Errata section of that title.
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors, and our ability to bring you valuable content.
You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.