Toggle navigation

Balsamiq 2.2 is here!

It is with great excitement and pride that I present to you our biggest release yet: Balsamiq Mockups 2.2!

The new release sports an updated look and feel, and a new "wireframe" skin for you to use in your mockups, and lots more!

A new editor look and feel

As a programmer, I have always cared more about making my software SOLID rather than having it look pretty. When I was back at Adobe, my friend and colleague Nigel Pegg would spend hours tweaking the speed of an animation tween and working with our designer Tim Allen to make sure that everything looked beautiful and pixel-perfect. The three of us made a great team.

When I started Balsamiq, I was on my own. I did my best to make the Mockups skin look OK, but I clearly never made the look and feel a top-priority. Just like a wireframe, I wanted to make sure the app worked well before spending time and money making it pretty.

It's been four years now, and it's time for Mockups itself to grow up. We have a world-class graphic designer on our team, and it's time we start using his skills to the fullest. Mike started by redesigning myBalsamiq while still in beta, and now we're taking his gorgeous, minimalistic design sensibility to Mockups itself, and it feels great. In fact, it's making me appreciate how important graphic design is, even early on. We live and learn... 🙂

Our goal with the new look and feel was to make something that is beautiful, professional, incredibly intuitive, all the while staying out of your way as much as possible.

Since we run on Windows, Mac, Linux and the Web, we needed a look that didn't try to mimic the native look and feel of the controls, but also one that didn't scream "Look at me, I'm a Flash application!"

We think Mike did an amazing job with this new look, it's truly gorgeous and does its job extremely well.

It makes working in Mockups for hours and hours an even smoother and fun experience.

An additional skin for your wireframes!

The fact that wireframes created with Mockups look hand drawn has been one of our best ideas yet. It makes it obvious to everyone that the design is NOT final, and encourages people to give honest feedback, which is what it's all about. It also has an instantly-recognizeable, playful character that makes everyone who uses Mockups a little happier at their job every day. 🙂

We love our sketch-like skin and are very proud of it, but over the years we've heard from many of you that it doesn't fit every situation.

