The latest news from Balsamiq:
A quick tutorial on how to wireframe even faster, using Balsamiq’s latest features.

Trouble viewing?
View it online.

Any sufficiently advanced technology is indistinguishable from magic
— Arthur C. Clarke

Completely new digital projects are great, but also very rare. It’s much more common to have to work with an existing UI, by adding a feature, or a new website section, or even just updating the copy on a web page.

And even when you do have to start a new project from scratch, starting from an existing UI — maybe even of a different product! — can save you time.

We just added 2 new features to Balsamiq Wireframes that make these kinds of tasks a breeze. Let me show them to you!

Before you start: decide where to add the new feature

Humans have a natural tendency to consider new things more important than they really are, simply because they’re new. An example would be adding the new feature to the main navigation, when it should really be in a sub-nav.

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.

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 new 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 me show you!

Pretty amazing, isn’t it? 😊

That’s it! We hope you’ll enjoy using these 2 little features. Did you notice how much we hid them in the UI? 😉

Product news

We shipped version 4.4! Other than the 2 features above, it includes the #1 most requested feature by our power-users: Nested Symbols! Read all about it in the docs.

We’re working on simplifying the Balsamiq Cloud home page, and improving the onboarding experience. We’re also working on finally adding Find and Replace, but it will take a while because it’s a tricky feature to build!

Wireframing Academy news

We started out this month by having a 3-day education team mini-retreat to discuss project ideas for the next 6 months. Lots of exciting projects ahead!

As for some new things for you to watch, read, and listen to, Leon was interviewed by our friends at Business of Software for their Podcast. And, Billy hosted a panel discussion on “What do you get when you mix UX and Content Strategy?” with the User Experience Professionals Association Chicago chapter. Stay tuned for the recording.

Last, but not least, our UI control guidelines keep coming. We added 6 more this past month, covering Text, Scrollbars, Rules, Splitters, iOS Controls, and Annotations. Enjoy!

UX/UI links for November

Letting Users Tick a ‘None’ Checkbox — by Frankie Roberto
UI Cheat Sheet: Accordions — by Tess Gadd
Your Main Competitor Probably Isn't Who You Think It Is — by Ryan Cornelius
How to Make Smarter Design Tradeoffs — by Anyuan Wang
How Designers Can Prevent User Errors — by Jordan Bowman

Company news

We shipped a whole new giant Company section of our website! Fifty-one (51!!!) new pages all about our values, how we work, how we run our business, our locations, and our history. Check it out, but be warned, you might lose a whole afternoon reading it all. 😉

Sponsorships and raffles: We’re back with more of our upcoming sponsored events including the Africa Women Innovation and Entrepreneurship Forum, WomenX Impact, Product Con, and more!

Notable recipients of our Free Software Program:

Love Justice International, who fights human trafficking and helps orphaned and abandoned children in 19 countries.
The Key to Life Trust, whose mission is to forever change the way New Zealanders think, act and feel about mental health and suicide.
StoneStep, a social enterprise focused on changing how insurance is bought and used by low-income communities.

That's it for this month!

Since you’re part of our inner circle, your opinion is super important to us: so if you try these new features out, let us know what you think of them!

See you next month, with more behind-the-scenes news from your friends at Balsamiq!

Peldi for the Balsamiq Team

View in Browser | Update Your Preferences | Unsubscribe

Balsamiq’s new features to speed up iterating on existing UIs

Before you start: decide where to add the new feature

Start from a screenshot

Make some room with the new Split Image feature

Use annotations to show what’s new

Use an existing page as a template

Product news

Wireframing Academy news

UX/UI links for November

Company news

That's it for this month!

Older messages

Balsamiq’s Priority Review Boards: A Small, Simple Process with a Big Impact

Learn How to Wireframe Your Website Copy with Balsamiq

A Special Preview of Balsamiq’s New and Improved UI Control Guidelines

Should Balsamiq Have a Podcast?

Balsamiq’s Unique Way of Thinking about Sponsorships

You Might Also Like

Pierce & Ward’s Secret Sources, Business Advice You Can’t Afford to Miss, and More

World Press Photo Contest, Speedometer 3.0, Anchor Position, Sliding Frame, Meta Llama 3

Car UX, DevTools Tips, CSS Patterns, iOS404, Internet Cables

Big Tents, Pistachio Palettes, and Other Late-Breaking Milan Discoveries

163 / Dieter Rams inspired Framer components, America's national parks and more free resources…

Logo System, BCWA Identity, War Robots, 84—24, 19th-Century Atlas

Emma Roberts's Home: AD100 Firm Pierce & Ward Share Their Secret Sources

#452: Design Workflow

Mario & Pareto, faces.js, Sleep vs Blog, Dark Mode, DOM Folding

Gap, Teenagers, Artistic Intelligence, Should Designers Code, CSS in RSCs