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!
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:
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").
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:
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.
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. -->
<!-- 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 mockups.
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.
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
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.
