Auto website wireframes

Creating wireframes is one of the essential tasks of any web designer or information architect, and with a plethora of tools available it has become an easy task. Wireframes give you a birds eye view of the site before you actually commit to a design. It is also instructional to see the designs of other site, but then you have go to the drawing board and create one yourself. Wirify makes the job easier for you.

Wirify is a small bookmarklet that lets you quickly see the wire-frame of any website with a single click. For example below is a wireframe of the current site.

Wirify constructs the wireframe using CSS techniques and images. Only if it could export the design to formats understandable by page creation softwares.

But why would anyone want to do that?

According to the author:

1. The wireframe allows you to step back and see the big picture. By tuning out the detail it lets you study the building blocks of the page and their relationships.

2. The wireframe is a great learning and teaching tool. Many of the design concepts that underpin page layouts become easier to identify and analyse in a wireframe. Think visual hierarchy, whitespace, symmetry, chunking, grid systems, golden ratio, rule of thirds, etc. etc.

3. The wireframe is a useful redesign tool that stops you getting bogged down in detail in the very early stage of a website redesign project.