State Based HTML Wireframes with Polypage

January 17th, 2009

Ben pointed me to an interesting set of HTML wireframes which use Polypage. Polypage expands HTML wireframes or mock-ups and allows for the creation of page states. Furthermore, the various states are independent of each other and can be toggled on a small top menu to affect the page view. Say for example you want to show your wireframes to your client in the “logged out” and “first time visit” states. Polypage allows you to click through all your wireframes to demonstrate such a case. Later on when you decide to demonstrate the “logged in” state, all you do is toggle it in the top menu and continue your presentation.

The technique was initially developed at Clearleft, and Richard Rutter explains how to use it better. Here are two more sets of wireframes using this technique which contain more page states to explore.

Agreed its not for everyone, but if you have a even a basic understanding of XHTML / CSS, then something like this is well within reach. You don't need to be an expert at anything I've used: its all pretty simple.

You don't have to be particularly advanced to wireframe in html/css as it doesn't need to be semantic, cross browser or production quality. Hell, you could even use pre-built libraries like the Blueprint framework. And if you can understand css you can use polypage.

I think if you're working on the web you need to have a basic knowledge of what makes it tick. So i'd say it makes more sense to learn html/css than another software tool. It's more useful at least.