Wireframing for faster website development

I have tried the approach listed in “Getting Real” by 37signals and I have great results.

The client was very happy because he can imagine his website.

Now I am considering to buy or make such nice tools :)


1. Pencil

Pencil (free) is a Firefox plugin that professes to enable you to build wireframes and prototypes. As a prototyping tool it’s quite good, allowing you to quickly put together a reasonably high fidelity mockup. However, be aware you’ll still need to produce the visual design elements for Pencil, as it relies on dragging and dropping pre-made graphical elements.

The output wireframe elements that ship with Pencil do tend to be based on the look and feel of a Windows desktop application. This really is undesirable for a web application, however you could modify this with your own page elements.

Another downside of Pencil is that its export functionality provides only a few image formats. This means that Pencil falls short of being a real interactive prototype development tool.

Balsamiq Mockups

Balsamiq Mockups (price:$US79, demo available) is an interesting product running on Adobe AIR. Its representation of the interface elements has a refreshing hand-drawn, sketch-like quality to them. This does help promote the degree of changeability of the wireframes, as they look very much like a draft. If you lack the skills to create hand-drawn sketches then Balsamiq is a useful tool, as it allows you to produce quality roughs. Balsamiq also offers a standard collection of interactive screen elements, which is helpful to start off with.

http://gomockingbird.com/ is like balsamia

https://www.jumpchart.com/ – for very simple pages- I cant find how to change the layout.


A java based.


Eclipse based plugin – http://wireframesketcher.com/

And a nice topic in stackoverflow http://stackoverflow.com/questions/55363/best-tools-for-creating-website-wireframes