Easier Page States for Wireframes

21 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

  1. Alex C.

    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!

  2. Justin Delabar

    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.

  3. Jonathan Snook

    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.

  4. Martijn van der Ven

    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.

  5. Arif Widianto

    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.

  6. Richard Rutter

    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);
        }
    )

  7. Lensco

    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!

  8. Martijn van der Ven

    @ 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.

  9. Gregor

    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!

  10. Steve Daniels

    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

  11. Andy Kent

    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.

  12. Rob L.

    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.

  13. Christian Watson

    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.

  14. Tarek Anandan

    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.

Impress us

Be friendly / use Textile