Tuesday, April 27, 2010

Create Wireframe Site Mockups With An Eclipse Plugin (Works in CF Builder Too)

Earlier today, Dan Vega tweeted:

"this is pretty freaking cool, works in ColdFusion Builder! http://wireframesketcher.com/blog"

So I went and checked it out. WireframeSketcher is an Eclipse plug-in that lets you create wireframe page mockups, similar to Balsamiq Mockups.  I download the trial version and took it for a brief spin. You simply create a new blank Screen file and start dragging and dropping page elements from the Palette view (labels, text boxes, tabbed panes, etc.) onto the Screen, resizing and re-positioning as you go. When you're finished, you can export the file as a PNG or a PDF file.

The WireframeSketcher website mentioned that the layout information for each screen was stored as XML data, so the thought crossed my mind that maybe you could feed the XML to a parsing script that could use that data to output actual HTML/CSS. Unfortunately (as I kind of suspected), the positioning of the wireframe elements is achieved with hard-coded x and y pixel coordinates, and it would be hard to translate that into the kind of relative or "in the flow" positioning used on most web pages.

Still, if you want to add a wireframing tool to your toolset and you already use Eclipse or an Eclipse-based IDE (by the way, these guys specifically name Flash Builder and ColdFusion Builder as compatible IDEs, so props to them for being aware of the Adobe tools), this is probably worth checking out. You can try it out for free for at least a week before you get prompted to pay for a license.