👋🏽 We wrote a book! Order Wireframing for Everyone today →

Balsamiq

Toggle navigation

In Case You Missed It: New Hidden Powers in Balsamiq Mockups 3

Finally getting to work on features that have been on the back-burner forever is a great way to rejuvenate developers and reward long-time customers.

After a slow year of public releases in 2014 while we re-wrote our product from scratch, 2015 and 2016 have been chock-full of updates (4 major releases, 31 minor ones).

I thought it might be useful to recap some recent new features we really enjoy that you might have missed. In this post I'll provide some back-story on the "Quick Draw" and Transform control features from our 3.2 release.

You can see them in action here:

These were ideas that had been in the back of our minds forever that we finally implemented. It felt good to get them out there. Read on for the story behind them.

Background

Anyone who works in software has a list of ideas that start with "wouldn't it be cool if...?" These ideas often take a long time to make their way into the product, if they make it at all. Some possible reasons:

  1. They're just plain hard or time-consuming
  2. Customers aren't actually asking for them, making it hard to justify the work (though they may be complaining about problems that these ideas would solve)
  3. Stability and performance issues and "must have" features take priority

With our 3.0 release, Balsamiq Mockups settled into the usable and useful product that we originally conceived it to be. This freed us up to start working on some exciting "wouldn't it be cool if..." features.

We want to collapse the time between when an idea forms in your head and when you see it on the page.

We use Balsamiq Mockups internally a lot, so we are always looking for faster and more efficient ways to wireframe. Our standard for getting into the flow is paper and pen, after all. Our 3.0 release was designed to be simpler and more powerful. Our 3.x releases have been focused on speed. We want to collapse the time between when an idea forms in your head and when you see it on the page. That's what motivated us to build the following features.

"Quick Draw"

Balsamiq Mockups 3 brought more visibility and simplicity to things like Symbols and assets. But the core workflow of adding controls to the canvas remained similar to previous versions. For a long time we envisioned a workflow that would allow you to build up your wireframes before even having a concrete plan for the UI details.

Starting with an outline

Ideas don't always come fully-formed. We thought about drawing outlines on the canvas, like you would on paper, to create a skeleton for an idea that was still being developed. We already had placeholder controls in the UI Library, such as the rectangle and image controls, and lorem ipsum text in a Text control, but using them still required dragging onto the canvas and then resizing them.

What we really wanted was a way to "draw" directly onto the canvas.

What we really wanted was a way to "draw" directly onto the canvas. We decided right away that freehand drawing with a mouse is non-optimal. It's imprecise and forces you to slow down quite a bit when you do want precision (such as connecting lines to close a gap). So we moved on to click-dragging, holding down the mouse button while dragging (they way you "lasso" multiple controls in many drawing programs, including ours).

After some experimentation and discussion, we decided that holding down a keyboard modifier key while click-dragging was a sufficiently intuitive way to "draw" on the screen. We used the "R" key for drawing a rectangle, the most generic control in our palette.

Better placeholder text

Our next thought was to make it easy to add placeholder text to your mockups using this method. But our existing headline and paragraph controls didn't lend themselves to it well. They were a fixed size and optimized for resizing only after you'd entered text in them. Again, we wanted to quickly be able to add a placeholder without having to think about content.

Our solution was to add two new controls - "Line of Text" and "Block of Text". These were features that had been requested many times over the years. "Greeking" text is often used in wireframing to create placeholder text without using recognizable letters that would distract viewers.

New controls make it easy to show placeholder text

Putting it all together

With these new controls added to our UI Library we could now assign modifier keys to them and allow users to draw them onto the canvas. We used "T" for the block of text and "Y" for the line of text (a.k.a. headline).

Here's what it looks like:

We immediately fell in love with this feature. It felt like something we'd been missing all along. We are always striving to make our tool simpler, more "basic" even, and this felt like a great way to "add less" to our tool (without making it more difficult for people who didn't use it). In other words, it met our criteria for "hidden powers".

Transforming Controls

For speed and efficiency, our new drawing feature had one major drawback. When you decided what to replace the placeholders with, you would have to delete them and re-add specific controls. This was a step in the wrong direction. So we added one other major "wouldn't it be cool if..." feature that had been on our back-burner. One that seemed out of reach at times due to the complexity.

"Wouldn't it be cool if you could swap out one control for another?"

It went something like this: "Wouldn't it be cool if you could swap out one control for another?" A key part of wireframing is iteration: discussion, changing your mind, trying something out to see how it feels. A common example is building a form and then deciding that a text field should be a drop-down box. Not a big deal to delete it and replace it, but across multiple mockups, projects, years, it adds up.

Yes, but how?

But, and here's the tricky part, what should the logic be to transform one control to another? Changing a text input to a combo box? Definitely. A rectangle to an image? Sure. A tree control to a list? Or an accordion? Hmmm...

Peldi likes to say that he loves mundane, repetitive tasks of all kinds. How about mapping each of our 70+ controls to each other one, deciding whether it should be transformable to that control? It required persistence and expert knowledge of the product inside and out, clearly a job for Peldi.

His spreadsheet ended up looking like this:
swap-control-tableA boring chore for an intern? Actually, it was done by our CEO.

With that laborious task complete, we started the work to build it.

Getting it right

In the spirit of "hidden powers," we didn't need it to scream for attention. It's not something you should be distracted by when you're in the flow. So there's no big button in the UI that says "Click Me to Transform!" Just a subtle arrow in the Property Inspector and an item in the right-click menu. There's also a handy keyboard shortcut (CTRL/CMD + T) for when you're ready to start using it regularly.

Check it out:

Finally, we decided that some controls could even transform on their own. Like turning a placeholder text control into a real text control. So, if you type into a block or line of text control it automatically transforms to a paragraph or subtitle control. Neat!

See it here:

Summary

These are two of our favorite recent features, but they're not the only ones that we've added to help you work faster and more efficiently.

In 3.1 we introduced Alternates and Background Music. 3.3 provided the ability to organize mockups into groups, like this:

"Nested" mockups

And we finally made arrows that work the way you expect!

Earlier this year we also added the ability to automatically generate Site Maps based on the mockups in your project. This was another "back-burner" project that we really enjoy using.

Deciding what to work on

One of the hard things about software is that it's never finished. Our 3.0 release felt "complete" yet we knew we could continue making meaningful improvements (not to mention the hundreds of small enhancements and bug fixes). However, we resisted adding features that didn't feel central to the purpose of our product or that would make our product harder to use.

Instead we chose features that we were excited about and that we knew our long-time users and fans would appreciate. Sometimes that's just what feels like the right thing to do. We are grateful to our community of bug reporters, support callers, and forums users who have provided feedback and guidance along the way.

We are now hard at work on another very exciting project, native versions of Balsamiq Mockups! Stay tuned!

Leon for the Balsamiq Team

Leave a Comment

Comments (3)

  1. Hi Rob,

    Thanks for sharing your thoughts about this one. We’re glad to hear that you seem to like these new additions.

    We made the Quick Draw feature working this way for two reasons:
    – Pressing and releasing the mouse allows defining the start point and end point of your control (its size).
    – It avoids inadvertent use of the feature as you need to do two specific actions and helps to define the “start” of your desired action.

    Let us know if you need anything else, you can reach us easily via support@balsamiq.com 🙂

  2. These features sound great – one question: why do you need to hold down a modifier key AND a mouse button? Why not just hold a modifier key and then move the mouse, and clicking does nothing extra?

  3. Pingback: [Release] Mockups 3.4! – Mockups Product Blog – Balsamiq