My Balsamiq: Wireframes on the Web

No matter whether you are a design veteran or more of an enthusiast, chances are you remember your first client like your first love. Although rather inexperienced, you’d jump into the cold water by delivering the very best of your design work to the client, no matter how much time was needed.

However, there’s a good chance that feedback afterwards required you to make a great number of changes to your design, consuming time you could have ideally spent doing more worthwhile things.

Looking back as an established designer, you’d rarely have the time and resources to deliver mostly finished designs to the client at a stage where you are still essentially still in brainstorm mode.

Wireframing has always been a tool to articulate big ideas and to identify challenges early, while also helping to keep clients, designers and stakeholders on the same conceptual page.

(My)Balsamiq Mockups is one of the tools which allow you to create wireframes with exactly this in mind.We have covered Balsamiq Mockups Desktop before on SitePoint, but if you are interested in a more portable online alternative, MyBalsamiq might suit your needs.

Note: I’m going to use the term “wireframe” instead of “mockup” throughout the article. If you are unsure about the differences between those terms, have a look at Stackexchange for the explanation of the terms. Although Balsamiq has the name “Mockup” in its name, its more focused towards producing wireframes. This confused me a little at first before I became clearer on the distinction.

Getting Started

Setting up your MyBalsamiq profile is straightforward task. You can try an account for 30 days for free without any feature limitations.

When creating your profile, you will need to create a site too. Users can be part of multiple sites, and multiple users can be part of a single site, making this the most obvious reason why MyBalsamiq is sometimes preferred over Balsamiq Desktop. As web technologies constantly close the power gap on their desktop brethren, it’s now possible to build powerful web applications like MyBalsamiq that simply couldn’t be imagined when Balsamiq Desktop was released in 2008.

Upon logging into MyBalsamiq, you might notice the notebook settings which let you set your notebook skin to anything from ‘quick and dirty’ to fancy leather. True, MyBalsamiq takes a skeumorphistic approach in this case, but that actually makes some sense, seeing that wireframes imitate hand drawn sketches.

Having said that, MyBalsamiq (or Balsamiq even) is not a tool to accompany you through your whole design workflow. It can however make brainstorming, ideation and wireframing in the early stages of the process much more efficient and less time consuming.

Setting up your site

You can set up your site under settings on top of the screen.

Under Site info you can change the name, url and appearance of your site on MyBalsamiq. This is predictably straightforward and useful if you want to customize your site’s space.

In MyBalsamiq you’re also able to add staff members to the site who can create new projects and invite external participants to view them. MyBalsamiq also shows the local timezone of each site member, which is a neat little feature.

MyBalsamiq also offers a internal mailing list email which you can use for communication within the site’s staff. Although a nice addition, it may be overkill for many — unless you have team that is deeply ingrained with MyBalsamiq as part of their usual workflow.

At the “Administration” tab, you are also able to Bcc yourself in all activities revolving around your project. Useful if you want to keep a really close eye on activity in real-time.

Under Desktop Licenses, you are also able to purchase a Balsamiq Desktop license for 50% off if you have a paid MyBalsamiq plan.

Wireframing & Workflow

Although it looks a little sketchy (yes – pun intended), MyBalsamiq has a detailed grid system allowing you to create wireframes with pre-set dimensions.

If you, for example, have limited use for hand-drawn wireframes from your client, letting them show you their ideas via wireframes is profoundly useful. This was already a great feature of Balsamiq Desktop — now MyBalsamiq expands its reach to anyone with a web browser.

As a case in point, in recent months I at first struggled with a requirements of a new client. The handful of vague sketches they sent me provided little direction and, as I worked remotely, I wasn’t able to meet with the client directly to flush out the critical details.

After spending a number hours deciphering the client sketches, it became clear that this was a much deeper UX problem than a mere UI issue. It was critical to get a solid communication bridge going with the client.

As this was a project with an hourly rate, the client was more than happy to cooperate in any way to minimize the ping-pong feedback between us. We stuck with MyBalsamiq going forward and I asked them to convert their existing hand drawn sketches into wireframes in MyBalsamiq. This also changed their perspective, making them consider aspects that hadn’t occurred to them on paper

Since then we have greatly improved our workflow and there has been much less need for client ‘hand-holding’. Now I’d never consider opening Photoshop until the client had given the wireframe their blessing, short-circuiting the need for any major re-working at the Photoshop design stage.

This workflow is beneficial even for the Balsamiq Desktop users, but even moreso for MyBalsamiq as all project files and assets are synced across the group site, allowing you to shorten the communication bridge with your client.

Kickin’ RSS?

While perhaps not a killer feature, MyBalsamiq offers an RSS feed. Users can subscribe to see any changes made on the site. Geek it up, RSS lovers!

Of Wires and Frames

MyBalsamiq offers some distinct advantages over its Desktop counterpart, which thanks to latest advancements in web technologies, can offer an experience almost as smooth as a native application.

To be frank, I don’t see many reasons to select Balsamiq Desktop in a world that has MyBalsamiq. If you aren’t limited by your budget you might come to the same conclusion.

Let us know your thoughts about this in the comments!

Frequently Asked Questions about Balsamiq Wireframes