Bookmarklet turns any webpage into a wireframe | Hacker News Reader

Bookmarklet turns any webpage into a wireframe

volkside.com

101 pointsarpit25 comments

This is very cool.

I'm working on something similar, which you might be interested in if you like this. jMockups, my startup, is a web app for designing high fidelity mockups. Kind of like a web-based Photoshop for designing mockups, if that makes more sense. I've been working on a new tool for the last two months that lets you import any existing webpage into jMockups, which means that you will be able to instantly redesign and share any webpage in only a few clicks. It's a bit buggy still which is why I haven't launched it, but I'm really excited about it. Combine that with a wireframe toggle that I plan on adding in a few months, and you've got a killer web-design tool (hopefully). :)

If you're interested in trying it, check out jMockups [1] and if you want early access to the import feature when it becomes available in a few weeks, shoot me an email: matt@jmockups.com.

[1] http://www.jmockups.com

Your demo was quite interesting to play with. How does one get to that point and where does one go from that point within your software?

I feel like a moron for asking this, because clearly at least 18 people liked it enough to upvote without explanation, but...

Why would I want to do this...?

Enables you to easily borrow someone else's layout as 'inspiration' that you can then tweak. Don't discount the number of designers/developers that use another layout (or elements of it) as a base to work from - I've seen many do it.

Before there's a "Plagiarising!" response, also keep in mind that the final product in this case usually looks nothing like the original but that an original often serves as a more effective starting point than a blank canvas.

Good points prawn.

Certainly if someone was to 'rip' an existing website design wouldn't they just grab the HTML+CSS directly? Wirify is definitely not intended, nor useful, for that.

In some cases. In others, you might be starting with a simplified wireframe (and these remove identifying brands, colours, etc) or you would screen capture and use it as a layout base in PhotoShop.

While I am largely asking the same thing, the only bit of answer I could find came from the video: "As you can see, the wireframe does expose a lot of the structural aspects of the underlying page, which can be useful for analysis."

Hi zachallaun, please see my response to mcantor below - hope that clarifies a bit.

I can see how someone could use it, then! Cheers on the release.

Maybe to analyse the current website's structure against a wireframe concept for the next version?

Spot on keyle, website redesign is one of the key uses we're pitching Wirify for.

I wish it didn't try to wireframe every object on the page.

In my opinion, wireframes are usually more helpful for organizing information on the page, than creating a perfect mockup of what the finished page should look like.

Lots of grey bars, as shown on the wireframe for this page, aren't very useful for organizing information. Instead, they make it seem much more cluttered and complex than it needs to be.

Fair points seancron. Wirify is already skipping quite a few HTML elements in its processing, however it certainly works better on some sites than others. I've found that proper 'semantic markup' also gives better results than old school table-based layouts for instance.

One of the earlier prototypes let you control the 'level of detail' in the wireframe: http://www.youtube.com/watch?v=wuKJVZRDjRo We've decided to ditch this idea for the time being though due to the extra complexity.

Mcantor, that's a fair question, please see "Why would anyone want to do that?" in my original introduction: http://www.volkside.com/2010/12/introducing-wirify-the-web-a...

Matt1, jMockups sounds cool, I'll have to have another look. We are currently working on OmniGraffle export for Wirify, here's a preview: http://www.volkside.com/2011/01/preview-exporting-wirify-wir...

Thanks everyone for having a look at Wirify, much appreciated! Give me a shout on Twitter if you like: @jopas

Hi there, we realised there were at least a couple people out there who didn't want to redo their sites as mockups, so we've created MockGen.

MockGen renders web pages as full blown Balsamiq (http://www.balsamiq.com) and ForeUI (http://www.foreui.com) mockups.

Find out more and try it out here: http://mockgen.looksie.me.

Cheers, Tim

It seems really encumbered, lots of logging, restrictive license... I mean it seems nice but theres no guarantee its going to be around.

The Wirify terms of use are outlined here: http://www.volkside.com/tools/wirify/#terms-of-use

As for guarantees on being around, there certainly aren't any, but hey it's the internet right :)

Aren't most people trying to go from wireframe to webpage? lol

Yes indeed, and Wirify doesn't really help you there :) However here's some of the situations where it might be useful: http://www.volkside.com/2010/12/introducing-wirify-the-web-a...

You may also look at "Topographic view" or "Topographic page layout" bookmarklet. See http://www.squarefree.com/bookmarklets/webdevel.html .

Very interesting, thanks for posting! Do you have author or other details for the original source?

Thanks for the new link vlisivka.

it is an interesting idea. I think one other tool that does this is the eclipse based plugin. I am working on a prototyping tool (mockuptiger.com) and I have this feature in the product dev plan, although not in the initial release :)

Great job Wirify! Certainly something for the designers to start from and then remove things they don't want. I think the NY times website is too crowded, you could have shown a less busy example :)

Thanks infocaptor! Do you know the name of the Eclipse plugin by any chance, I'd be very interested in having a look?

For a less busy example, try www.apple.com :)

I think it is wireframesketcher, I haven't tried it but I believe it can scan GUI objects and convert to wireframe. Not sure if it does web sites

Reply on news.ycombinator.com