4 ms·

Bookmarklet turns any webpage into a wireframe

101 points by arpit 16y ago

LooksieAtMe 16y ago
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 http://www.balsamiq.com) and ForeUI (http://www.foreui.com http://www.foreui.com) mockups. Find out more and try it out here: http://mockgen.looksie.me http://mockgen.looksie.me. Cheers, Tim
matt1 16y ago
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 http://www.jmockups.com
- ohashi 16y ago
  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 16y ago
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...?
- zachallaun 16y ago
  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."
  - jopas 16y ago
    Hi zachallaun, please see my response to mcantor below - hope that clarifies a bit.
    - zachallaun 16y ago
      I can see how someone could use it, then! Cheers on the release.
- keyle 16y ago
  Maybe to analyse the current website's structure against a wireframe concept for the next version?
  - jopas 16y ago
    Spot on keyle, website redesign is one of the key uses we're pitching Wirify for.
- prawn 16y ago
  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 16y ago
    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.
jopas 16y ago
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-as-wireframes/#why 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-wireframes-to-omnigraffle/ 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
jackolas 16y ago
It seems really encumbered, lots of logging, restrictive license... I mean it seems nice but theres no guarantee its going to be around.
- jopas 16y ago
  The Wirify terms of use are outlined here: http://www.volkside.com/tools/wirify/#terms-of-use 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 16y ago
Aren't most people trying to go from wireframe to webpage? lol
- jopas 16y ago
  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-as-wireframes/#why http://www.volkside.com/2010/12/introducing-wirify-the-web-a...
seancron 16y ago
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 16y ago
  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 http://www.youtube.com/watch?v=wuKJVZRDjRo We've decided to ditch this idea for the time being though due to the extra complexity.
vlisivka 16y ago
You may also look at "Topographic view" or "Topographic page layout" bookmarklet. See http://www.squarefree.com/bookmarklets/webdevel.html http://www.squarefree.com/bookmarklets/webdevel.html .
- jopas 16y ago
  Very interesting, thanks for posting! Do you have author or other details for the original source?
- jopas 16y ago
  Thanks for the new link vlisivka.
infocaptor 16y ago
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 16y ago
  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 16y ago
    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

101 points by arpit 16y ago

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 http://www.balsamiq.com) and ForeUI (http://www.foreui.com http://www.foreui.com) mockups. Find out more and try it out here: http://mockgen.looksie.me http://mockgen.looksie.me. Cheers, Tim

matt1 16y ago

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 http://www.jmockups.com

ohashi 16y ago
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 16y ago

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

zachallaun 16y ago
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."
- jopas 16y ago
  Hi zachallaun, please see my response to mcantor below - hope that clarifies a bit.
  - zachallaun 16y ago
    I can see how someone could use it, then! Cheers on the release.
keyle 16y ago
Maybe to analyse the current website's structure against a wireframe concept for the next version?
- jopas 16y ago
  Spot on keyle, website redesign is one of the key uses we're pitching Wirify for.
prawn 16y ago
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 16y ago
  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.

jopas 16y ago

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-as-wireframes/#why 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-wireframes-to-omnigraffle/ 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

jackolas 16y ago

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

jopas 16y ago
The Wirify terms of use are outlined here: http://www.volkside.com/tools/wirify/#terms-of-use 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 16y ago

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

jopas 16y ago
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-as-wireframes/#why http://www.volkside.com/2010/12/introducing-wirify-the-web-a...

seancron 16y ago

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 16y ago
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 http://www.youtube.com/watch?v=wuKJVZRDjRo We've decided to ditch this idea for the time being though due to the extra complexity.

vlisivka 16y ago

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

jopas 16y ago
Very interesting, thanks for posting! Do you have author or other details for the original source?
jopas 16y ago
Thanks for the new link vlisivka.

infocaptor 16y ago

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 16y ago
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 16y ago
  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