Create and Collaborate on Mockups with myBalsamiq

Wireframing and mockups have become the de rigeur in today’s world of web and app development — it’s a process that keeps communication clear and helps everyone (clients, designers, developers, and even UX folks) get on the same page on a project. One of the best tools for the job is Balsamiq, a suite of apps and plugins that encourage rapid yet detailed wireframe creation, sharing and collaboration.

Today we’ll take a look at the suite’s newest app, a web app named myBalsamiq. It’s packed with features that not only make prototyping easy for designers, but also allow coworkers and clients to share feedback and discuss ideas effortlessly. And hey, it looks like it might even be fun to use. Let’s sign up for an account and see how it works.

Like the article? You should subscribe and follow us on twitter.

Overview

myBalsamiq is a web-based wireframe creation app that allows you to create mockups, link them together, and share and receive feedback on them from stakeholders on website and app development projects. It can even import/export files for use with its companion desktop app, and offers a variety of plans with free 30-day trials for you to check out.

Viewing mockups in a myBalsamiq project

Viewing mockups in a myBalsamiq project

Pricing

Plans for myBalsamiq start at US$12/month for three active projects, unlimited mockups and users, and SSL security, and go up to US$249/month for the Enterprise plan which scores you 100 active projects. You also get 50% off the price of the desktop app (sticker price: US$79), which is a nice deal if you don’t want to go web app only.

It’s a bit pricier than competitors like iPlotz and Mockingbird, but a little less than HotGloo. Thankfully, all plans come with a free 30-day trial and you don’t need your credit card to sign up (though you’ll need to enter those details after your trial period). myBalsamiq is available for free for classrooms, non-profit organizations and open-source projects.

The dashboard on your first login

The dashboard on your first login

Getting started

To get started with myBalsamiq, you’ll need to enter a company name and choose a company URL. Once you’ve done so, you can access your projects at this URL and also invite clients and colleagues to work with you on them here.

A project in myBalsamiq consists of mockups related to that project as well as assets (graphics files like logos and backgrounds, PDFs like style guides and text files, for example, up to 100MB in size). You can invite clients and colleagues into your company space and then selectively add them to projects — the whole process is made easy to manage with email-based invites.
Projects get their own customizable book cover in the dashboard for at-a-glance identification. From here, you can also upload assets for use in multiple projects, which are accessible separately whenever you need them.

Creating mockups

Once you’ve named a project, you can start creating mockups using myBalsamiq’s vast library of interface elements suitable for prototyping websites and apps. There’s everything from browser chromes and iPhone outlines to buttons to image placeholders to accordion menus to dropdowns to… let’s just say there’s a comprehensive set!

Create mockups quickly and easily

Create mockups quickly and easily

It’s usually a good idea to first add a frame to create your layouts in, such as a browser chrome. You can easily duplicate mockups to create multiple consistent pages quickly (and save changes to all of them at once). Plus, mockups can be linked to each other for an interactive clickable presentation by configuring elements (links, buttons, etc.) and pointing them to mockups in your project.

Upload assets to use in your mockups

Upload assets to use in your mockups

The interface is very user-friendly, and only requires dragging and dropping elements onto the canvas. You can add text labels, resize, group, align and color these as you wish. And of course, you can import your own assets like logos and pictures for use where needed (or even UI elements — check out a bunch of free ones I’ve curated on Pinterest). You can even go beyond mockups and create diagrams to explain app processes or user interactions. There are also two skins to choose from, to give your wireframes either a clean or hand-sketched look.

Collaborating on projects

When your mockups are ready, you can launch the prototype to view your project in all its full-screen glory for presentations. You can also invite others to view (and edit, if you like) your project, comment on mockups and propose alternative versions too. myBalsamiq shows you a contact list of users on your projects and you can start a Skype chat or call with everyone on the project when they’re online.

Communicating with team members and clients is easy

Communicating with team members and clients is easy

Comments and versions are tracked, so you don’t have to worry about your ideas getting mucked up at any point. Email notifications alert involved members of changes and comments on active projects. The app also allows for easy project-/company-wide access control so you can ensure that your team and clients see only what they need to and nothing they don’t.

Team members can comment on mockups and propose alternatives

Team members can comment on mockups and propose alternatives

Using myBalsamiq

To test-drive the app, I built a few mockups for a couple of projects, including one for a graphic designer friend’s online portfolio. myBalsamiq made it easy to translate my notebook sketches, ideas and references into wireframes that I could share with my client within a few minutes to discuss and get feedback on, and negated the need for strenous email relays that I know from experience get out of hand rather quickly. It’s nice to know to that projects can be downloaded (for use with the desktop app), archived and exported as PDFs whenever required.

Full-screen presentation mode with active links

Full-screen presentation mode with active links

Nice touches

myBalsamiq has been around for a while, and instead of showing its age, offers some very clever features that make it a joy to use:

  • Use common keyboard shortcuts like Shift to select multiple elements or to resize while maintaing proportions, F2 for renaming labels, and so on
  • Group and adjust items easily with smart alignment guides
  • Smart UI elements like an accordion menu that understands it has items which people will use as links
  • Mockups can be used with Balsamiq, an Adobe AIR-based desktop app (compatible with Windows, Mac and Linux)
  • Auto-generated mailing list email address to contact everyone on that project by writing to that single address
Save changes to multiple mockups at once - a nice touch indeed

Save changes to multiple mockups at once – a nice touch indeed

Conclusion

Even though it’s a little more expensive than some of the other options out there, myBalsamiq is still one of the best because it’s so well built and usable. I’d like to see an HTML5 version if the developers can manage it (without any reduction in performance) and more UI elements (particularly for Windows Phone and Android) introduced in the future, but that’s about it. This is a great tool for working with teams on projects simple and complex — if you’re building something for the web, give myBalsamiq a try.


Summary

myBalsamiq allows you to quickly create clickable wireframes, get feedback from stakeholders and collaborate on them to create brilliant websites and apps.

9
  • http://www.esspressions.com Esspressions

    This software looks really nice and has great interface. I would really like to give it a try, and see if it can actually replace my old school sketch book. :)

theatre-aglow
theatre-aglow
theatre-aglow
theatre-aglow