Balsamiq ❤ UX.StackExchange.com

February 27, 2012 · Posted by peldi in Mockups, Mockups Extensions, Release Announcements · 24 Comments

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 
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

Comments (24)

Very cool! Thanks for making this available.

Tim
Feb 27, 2012
Awesome! This is a great resource for the UX community

Rob Frye
Feb 27, 2012
Thanks so much for this!

Ben Brocka
Feb 27, 2012
Looovely! The flexible integration with down/upload option is great.

Max
Feb 27, 2012
Very cool! Thank you for giving the UX community this opportunity!

Jim Walker
Feb 27, 2012
Yay! Thanks all – this will be a great addition to ux.stackexchange.com, enabling the community to easily present a mock up of ideas, scenarios, problems, and solutions in a consistent and editable fashion. And the ability to take the mock-up from a question, and adapt it separately in an answer is perfect. Just what we needed – I look forward to seeing it in action, and of course – using it!

Roger Attrill
Feb 27, 2012
Thank you very much for making this offering free to the UX community. Balsamiq rocks!

Kevin
Feb 27, 2012
Flash? Really?

Awful.

[Peldi: nice to meet you too Stefan! :)]

Stefan Kendall
Feb 27, 2012
Thank you for this major contribution to the site. We are very excited!

JonShariat
Feb 27, 2012
This is fantastic for use by Humanitarian Free and Open Source (#HFOSS) projects to bring the advice of UI and UX experts who may also be passionate about global social issues.

Gerardo Capiel
VP of Engineering
Benetech (.org)
http://socialcoding4good.org

Gerardo Capiel
Feb 27, 2012
Awesome, this is fantastic!

Meagan T
Feb 27, 2012
Brilliant!

Oleg Bezuglov
Feb 27, 2012
A smiley icon? Won’t people think this is for inserting emoticons?

Vincent Murphy
Feb 27, 2012
Hi,

very cool idea. I like it very much. However I must say that the integration could need some polishing. Imho it’s a little bit too complicated on how to edit a mockup in an answer or that the whole mockup block is so big.

Maybe some polishing would be nice :)

- Michael

[Peldi: definitely, we have plans to make that use-case much smoother. Stay tuned!]

Michael
Feb 27, 2012
Good Guy Balsamiq.

James Moriarty
Feb 27, 2012
i think you meant “know by now”

[Peldi: fixed, thanks!]

uxmatthew
Feb 27, 2012
That’s a very good example of: building a better World! ;)

Stefano Baraldi
Feb 27, 2012
Hey,

Thanks for the plug.

I want to point out that I only asked about the integration because I was given a copy of Baslamiq mockups as an open source contributor. I love it as much as I love StackExchange, so I suggested the integration. Thanks for the license!

Any chance I can get my website or SO profile linked to my name in the post?

Thanks,
Moshe Berman (.com)

Moshe
Feb 28, 2012
You guys at Balsamiq are extraordinary! seriously. Can I suggest speaking with the guys at Atlassian. Similar integration into their Atlassian Confluence wiki markup would be again…. extraordinary! :)

[Peldi: a Confluence plugin was our first product, check it out! http://balsamiq.com/products/mockups/confluence

Shane Reschke
Feb 28, 2012
Pingback: Enterprise vs Consumer: Product Development at Careers 2.0 « Blog – Stack Exchange
Why not on all stackexchange sites?

[Peldi: well, it's not very useful to philosophy, history, literature...we might expand to other relevant sites in the future, but let's see how this one goes first. :)]

Eric
Mar 03, 2012
Dude, where did this feature go? This feature is no longer on ux.stackexchange.com.

Nick Panagopoulos
May 17, 2012
It’s still there, but we changed the icon to look less like an emoticon and more like an “editing a wireframe” icon. Also, you need to be logged in and have enough points in order to use it (just like inserting images).

peldi
May 17, 2012
I would like to see this implemented in all stackexchange websites that are programming related.

Possible?

kimsia
Dec 11, 2012