Who thinks it's a good idea for StackExchange to integrate with Balsamiq for UX.StackExchange? I do, and I'd be really happy if we had the ability to make mockups on UX for UX.

This is something for SE to spend unicorn dollars on. Fogbugz has Balsamiq, UX should get it too!

share
2  
this would definetely give more quality to responses/questions –  Naoise Golden Jan 2 '12 at 18:11
    
status:planned Squeee! –  Ben Brocka Jan 26 '12 at 14:12
1  
I would propose Pencil instead. –  Octavian Damiean Jan 26 '12 at 18:09
add comment

4 Answers

up vote 39 down vote accepted

This is a great idea, and we've been working with the nice people at Balsamiq to make it happen. It's now enabled.

The editor has a new button:

UI wireframe button

Clicking it will launch the Balsamiq editor. This requires Flash to be available in your browser. Leaving the mockup editor will take you back to the Markdown editor, automatically inserting the mockup into your post (if you used "Save") or discard it (if you used "Close").

save and close buttons in the mockup editor

This was a somewhat peculiar project, since it's the first time anywhere on the Stack Exchange network that we launch another editor from within the Markdown editor. We have tried to keep the user experience around it as intuitive as possible; in particular, the following points were important:

  1. It should not get in the way of editing the regular Markdown source. To fix a typo in a post that contains a mockup, you shouldn't have to worry about the Balsamiq editor.

    We also didn't want to store the actual mockup data within the Markdown source, since this would mean tons of XML tag soup scattered in the post, making it harder to find your way around when editing.

    With or without mockups, the editing workflow should be as close as possible to what our users are used to.

  2. The mockup should stay editable. To make a change to an existing mockup, you shouldn't have to recreate it from scratch.

To reach these goals, here's what we came up with: The mockup you add to a post ends up as a regular image, as usual hosted by our image hosting provider Imgur. The markdown source contains a plain old Markdown image. The only difference to the "normal" case is that it is surrounded by HTML comments like this:

<!-- Begin mockup: In order to preserve an editable mockup, please
     don't edit this section directly.
     Click the "edit" link below the image in the preview instead. -->

![mockup](http://i.stack.imgur.com/...)

<!-- End mockup -->

These comments serve two purposes at the same time: They tell the user that this is a special image that has more to it than meets the eye, and they tell the Markdown editor that this image was created through the mockup editor, so it knows to offer an "edit this mockup" functionality. Our server knows the mockup data that was used to create this image, so it's possible to make changes to a mockup later (point 2.)

If you have any comments, suggestions, or bug reports regarding the mockup editing workflow (and, given the nature of this community, I'm sure you will), please post them here on meta.ux, tagging them .

This feature has the same reputation restriction as for posting any other images, i.e. you need 10 reputation unless it's a suggested edit.

share
4  
Neat idea! A writeup on this effort from Balsamiq: blogs.balsamiq.com/product/2012/02/27/uxstackexchange –  Grant Palin Feb 27 '12 at 19:18
    
Odd... I just tried to create a question with a Basalmiq mockup in it, but the control described above wasn't available to me. What am I missing? –  Gene Golovchinsky Mar 26 '12 at 3:25
    
@GeneGolovchinsky I don't know; you have the required rep. If you were looking for the smiley icon, that's not there anymore though: meta.ux.stackexchange.com/questions/824/… –  balpha Mar 26 '12 at 5:40
add comment

That's a great idea IMHO. Except for the dollars part. Balsamiq, or any wireframing tools manufacturer, for that matter, should be the one to pay SE, not the other way around.

share
    
No money exchanged hands, according to the blog @ balsamic? blogs.balsamiq.com/product/2012/02/27/uxstackexchange –  André Jan 15 at 9:27
add comment

I would be happy to provide a site license (for Mockuptiger) to SE for UX. My app is a php+mysql based so not sure what platform SE is based on?

MockupTiger is just like wordpress and HTML5 based so it should be easily hostable on any lamp or wamp stack

share
    
No Undo/Redo? oh oh! –  Roger Attrill Jan 10 '12 at 12:48
    
undo/redo is coming. but why the down vote? –  Nilesh Jan 11 '12 at 13:03
    
I don't know - the downvote wasn't mine. –  Roger Attrill Jan 11 '12 at 13:06
    
On Meta sites down-votes count as a sign of disagreement. –  Octavian Damiean Jan 26 '12 at 18:27
add comment

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .