Create Application, Website or iPhone Mockups Easily with Balsamiq

balsamiq-desktop

The other day, I came across an incredibly useful Adobe AIR application called Balsamiq Mockups. This application allows you to quickly and artistically create drawing-like renditions of websites or applications for the computer or iPhone.

As I work in the software and hardware industry, I frequently have to discuss changing our website designs with various people within the organization. Often times, I spend a few minutes sketching out a concept for how to present a new feature within our website, or event how to redesign a person’s website from scratch. Usually, the drawings I produce are child-like and not elegant at all.

I had always envisioned a icon-based, drag and drop application that would allow you to quickly create a wireframe for a website or iPhone app. Balsamiq Mockups has solved this for me in a way that is easy to use and fun to execute.

The Program

Balsamiq Mockups is broken down into a few main components: the canvas and the UI Library and a few items that automagically activate based on the icons you select.

The canvas is basically like a piece of grid paper you used in college.

balsamiq_desktop

You also have a “UI Library” which contains a variety of commonly used web and application design components. The UI Library is fully searchable by keywords so that if you want to get an “alert box” element, you can simply type that in, hit enter, and if there is a match, your element or object appears on the canvas. You can also select the elements and drag them on to the canvas.

balsamiq_UI_pallete

Once you have an object on your canvas, you double click it to edit variables related to it. For example, below I have an “alert box” in the edit mode. It comes pre-populated with text to give you some guidance (which I customized below).

balsamiq_alert_edit

Once you are done editing, you simply close it and see the changes reflected in the object.

balsamiq_alert_view

Another example is that of a browser. I actually decided to show a full web-page build out in Balsamiq to really see how easy it is to use. The final version of my “new website mockup” can be seen later on in this post. The first step is to drag the “browser window” element onto the canvas and edit it.

balsamiq_webpage_edit

Once you customize the Title and URL, you have a ready-made browser window where you can place other element.

balsamiq_webpage_view

Also, when you select an element, you frequently get another control object that lets you fine-tune whatever item you are working with. For example, with the web-browser page, there is a toggle on the control to add or remove scroll-bars on the browser window.

balsamiq_object_controls

Working with objects and customizing them is incredibly intuitive. The best way is to just start playing with all of the objects to see what they do. Double-click them to edit any variables or data that is configurable as well as review the control object to see what can be further tweaked.

My Mockup Test

So, I decided that I would give Balsamiq Mockups a real world test by taking on the project of redesigning my current blog. I wanted to see how quickly and easily I could do a professional looking mockup, all without reading any kind of user manual – just through simple exploration.

As you saw earlier, you start with laying out a web browser window and then continue dropping objects onto the canvas. It’s easy to quickly amass a sizable amount of UI objects. Grid lines and snap-to guides help to keep objects lined up.

As I went along, I discovered that some objects had more tweaks than others. For example the icon control actually lets you choose from a huge variety of included icons (e.g., the calendar and RSS icons are from there).

Also, one function that I found very nice was that you can convert images into a drawing-type of style so that the image doesn’t become a distraction to the eye. You can see this with my logo and a square banner ad on the left side.

After about an hour of adding, deleting and tweaking, I came up with the following result:

HTD1_2

All of the elements in the picture are from Balsamiq including the callouts and sticky notes. It took a little while during the creation process to become adventuresome and try different types of controls. But what was immediately evident was that I could not have done this free-hand to the same degree of artistry (I’m a horrible illustrator).

Summing It All Up

Balsamiq Mockups allows you to focus on the details of a mockup and not the mockup itself. Because it presents the same look and feel always, and that look and feel is elegant yet simple to the point of being unobtrusive, when mockups or application designs are presented, the emphasis is more on the content of the mockup. You can export to PNG or even directly to the clipboard for easy inclusion into presentations or documents.

It is also very easy to collaborate with co-workers who may not have Balsamiq. They have developed an online version that has all of the functionality. You simply import in an original XML markup of a Balsamiq design, tweak it online and then export it back out as XML and send to the person who has Balsamiq. An online, subscription-based version is coming soon.

