Friday, September 29th, 2006
In-Browser Wireframe Prototyping with Frametastic
<p>Christian Romney was sick of doing wireframesin powerpoint and photoshop, so he created a quick and dirty in browser wireframe tool called Frametastic, which uses Prototype and Script.aculo.us under the covers.Now, before you think this is some uber-cool web development tool, let me give you the caveats:
- It’s currently Firefox only for reasons I’ve just plain not bothered to figure out (I’m sure it’s something trivial)
- It keeps state only during the lifespan of the page – refresh, close window, or navigate away and all your work is lost (eventually, I’ll add a dead-simple Ajax call that persists the stored wireframes to the server)
- It has some small UI bugs like when you name a box, the label keeps focus instead of the box itself
Having said all that, I find it to be extremely useful in my daily work because I don’t require anything more sohpisticated. I’m a big fan of lightweight tools and lightweight processes – I’d call them agile, but don’t want to incur Steve Yegge’s wrath ;). Feel free to download the code and improve it – I’m releasing under the terms of the MIT License – just please be kind and share your improvements with me. Oh yeah, here’s the obligatory demo. Enjoy!
If you’re wondering how to get started, just click and drag a box in the whitespace…
Related Content:












[...] Tired of using unsuitable tools for drawing wireframe diagrams, Christian Romney has built Frametastic (via Ajaxian). It is something that has come out of a personal itch, so maybe not production quality, but it works just fine within its limitations. The cool thing is that it is like a local web application. Unzip the archive and open the index.html in there with your Firefox to start it. Just drag with your mouse in the white area to draw boxes, don’t worry, you can resize and move them later. This is a great tool to build a wireframe as you discuss. The irritating thing for me was, if you have the “Begin finding as you type” feature enabled in the Advanced options, you will not be able to use the shortcuts of this tool. So disable it and give it a go. [...]
This is actually pretty cool. Although it’s not as fancy or complex as other Ajax toys out there, but this is simple, light and easy to use
Do you have a package for windows?
where to find that frametastic? all the links go to a bad gateway… I looks great but does it really exist?
thanks
HI
Why don’t you try our tool – http://justproto.com
it’s developed with Mootools JS framework
it’s also browser based
easy to use
fast and reliable
and fetaures unique real-time online collaboration
thanks for trying!