UPDATE #2: Assembling Demos from balsamiq Mockups
I’ve received lots of very positive feedback on my Assembling Demos from balsamiq Mockups posts. However, there have been a number of people asking “How do you know what the hotspot rectangle position and dimensions are?”.
To that, I have an answer: look at the Mockups generated XML file! Here is an example for a Button:
<control controlID="23" controlTypeID="com.balsamiq.mockups::Button"
x="139" y="393" w="82" h="-1" zOrder="6" locked="false" isInGroup="-1">
<controlProperties>
<text>Push%20Me</text>
</controlProperties>
</control>
It will have the x, y coordinates for the top left corner of each item on the Mockup. For many, it will have the width (w) and height (h) too, however, if w=”-1″ or h=”-1″ it means Mockups is automatically determining the control’s width and height. In this case, you will just have to take a quick guess, try it, and refine until you get it right. Use the x, y, w, and h values as the starting point in your hotspot CSS markup. Test the demo page to make sure the hotspots are where you want them and tweak them if they are not.
Once you become familiar with the process and use my templates on the original post, it should only take a minute (or less) to layout a new Mockup demo screen!