Balsamiq ❤ UX.StackExchange.com

Hello friends!

As you should know by now, our main goal as a company is to help rid the world of bad software, one user interface screen at the time.

We try to do so by making and constantly improving Balsamiq Mockups, by giving our software away to schools and UX teachers, by highlighting software we love to use, by sponsoring blogs and events that teach the world about Usability and User eXperience, and more.

If helping others build more lovable software is your passion, we want to help you. Simple as that.

Today we are thrilled and honored to introduce our latest initiative in this area: a new, free version of Balsamiq Mockups, integrated with UX.StackExchange.com.

If you don't know what StackExchange is, you've been missing out. It's a collection of community-edited and moderated question and answer websites, each dedicated to becoming the single best online resource on a number of different topics. The most famous StackExchange site is StackOverflow.com, the ultimate Q&A site for programming questions. Other popular StackExchange sites are Startups.StackExchange.com or English.StackExchange.com, about the English Language and its Usage. See a full list here.

About a month ago we were excited to see that UX.StackExchange.com launched publicly, and thanks to the long beta period had already become a wonderful resource for anyone interested in creating better software.

Almost immediately, we noticed that people were attaching images made with Balsamiq Mockups to their questions or answers to make them more clear.

Here's a few examples:

Shortly thereafter, ux.stackexchange user Moshe Berman posted this question:

A few days later, I got an email from Joel Spolsky asking if we could make it happen. Clearly, we jumped at the opportunity, it' such a good fit with our mission!

A few mockups later (shared between the teams via myBalsamiq of course), a couple of weeks of coding, and here we are!

It's free for you to use, and - in case you're wondering - it's free for StackExchange to host.

The Integration

StackExchange developer extraordinaire Benjamin Dumke-von der Ehe was able to integrate our core wireframe editor really nicely.

When you first ask a question or submit an answer, you can see our little smiley icon in the StackExchange editor.

Click it and the Balsamiq Mockups editor will pop up in the browser.

Create your wireframe or import an existing BMML (from Mockups for Desktop for instance), then hit Save and Close and voila', the mockup is added to your question.

You can add text above and below, or add more wireframes to the same question.

To edit an existing mockup, just click the "edit the above mockup" link in the preview panel.

Iterating

Taking someone's wireframe and proposing an alternate design is a very important part of every UI discussion.

Here how to do it:

edit the original question/answer containing the mockup you want to improve copy the part between <!-- Begin mockup and End mockup --> hit cancel go back to your answer in the text editor and paste the code you just copied look down in the preview and click on "edit the above mockup" to launch the editor make your edits, then hit "Save and Close". This will save your edited mockup as a copy, leaving the original untouched.

If instead you want to make your edits in Mockups for Desktop, you can simply click on the little "download bmml source" link under each wireframe, edit the BMML in Mockups for Desktop, export it (CTRL+E), then go back to the browser and use the Import XML feature in the editor to upload it.

Try it out!

This integration launched today, and we are already seeing the community using it successfully (two examples).

So, next time you have a doubt your UX ideas, why not ask the community at UX.StackExchange.com? Bookmark it now! 🙂

Many thanks to Benjamin Dumke-von der Ehe, Jarrod Dixon, David Fullerton, Michael Pryor, Joel Spolsky and everyone else at StackExchange who helped with this little project. As usual, you guys are a real pleasure to work with.

Onward!

Peldi for the Balsamiq Team