Speed up iterating on existing UIs
Balsamiq has features to make iterating on an existing UI quick and easy. Let's take a look!
Before you start: decide where to add the new feature
The most important thing to think about before jumping into wireframing is to decide where you will surface the new feature you’re adding.
Humans have a natural tendency to consider new things more important than they really are, simply because they’re new.
The temptation to add your new feature front-and-center will be strong, but you must fight it!
Instead, think of it in the context of the long-term vision for your product.
Is this going to be a power-user feature? It’s OK if it’s more hidden! Is it something that only some users will need? Definitely hide it in some menu, or you’ll ruin the experience for everyone else! Could the spot you picked be needed in the future for another, more important feature? Find another spot!
It’s better to announce the new feature in the release notes, in a newsletter, or a blog post than to give it more prominence than it deserves in the UI. An example would be adding the new feature to the main navigation, when it should really be in a sub-nav.
Start from a screenshot
Bringing a screenshot in Balsamiq is very easy. First, you open your Balsamiq project on a new wireframe.
Then, on Windows: Hit the Windows key, along with SHIFT and S, then select the area to capture, switch to Balsamiq, and hit CTRL+V.
On a Mac: Hit CMD+SHIFT+4, select the area to capture, grab it from the bottom-right corner of your screen, and drag it into Balsamiq.
If you want to capture a full web page and it doesn’t all fit on your screen at once, we recommend using a browser extension like GoFullPage. It will let you save a full image as a PNG, which you can then drag to Balsamiq.
Make some room with the new split image feature
Once your screenshot is in Balsamiq, you can use the new Split Image feature to make room for the new UI controls you’re adding.
You can then move the bottom part down a bit to make space for your new feature, and possibly add a background with the QuickDraw feature: Just hold down the R key and draw a rectangle.
Use annotations to show what’s new
Once you’ve added your new UI elements, what you’ll have is what’s called a “mixed fidelity wireframe”, in which some parts are high fidelity (the screenshots) and some are low (your new feature).
To make what’s new more obvious, you can add annotations using sticky notes, arrows, curly braces, or my favorite: a yellow pointy button.
Use an existing page as a template
Let’s pretend we want to add a “Podcast” page to our website. I could start from scratch, but it would be faster to pick a page on our website that has the same format of the new page I want to add, and just change a few labels here and there.
Well, Balsamiq’s Extract Text feature was designed just for this case.
Some of you might remember when the World Lens app came out in 2010. It was the first example of Augmented Reality that really captured people’s imagination: it would recognize text in images, remove it from the image, translate it, and superimpose the new text over the old image (watch the demo). It was so great that Google acquired it and turned into Google Translate. Well, our new feature works just the same!
It feels like magic. Let us show you!
By Peldi GuilizzoniGot questions or feedback? Email peldi@balsamiq.com.