My Balsamiq: Wireframes on the Web

Share this article

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.

Balsamiq account creation

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.

Notebook themes

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.

Site Settings menu

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.

Client sketches

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

What are the unique features of Balsamiq Wireframes?

Balsamiq Wireframes is a rapid wireframing tool that reproduces the experience of sketching on a whiteboard, but using a computer. It offers a clean, intuitive interface that allows users to drag and drop pre-made widgets onto a canvas. The tool also supports multiple controls, including buttons, checkboxes, trees, and more. It’s designed to help you work faster and smarter, with features like smart drawing and sketch skin for a hand-drawn look.

How does Balsamiq Wireframes compare to other wireframing tools?

Balsamiq Wireframes stands out for its simplicity and ease of use. It’s designed to be intuitive, so even non-designers can create and share wireframes. Unlike some other tools, Balsamiq focuses on low-fidelity wireframes, which help to keep the focus on content and functionality, rather than aesthetics. This makes it a great tool for brainstorming and initial design stages.

Can I collaborate with others using Balsamiq Wireframes?

Yes, Balsamiq Wireframes supports real-time collaboration. This means you can work on a project with your team simultaneously. It also allows you to share wireframes with clients or stakeholders, who can then provide feedback directly on the design.

Is Balsamiq Wireframes suitable for beginners?

Absolutely. Balsamiq Wireframes is designed to be user-friendly, making it a great choice for beginners. It offers a range of tutorials and resources to help you get started, and its drag-and-drop interface makes it easy to create your first wireframe.

What platforms does Balsamiq Wireframes support?

Balsamiq Wireframes is available for both desktop and cloud. The desktop version is a standalone application that runs on Mac, Windows, and Linux. The cloud version runs in your web browser, so you can access it from any device with an internet connection.

Can I export my wireframes from Balsamiq?

Yes, Balsamiq Wireframes allows you to export your wireframes to PNG or PDF. This makes it easy to share your designs with others, even if they don’t have Balsamiq.

How can I learn to use Balsamiq Wireframes?

Balsamiq offers a range of resources to help you learn how to use their tool. This includes tutorials, documentation, and a community forum where you can ask questions and share tips with other users.

Is there a trial version of Balsamiq Wireframes?

Yes, Balsamiq offers a 30-day free trial of their wireframing tool. This gives you full access to all features, so you can see if it’s the right tool for you before committing to a purchase.

What kind of support does Balsamiq offer?

Balsamiq offers comprehensive support for their wireframing tool. This includes a detailed help center, email support, and a community forum. They also offer resources like tutorials and documentation to help you get the most out of their tool.

Can I use Balsamiq Wireframes for mobile app design?

Yes, Balsamiq Wireframes is suitable for both web and mobile app design. It offers a range of pre-made widgets for both platforms, so you can easily create wireframes for any type of project.

Elio QoshiElio Qoshi
View Author

Elio is a open source designer and founder of Ura Design. He coordinates community initiatives at SitePoint as well. Further, as a board member at Open Labs Hackerspace, he promotes free software and open source locally and regionally. Elio founded the Open Design team at Mozilla and is a Creative Lead at Glucosio and Visual Designer at The Tor Project. He co-organizes OSCAL and gives talks as a Mozilla Tech Speaker at various conferences. When he doesn’t write for SitePoint, he scribbles his musings on his personal blog.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week