Thanks for the kind words so far folks. Glad to hear that Polypage could come in useful for you too.

Martijn van der Ven wrote:

Is there any easy way that we could link the switching of states with on page elements? To use your example, make the login/logout link also toggle the mentioned state, and not only trough the bar at the top.

Yes. By attaching an event handler to a logout link you can call the Polypage function to change the state. Something like this:

$('#logout').click(
    function() {
      $.polypage.setState('logged_in',false);
    }
)

Very nice and useful! Thank you for sharing the plugin!

I’m a senior in high school, and having to do a large project for the community, I can see this as coming in very handy. I can’t wait to start using this!

Thank you!

We recently started using this technique and will never go back. Easy to show multiple page states in complex wireframes, as well as leave notes written specifically for the developers who will be working on implementing the intended functionality. Highly recommended and a great article.

I think this is a great solution. I’ve done prototyping like this before and it can get confusing when you have 3 or 4 different versions of a single page to manage the different states. It’s a lot easier to combine it into a single page. Another thing I’ve done is used a server-side framework to handle some of the conditional logic that you’re using JavaScript for but I can certainly see how prototyping like this is easier.

Good to know about polypage. It definitely makes wireframing easier.

Now that seems like one great plugin. I will surely test it out the next time I have to create some sort of demo design.

Is there any easy way that we could link the switching of states with on page elements? To use your example, make the login/logout link also toggle the mentioned state, and not only trough the bar at the top.

Good idea to use cookies and jQuery.

I already wants this for so long, but what gives, so little time to do. This will make my future wireframing projects easier. Thanks for sharing Richard.

Interesting,

thanks for the article and for open sourcing Polypage!

I love this. Wireframing ‘libraries’ or techniques often seem to take more time to implement than just making 5 slightly different HTML files. But this seems like a no-brainer, making clever use of CSS classes and javascript. Well done!

Thanks for introducing us to your tool! It looks useful and I can imagine wireframing not one but many sites with Polypage. Oh and I love jQuery :D

This is bloody brilliant! ‘Nuff said.

@ Richard Rutter :

"By attaching an event handler to a logout link you can call the Polypage function to change the state."

Thank you, I am not really practised in using jQuery but now I’ll figure out the rest of Polypage.

PS: I hope that the blockquote will show up outside the preview, otherwise this comment is going to look weird.

That’s fantastic stuff Richard – thanks for enlightening me!

this is by far the smartest approach for prototyping different states of one page I’ve seen so far. And I’ve seen a lot. You guys made my day – thanks so much!

Wow! This looks great. I’ll likely not use it myself as I’m more a php backend dev kinda guy, but this’ll be great for our designers. They’ll be able to get all the page states drawn up in the frontend code before we get to work with tying it altoghether with the backend.

Brilliant, thanks for pointing me in this direction :-)

Steve Daniels

Thanks for all the great PolyPage feedback everyone, and for such a great write-up Richard.

There’s only one extra thing that I think is worth noting and that is how easy PolyPage can make things when you hand a project over to a development team. For a dev to be able to read through wireframe source code and see plain english conditionals is very helpful, a lot of the time these translate directly into conditional code inside view templates.

For the third year running, I’ve been pleased to see 24 Ways show up again in my feedreader when December rolls around, and this article in particular made it worth the wait. Polypage looks like a really helpful tool, and one that would’ve been pretty perfectly suited for the project I delivered earlier today. At least there’s always a next time… Thanks Richard, Drew, et. al.

I’ll have to take a look at Polypage. Been resisting doing wireframes in html/css and exporting to interactive html from visio, but perhaps it’s time to switch over.

This looks like a great tool. I’ve been using the wireframing tool Oversite (review) for a while which enables you to create clickable wireframes that you can export to HTML.

However, the output is not as good as coding it in HTML from the outset. This would make it much easier to reduce the amount of mistakes that come from misinterpretation of how my wireframes should be presented and should function.

Anyone aware of anything newer that does this? The devs appear to have abandoned the project. The last update to the Github repo was three years ago and they stopped supporting anything beyond jQuery 1.4.1.