Wirify is a bookmarklet that lets you turn any web page into a wireframe in one click. It’s free, easy and fun to use. To use Wirify drag the link below to your bookmarks toolbar (or read detailed instructions):
Then go to your favourite web page and click “Wirify by Volkside” in your bookmarks toolbar – it’s as simple as that!
Read the original Wirify introduction (Dec 2010) on the Volkside blog for background information and discussion.
The following wireframe has been created using Wirify 1.5 and besides basic cropping and resizing it is completely unedited:
Source: The New York Times
One-minute video introduction to Wirify
Why would you use Wirify?
There are some compelling reasons for viewing a live web page as a wireframe:
- 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.
- 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.
- 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.
- The wireframe looks cool. You can now turn all the live sites in your portfolio into large wireframes and plaster them on your studio walls
Example: See page architecture without content bias
The following are direct quotes from Andrew Hanelly’s excellent post 3 Web Design Tools for Non-Web Designers Who Need to Explain Design Ideas:
How this is helpful: Biases are a hard thing to turn off when you’re looking at a site’s structure. It’s almost impossible not to be swayed by the content of a page when you should be evaluating the underlying architecture.
Wirify.com has been great for when I want to illustrate what makes a site great without people being distracted by the site itself. Sometimes I’ll Wirify something, take it into photoshop (or print it out) and write labels on the boxes to show how an idea would work for a project.
Thanks Andrew for sharing your experiences!
Here’s an example of using Wirify to compare homepage layout and structure between two major mobile phone manufacturers:
The page layout and structure of each example are the property of the respective website ownes.
This page last updated on 22 Apr 2011