Blogging about our lives online.


Boxeddet - Another Wireframing Tool

After reading the article on about wireframing I thought to myself: "What the world needs now is another wireframing tool!"

Yes, the options are staggering. But in a way they all seemed very similar. My feeling is that if you want to sell a tool to a designer, the primary goal is not adding new functionality but simply adding a bit of unique visual flair to make it "pop".

Last night I hacked up a bit of code for a different type of tool. This one produces actual HTML layouts in the grey-box style. You just draw your div's inside the browser, and the DOM is dynamically updated.

I've put the code up on github, so go ahead and clone/fork/prod it and let me know what you think!

Get The Code!

Or you can Test drive it!


  1. Nice work! Okay, now I want to save the divs that I created in the tool. Can you set it up so I can grab the source? Also, if I navigate away, I lose the page I created... how do I get it back? ;)

  2. You can grab the source, but it won't look pretty. If you open Firebug/Safari Web Inspector, right click the html tag and "copy as HTML", you've got the HTML file. Put the css file in the same folder and it should look the same.
    Export HTML and user-named div's are first on the priority list.

  3. UPDATE! The latest on GitHub now has the "gatherCSS" function to take all the generated inline CSS and move it into a style declaration in the head.

    I've also added a few complementary box styles and a Markdown parser for easy HTML input.