When I design interactive applications or websites, I tend to look at a ton of stuff before I begin to get inspiration, and to analyze things like site structure and flow. I am a big proponent of not reinventing the wheel. If someone has done something you like, use it to your advantage. I’m not saying ripoff their design, or plagiarise their work, but instead look at what they have done, and use that inspiration to help you create your project.
Today I discovered a new tool to help me understand things like page structure and layout. The tool is Wirify from Volkside. Wirify is a bookmarklet that lets you turn any web page into a wire-frame in one click. It’s lightweight and works in pretty much all modern browsers. It’s easy to use Wirify. Simply drag the link with the green arrow on Wirify’s page to your Bookmarks toolbar. When you find a page you want to see in wire-frame mode, click the bookmarklet in your tool bar.
<iframe title=”YouTube video player” width=”480″ height=”390″ src=”http://www.youtube.com/embed/XgzPHFRx-xM” frameborder=”0″ allowfullscreen>
So, Why would you want to use Wirify?
Well there are bunch of reasons.
First: Wirify lets you strip away all the visual clutter and see the big picture, the underlying frame-work of the visual page structure. By tuning out the detail it lets you study the building blocks of the page and their relationships.
Second: The wireframe becomes a very useful redesign tool that helps prevent you from getting bogged down in visual clutter and detail in the very early stage of a website redesign project.
Third: Using the wire-frame is a great learning and teaching tool. Many of the design concepts that structure page layouts become easier to identify and analyze in a wire-frame. Think about things like visual hierarchy, whitespace, symmetry, chunking, grid systems, golden ratio, etc.