There a many reasons I really like Balsamiq mockups:

  • Adobe Air – it’s a full-featured, cross-platform application. You can use on a Mac or PC and it operates the same way.
  • Easy – Balsamiq is very intuitive and easy to use. A child can understand and use it with ease. But because it is easy, doesn’t mean that it is simplistic. Quite the contrary. It has a powerful feature set that does the job.
  • Expandable – you can easily import in other UI libraries that people develop from the MockupsToGo site.
  • Reasonable Cost – there are a variety of pricing options available, ranging from Free to $6000, depending on the product (Desktop, Confluence, JIRA or XWiki), the license type (Academic or Commercial) and the number of users.
  • Great Supporting site – I really liked the Balsamiq site. While not the product itself, you can get a good view into the application designer by seeing how the product site is put together. Good visuals mixed with clear text (I like the use of highlighting throughout).

As a company, Balsamiq is small but starting to grow. Located in Sacramento, CA and Bologna, Italy, it consists of a founder/do-it-all, a full-time programmer, a part-time contractor (also a programmer) and 1 part-time support person, but they are close to hiring another full-time support person. While small, you can truly see the thought and effort that goes into the design of not only the product but the site.

Balsamiq comes in various flavors, the most popular being the Desktop (standalone) version, reviewed here, which costs $79. Other versions are more expensive due to their integrations with other systems including: Confluence ($600-$4000 depending on # of licenses), JIRA ($149-$799) and XWiki. All versions come with a 30 day free trial. If you are a non-profit, student, teacher or any other of a generous selection of users, you may qualify for different pricing or even a free license.

Balsamiq has the ability to support website design, applications (windows/Mac) and iPhone mockups. With other UI libraries being developed, there are plenty of other possibilities for drawing solutions.

Note: I reviewed version 1.5.34. However, version 1.6.7 was release with some fantastic new features including linking two mockups, spacing enhancements, new keyboard shortcuts, colorizing “scratch-out” controls, and other performance enhancements and bug fixes.

I have very few complaints about this software. I do wish that there were some sort of layer control. Once you start placing many objects on top of each other, sometimes it is difficult to select the appropriate one. A simple implementation of layers with naming would go a long way. Layers could be hidden, moved up/down and possible have some other controls.

I honestly wished that I had been able to have this application in my tool set many many years ago. It is great for marketing people to help articulate to designers or just articulate a vision.

HTD Says: Balsamiq Desktop is an essential tool for any design shop, business organization, or anyone who needs to quickly and elegantly create stylish mockups. It truly helps you get ideas to paper in a fun and engaging yet powerful manner.

- Advertisement -
- Advertisement -
- Advertisement -

32 Responses

  1. Wow, this sounds great! I'll have to try it out. It would save me a ton of time. Thanks!

  2. Wow, this sounds great! I'll have to try it out. It would save me a ton of time. Thanks!

  3. Wow, this sounds great! I'll have to try it out. It would save me a ton of time. Thanks!

  4. Looks great, thanks for the review! I use MS Visio right now to do similar things, but this looks like it has much more functionality and easier to do too. I didn't see a free version on their website though, do you have the link to that?

  5. Looks great, thanks for the review! I use MS Visio right now to do similar things, but this looks like it has much more functionality and easier to do too. I didn't see a free version on their website though, do you have the link to that?

  6. Looks great, thanks for the review! I use MS Visio right now to do similar things, but this looks like it has much more functionality and easier to do too. I didn't see a free version on their website though, do you have the link to that?

  7. You could try the online version (there is a link in the review). For the free version, there are some qualifications that you need to meet. Read the text that I have highlighted (scroll down on the page to see yellow and green highlights):http://awurl.com/IrmTBh5Cu />Visio is good but this is better!

  8. You could try the online version (there is a link in the review). For the free version, there are some qualifications that you need to meet. Read the text that I have highlighted (scroll down on the page to see yellow and green highlights):http://awurl.com/IrmTBh5Cu />Visio is good but this is better!

  9. You could try the online version (there is a link in the review). For the free version, there are some qualifications that you need to meet. Read the text that I have highlighted (scroll down on the page to see yellow and green highlights):http://awurl.com/IrmTBh5Cu
    Visio is good but this is better!

  10. Hi Michael, thanks so much for the kind words. I am very glad that my little tool has been useful to you so far, and I hope it will continue to be so for a long time!

    I will also pass your compliments along to my wife, who drew all of the UI controls and icons in Mockups.

    One small thing: it's Balsamiq with a q, not a c. ;)

  11. Hi Michael, thanks so much for the kind words. I am very glad that my little tool has been useful to you so far, and I hope it will continue to be so for a long time!

    I will also pass your compliments along to my wife, who drew all of the UI controls and icons in Mockups.

    One small thing: it's Balsamiq with a q, not a c. ;)

  12. You could try the online version (there is a link in the review). For the free version, there are some qualifications that you need to meet. Read the text that I have highlighted (scroll down on the page to see yellow and green highlights): http://awurl.com/IrmTBh5Cu
    Visio is good but Balsalmiq is better!

  13. You could try the online version (there is a link in the review). For the free version, there are some qualifications that you need to meet. Read the text that I have highlighted (scroll down on the page to see yellow and green highlights): http://awurl.com/IrmTBh5Cu
    Visio is good but Balsalmiq is better!

  14. Thanks for the reply, I saw it now, I must have scrolled through to quickly before, just looking for a "Download" link. The highlighting helped!

  15. Thanks for the reply, I saw it now, I must have scrolled through to quickly before, just looking for a "Download" link. The highlighting helped!

  16. Yes, it's easy to miss. I think I'm going to start using highlighting more frequently. Sometimes you just want the “short version.”

  17. Yes, it's easy to miss. I think I'm going to start using highlighting more frequently. Sometimes you just want the \”short version.\”

  18. Thanks for the note! I have fixed the 2 bad spellings. Darn spell check! Sorry about that!

  19. Thanks for the note! I have fixed the 2 bad spellings. Darn spell check! Sorry about that!

  20. looks very nice , thank you for your good review , here I also have a good place, that is : Tradestead , there are different kinds of beautiful and powerful consumer electronics that is the best consumer electronics shopping place that I have ever known!

  21. looks very nice , thank you for your good review , here I also have a good place, that is : Tradestead , there are different kinds of beautiful and powerful consumer electronics that is the best consumer electronics shopping place that I have ever known!

  22. So Balsamiq replaces the paper and pen we all use and gives us the option to do the same thing but on our computer? Why am I under the impression that it takes longer to use a mouse instead of a pen to draw a mockup of a site? I'm a technology fan myself and I'd replace anything non technological but only if this will make me work faster, save up time and energy.
    ___________
    Mathew Farney – Web Hosting

  23. Balsamiq offers more than just the drawing aspect. It offers pre-built
    UI elements for websites and iPhones for example as well as the
    ability to do collaboration on mockup designs. Probably the best thing
    would be to download a demo and see for yourself.

  24. Balsamiq offers more than just the drawing aspect. It offers pre-built
    UI elements for websites and iPhones for example as well as the
    ability to do collaboration on mockup designs. Probably the best thing
    would be to download a demo and see for yourself.

  25. You're probably right. I should download a demo and see for myself. Who knows, maybe I'll find Balsamiq as being a very powerful tool. Thanks for your answer and keep up the great work!

  26. Another made product by adobe air which is really cool and easy to be use. Although it's a bit expensive at least worth it to buy that product because it can be use and understand even by a child.

  27. No, definitely not free, but cheaper than some alternatives. I prefer web apps myself, like LucidChart or Protoshare. LucidChart has a free option, but Protoshare doesn’t – both are nice though.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Other articles of interest

Global Product Review Disclosure

Disclosure: This is a global disclosure for product review articles on HighTechDad. It does not apply to Automobile reviews and there are other exceptions. Therefore, it may or may not be applicable to this particular article. I may have a material connection because I may have received a sample of a product for consideration in preparing to review the product and write this or other content. I was/am not expected to return the item after my review period. All opinions within this and other articles are my own and are typically not subject to the editorial review from any 3rd party. Also, some of the links in the post above may be “affiliate” or “advertising” links. These may be automatically created or placed by me manually. This means if you click on the link and purchase the item (sometimes but not necessarily the product or service being reviewed), I will receive a small affiliate or advertising commission. More information can be found on my About page.

About HighTechDad

Michael Sheehan (“HighTechDad”) is an avid technologist, writer, journalist, content marketer, blogger, tech influencer, social media pundit, loving husband and father of 3 beautiful girls living in the San Francisco Bay Area. This site covers technology, consumer electronics, Parent Tech, SmartHomes, cloud computing, gadgets, software, hardware, parenting “hacks,” and other tips & tricks.

Recent Articles

Explore Categories

– Advertisement –

Shop Now!

My Favorite Setapp Apps

Affiliates

  • Mount18_July
  • Save 15% Off at Incase

– Advertisement –

– Advertisement –