

Bookmarklet turns any webpage into a wireframe - arpit
http://www.volkside.com/tools/wirify/

======
matt1
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>

~~~
ohashi
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?

------
mcantor
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...?

~~~
prawn
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.

~~~
jopas
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.

~~~
prawn
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.

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

~~~
jopas
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.

------
jopas
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...](http://www.volkside.com/2010/12/introducing-wirify-the-web-as-
wireframes/#why)

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...](http://www.volkside.com/2011/01/preview-exporting-wirify-wireframes-
to-omnigraffle/)

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

------
LooksieAtMe
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

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

~~~
jopas
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 :)

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

~~~
jopas
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...](http://www.volkside.com/2010/12/introducing-wirify-the-web-as-
wireframes/#why)

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

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

------
infocaptor
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 :)

~~~
jopas
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 :)

~~~
infocaptor
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

