For all the latest on Wirify please visit Wirify.com.
» Wirify Pro with OmniGraffle, Balsamiq Mockups, Microsoft Visio and SVG (for Adobe Illustrator and other applications) export functionality is now available.
Interaction designers spend a fair bit of time creating and revising wireframes in the early phases of our online projects. Whatever your take on wireframes is, they are a mainstay in the user experience professional’s toolkit. Although typical wireframes are essentially dead documents, they’re extremely helpful as thinking and communication tools during a project. We even have several great websites dedicated to sharing your wireframes and wireframing techniques with other designers.
Still, wireframes are essentially a one-way street, a journey from the website concept and high-level information architecture to visual comps and ultimately real HTML, CSS and interactive behaviour. Once the site is live, you never go back to the wireframes. Until now.
Wirify is a bookmarklet that lets you turn any web page into a wireframe in one click. It’s lightweight and works in many modern browsers. To use Wirify drag the link below to your Bookmarks toolbar (or right-click > Add to Favorites in IE):
Then go to your favourite web page and click “Wirify by Volkside” in your bookmarks toolbar – it’s as simple as that!
The following wireframes have been created using Wirify and besides basic cropping and resizing they are completely unedited:
Source: The New York Times
web.without.words started simply as a way for me “practice what I preach” — to visually represent my core belief that hierarchy, grid systems and uniformity ultimately lead to a more natural user experience. By showing the overall structure of any website, by stripping naked all the distractions of text and ads and images and showing a site for what the eye unconsciously perceives.
I loved the idea when I first saw it and like others thought it would be awesome to be able to de-word any website at a click. Wirify does that.
You can find the permanent home of Wirify here – some of the above content has now been moved there. (5 Jan 2011)
Here’s a quick one minute video introduction to Wirify:
The next video shows a mockup of Wirify that allows you to control the level of detail between the original page and the wireframe.
Here’s my question for fellow interaction designers and information architects:
Would the level of detail control actually be useful in your (re)design work, or is it just a gimmick?
This page last updated on 22 Apr 2011