The first person to raise the issue was famous British designer Andy Budd, back in 2009! In his My First Impressions of Balsamiq article, he argues that our skin had TOO MUCH character, it distracted stakeholders from looking at the structure of the wireframe. I think his criticism came mostly because we used Comic Sans as a font back then (we've since switched to our own, hypoallergenic font), but his point was valid, the playful look and feel didn't fit all situations.

Over the years, as Mockups became mainstream, we have heard the same argument from many of you: you love Mockups and want to use it on every project, but sometimes its playful character didn't help, your awesome wireframes weren't being taken seriously by your boss / your graphic designer / your client.

We even heard from someone who did all the thinking in Mockups, but then had to painfully re-create each of their wireframes in a different tool just to present them to their clients. Ouch.

Starting with today's release, you have a new Skin choice in the View menu:

The Sketch skin is the one you know and love, only cleaned up a little bit. It is still the default and what we recommend people use most of the time.

Our goals with it were to make a skin that still conveyed "this is not final" while also disappearing in the background as much as possible, the goal was for it to be "totally vanilla".

After experimenting a while with some product design skin in the style of sketch-a-day, we landed on a clean, straight-lines look that we feel is timeless because of its simplicity.

Take a look at some example wireframes shown in both skins (click to enlarge):

Switching from a skin to the other should be totally painless, most things won't move around at all. We think most of you will do all the thinking in the Sketch skin, and only switch to the Wireframe skin when it's time to present your work, when you're trying to "sell" your designs to other stakeholders. We'll see what happens...

A personal note from Peldi

On a personal level, these two feature were a bit painful for me to work on, which partly explains why I postponed them for so long. Let me explain.

My fear was that a cleaner look and feel and a cleaner skin would make Mockups lose too much of the character that has made it so successful. I didn't want it to look like "just another pro design tool", boring in its similarity with all the others.

Well, I have been using Mockups 2.2 for weeks now, and I gotta say, I can't go back. The new look and feel of the app doesn't feel boring, it just feels RIGHT. Whenever I have to use 2.1 to debug a customer's issue, my eyes hurt and I can't believe we've been so successful with such an ugly app.

The new wireframe skin is actually REALLY FUN TO USE, darn it! 🙂 It totally grew on me. My wife Mariah drew all the controls of the original sketch skin, so falling in love with a skin that she didn't draw feels a bit like I'm cheating on her! You understand my internal conflicts here, right?!?!? 😉

Another thought about these two features: I built and launched Mockups in 2008 as a programmer who had developed a passion for UX, but was totally self-taught and didn't really know anyone in the IA / UX industry. We can safely say that Mockups has come out of left field in the UX industry, mostly introduced by developers and product managers.

We have never marketed Mockups directly to UX professionals, because in some way we didn't feel that it was good enough for them. With the 2.2 release, four years after the original launch, I think we are ready to start changing that perception. We know lots of UXers who already rely on Mockups, and we think that today's release elevates Mockups to become a first-class citizen in the UX professional toolbox.

We hope those who considered Mockups a toy will give it a second look now, it has really come a long way since we first started, Comic Sans and all...

A new Site Map control

While we were at it, Paolo threw in a new, highly requested control type: the Site Map!

It's super-easy to use and helps you make site maps in a snap.

Each page is linkable, easy peasy. Try it out.

What else is new?

  • All versions: changed the size of the background grid to match our 10px - 20px shift+nudging dimensions.
  • All versions: reduced the bottom padding of the sticky note control so that you can make smaller stickies.
  • Mockups for Desktop: fixed the "Copy to Clipboard doesn't copy transparent PNGs when transparentBackground is true." bug. Thank you Nathaniel Boehm for reporting it!
  • All versions: fixed a long-standing issue with links being offset while full-screen presentation mode. Thank you Peter Baker for reporting it and sorry it took us so long to fix it!
  • All versions: we now hide the property inspector while panning with space+drag.
  • All versions: when ungrouping the z-Order of the ungrouped control was wrong in some cases.
  • All versions: Fixed Tab bar control spacing when right-aligned
  • Mockups for Desktop: fixed more erroneous "the file is read only" errors.
  • Mockups for Desktop: the DMG file on the downloads page no longer gives the Gatekeeper error on OS X Mountain Lion. This was crazy hard to do, thanks Marco and Paolo for figuring it out.
  • Mockups for Desktop: we now use the native menus in Linux. Thank you Jonta for spurring the change.
  • myBalsamiq: if you use "Use System Fonts" in your mockups, the generated mockup images will now properly show your text.
  • myBalsamiq: fixed an issue with using images in symbols.
  • myBalsamiq: improved handling of JPEG assets. Thank you Sophie G. for reporting it.
  • myBalsamiq: fixed caching for mockup images and implemented an improved caching strategy.
  • myBalsamiq: fixed an issue with the editor displaying real-time notifications for other projects in the same site. Thank you Bartosz J. for reporting it!
  • myBalsamiq: fixed an issue with using quotes in staffer's names.
  • Mockups for FogBugz: revamped the UI and fixed some bugs.
  • ...and lots and lots more, either behind the scenes or to small to mention

Thank you to all of you who helped us test 2.2 in the last month, especially Ben Norris, Eric Chan, Paul Harrison, Christian Colding and Timothy Whalin.

How do I update?

If you're using myBalsamiq, you're already updated. Just log back in and enjoy.

For other versions, simply install from our download page on top of your current installation. You won't have to re-register.

Thanks to Florian's huge test automation efforts, this is the best-tested release of our history. It's still a huge update though, so something might have broken. If you see it, let us know immediately and we'll fix it right up! 🙂

For posterity, these are the version numbers of today's release:

  • myBalsamiq: build #3859
  • Mockups for Desktop: version 2.2.1
  • Mockups for Google Drive: version 2.2.1
  • Mockups for Confluence: version 2.2.1
  • Mockups for FogBugz: version 2.2.1
  • Mockups for JIRA: version 2.2.1
  • Mockups for XWiki: version 2.2.1
  • Web Demo: version 2.2.1 launch it

Did you know that...

  • we released the TrueType files for the Balsamiq Sans font?
  • we added kid-sized T-Shirts to our SWAG store?
  • we improved our "send us an email" submission form for myBalsamiq to help us help you faster?
  • Peldi will be speaking at Business of Software 2012 in a few weeks, and hopes to see you all there?
  • most of us took some time off in August to rest and recharge, and are totally fired up for all the goodness that we're going to work on this fall? 🙂
  • while our sales continue to grow, support load is actually decreasing?

In short, we're stoked about 2.2 and the future. We hope you are too. 🙂


Peldi for the Balsamiq Team

Get the Inside Scoop!

Want to be part of the Balsamiq inner circle?
Want to know what we're up to before everyone else?

Subscribe to our monthly newsletter! See Past Issues.

Dazz Knowles
"Of all the e-mail newsletters I get, @balsamiq is the one I always read, they're brilliant!" - Dazz Knowles
Jérémie André
"Another great newsletter from @balsamiq!! 😁" - Jérémie André

Leave a Comment

Comments (37)

  1. Pingback: Des applications de prototypage toujours plus sophistiquées et toujours plus simples «

  2. Pingback: 5 Ways to Get Your Android App Designed - DIY DROID