👋🏽 We wrote a book! Order Wireframing for Everyone today →

Balsamiq

Toggle navigation

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:

  1. edit the original question/answer containing the mockup you want to improve
  2. copy the part between <!-- Begin mockup and End mockup -->
  3. hit cancel
  4. go back to your answer in the text editor and paste the code you just copied
  5. look down in the preview and click on "edit the above mockup" to launch the editor
  6. 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

Leave a Comment

Comments (24)

  1. I would like to see this implemented in all stackexchange websites that are programming related.

    Possible?

  2. 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 Guilizzoni
  3. Dude, where did this feature go? This feature is no longer on ux.stackexchange.com.

    Nick Panagopoulos
  4. 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. :)]

  5. Pingback: Enterprise vs Consumer: Product Development at Careers 2.0 « Blog – Stack Exchange

  6. 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%5D

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

  8. That’s a very good example of: building a better World! 😉

  9. i think you meant “know by now”

    [Peldi: fixed, thanks!]

    uxmatthew
  10. Good Guy Balsamiq.

    James Moriarty
  11. 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
  12. A smiley icon? Won’t people think this is for inserting emoticons?

    Vincent Murphy
  13. Brilliant!

    Oleg Bezuglov
  14. Awesome, this is fantastic!

    Meagan T
  15. 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

  16. Thank you for this major contribution to the site. We are very excited!

    JonShariat
  17. Flash? Really?

    Awful.

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

    Stefan Kendall
  18. Thank you very much for making this offering free to the UX community. Balsamiq rocks!

  19. 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!

  20. Very cool! Thank you for giving the UX community this opportunity!

  21. Looovely! The flexible integration with down/upload option is great.

  22. Thanks so much for this!

    Ben Brocka
  23. Awesome! This is a great resource for the UX community

    Rob Frye
  24. Very cool! Thanks for making this available.