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

Balsamiq

Toggle navigation

Balsamiq ❤️ UX.StackExchange.com

Learn about our free integration


Our main goal as a company is to help rid the world of bad software, one user interface screen at the time.

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

That's why we made a free version of Balsamiq, 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 Math.StackExchange.com or English.StackExchange.com, about the English Language and its Usage. See a full list here.

UX.StackExchange.com has become a wonderful resource for anyone interested in creating better software.

StackExchange User Experience Homepage

The Integration

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

Ask a question - StackExchange

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

Balsamiq Editor in StackExchange

Create your wireframe, then hit Save and Close and voila', it is added to your question.

Save and Close Balsamiq Editor in StackExchange

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

Ask a Question - StackExchange

To edit an existing wireframe, 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.
Comment on StackExchange - Balsamiq Wireframes

Try it out!