Introducing Wirify: The web as wireframes (archived)

Update Apr 2011: This is an archived version of the original Wirify introduction.
For all the latest on Wirify please visit Wirify.com.
» Wirify Pro with OmniGraffle, Balsamiq Mockups, Microsoft Visio and SVG (for Adobe Illustrator and other applications) export functionality is now available.
Wirify is a bookmarklet that lets you turn any web page into a wireframe in one click. Latest version and instructions are available on the Wirify website. Chinese translation: 翻译此页中

Interaction designers spend a fair bit of time creating and revising wireframes in the early phases of our online projects. Whatever your take on wireframes is, they are a mainstay in the user experience professional’s toolkit. Although typical wireframes are essentially dead documents, they’re extremely helpful as thinking and communication tools during a project. We even have several great websites dedicated to sharing your wireframes and wireframing techniques with other designers.

Still, wireframes are essentially a one-way street, a journey from the website concept and high-level information architecture to visual comps and ultimately real HTML, CSS and interactive behaviour. Once the site is live, you never go back to the wireframes. Until now.

Wirify lets you turn any web page into a wireframe

Wirify is a bookmarklet that lets you turn any web page into a wireframe in one click. It’s lightweight and works in many modern browsers. To use Wirify drag the link below to your Bookmarks toolbar (or right-click > Add to Favorites in IE):

Upward arrow☒ Wirify by Volkside

I agree to the terms of service by accessing, installing or using Wirify

Then go to your favourite web page and click “Wirify by Volkside” in your bookmarks toolbar – it’s as simple as that!

Please note that by accessing, installing or using Wirify you agree to the terms of use.

Jussi PasanenWirify is created by Jussi Pasanen for Volkside, based in Melbourne.
Follow @jopas on Twitter, view Jussi’s LinkedIn profile or read his bio.

The following wireframes have been created using Wirify and besides basic cropping and resizing they are completely unedited:

New York Times - Original vs Wirify wireframe

Source: The New York Times

Additional examples: Wikipedia (source) YouTube (source), Yahoo (source)

Why would anyone want to do that?

There are some compelling reasons for viewing a live web page as a wireframe – moved to the Wirify homepage (28 Jan 2011)

Inspired by Web Without Words

Wirify is heavily inspired by Paul Armstrong’s Web Without Words, explained below in his own words:

web.without.words started simply as a way for me “practice what I preach” — to visually represent my core belief that hierarchy, grid systems and uniformity ultimately lead to a more natural user experience. By showing the overall structure of any website, by stripping naked all the distractions of text and ads and images and showing a site for what the eye unconsciously perceives.

I loved the idea when I first saw it and like others thought it would be awesome to be able to de-word any website at a click. Wirify does that.

Wirify tips, tricks and limitations

Wirify tips, tricks and limitations have been moved to the Wirify homepage (5 Jan 2011)

Wirify terms of use

Wirify terms of use have been moved to the Wirify homepage (5 Jan 2011)

By accessing, installing or using Wirify you agree to the terms of use. (Added on 24 Dec, just so this is clear.)

You can find the permanent home of Wirify here – some of the above content has now been moved there. (5 Jan 2011)

Let us know what you think!

This is the very first public version of Wirify and it’s still wet behind the ears. Keep us posted with your feedback or comment below and we’ll see if we can make it better!


Video introduction, and a question (added 22 Dec)

Here’s a quick one minute video introduction to Wirify:

The next video shows a mockup of Wirify that allows you to control the level of detail between the original page and the wireframe.

Here’s my question for fellow interaction designers and information architects:

Would the level of detail control actually be useful in your (re)design work, or is it just a gimmick?

I am not entirely convinced that the benefits outweigh the added complexity. Feel free to post your comments below or contact me on Twitter via @jopas or @wirify. Thanks again!


This page last updated on 22 Apr 2011

This entry was posted in Announcement, Experiment, Interaction design, Online service, Wireframing and tagged , , , , , , , , , . Bookmark the permalink. Both comments and trackbacks are currently closed.

30 Comments

  1. Posted 21/12/2010 at 2:40 pm | Permalink

    Wow, what a fantastic response to Wirify on Twitter and elsewhere and it hasn’t even been 24 hours yet! Massive hat tip to all of you for trying it out!!

    All your feedback is most welcome, feel free to comment here or drop me a line on Twitter (@jopas). Future Wirify updates will also be available on Twitter (@wirify).

    Cheers, Jussi

    Ps. I wanted to add that Wirify would not have been possible without jQuery, you guys are doing a fantastic job! Also big thanks to Tommy Saylor for his excellent bookmarklet article on Smashing Magazine.

  2. Posted 21/12/2010 at 10:04 pm | Permalink

    awesome! very usefull for my planning jobs. thanks and keep the good work 🙂

  3. Posted 22/12/2010 at 12:33 am | Permalink

    Incredibly, incredibly awesome. Very useful as a starting point for wireframes if you have a site you like and a client wants something similar (but overall different).

    The only thing I don’t like is that the box in the upper right isn’t able to be hidden. It actually blocks elements of a page which is annoying…

    (Note: I moved this here from the Tools/Wirify page so it’s listed along with the other feedback. -Jussi)

  4. Posted 22/12/2010 at 12:49 am | Permalink

    Well done Jusi! It is an excellent tool!

    However it seems that it doesn’t work correctly in IE 8 and win 7.

    Also i would like to suggest making your promotional window a little more flexible so that it doesn’t messes up with the wireframe when making a screen capture.

    Finally i would like to make a suggestion for future releases. It would be nice to be able to turn on and off the HTML elements on the wireframe.

    Keep up the good work!

  5. fractalfrog
    Posted 22/12/2010 at 2:58 am | Permalink

    One word: AWESOME!!!

  6. Posted 22/12/2010 at 6:45 am | Permalink

    Hi there,

    Just wanted to share my thanks for this neat tool. I’ve been using it for making screenshots of sites, and then testing them at our usability testing service.

    I find testing wireframes like these is a really useful step in the process because users don’t get distracted by the content, and focus much more on the layout than anything. This saves me having to create wireframes for my testing and get’s them out there even quicker.

    So a big thanks, and merry christmas.

  7. Posted 23/12/2010 at 5:48 am | Permalink

    Re: additional detail
    It could be useful if the determinants for each level of detail were evident. As an example, frequently I’d like to be able to estimate how many words are fitting in a headline, but not be distracted by the images or ads. (I pretty much always want to differentiate between ads and images.)

    If the determinants were clear, or even selectable, I would appreciate choosing the level of detail.

  8. Posted 23/12/2010 at 7:24 am | Permalink

    Marcin Treder, the co-creator of UXPin paper prototyping kit, has posted an interesting take on Wirify over at UXaid: Wirify and the problem of wireframes without content. I have re-posted my response below.

    Hi Marcin,

    Thanks a lot for your post; it’s the most detailed commentary on Wirify I have received so far.

    As mentioned in my email I am not sure if I completely follow your first point above. I am assuming you’re talking about creating wireframes, something we UX people do on a weekly if not daily basis?

    The main point of Wirify is not in fact the creation of wireframes at all, it is analysing existing page structures using them. All Wirify does is provide a slightly different perspective, which hopefully helps you notice new or different patterns by filtering out the “noise” of the fine detail. Wirify is not meant to replace any existing tools in the UX toolbox but rather supplement them.

    Secondly and most importantly – content is a vital point of any design, which just can’t be deleted. Using Aristotle terminology: design is only a form for the matter (using words of Aristotel;)) of content.

    This is a fair point and I fully agree that content is essential, and also that there is an interplay between form (structure) and content.

    The idea of "Web without words" is completely invalid. I can give you vivid example.

    I like your example but I’m afraid we are approaching this from quite different angles. A Wirify wireframe is not a replacement for the wireframes we normally create – it’s merely a filter you can apply on existing web pages. You can’t use Wirify to solve a design problem (no software can do that) but you can use it to help you see how others have solved similar or related problems.

    Have a look at Lee Munroe’s Checking Your Site For Visual Hierarchy and Paul Olyslager’s quick and easy ways to improve your website’s usability posts. They talk about the classic usability evaluation trick of using a blurred screenshot of a web page to see what really stands out and to analyse the visual hierarchy of the page. Wirify is an alternative version of this technique.

    Finally, have a look at this video I posted today showing a prototype version of Wirify that lets you control the level of detail and gradually transition from the original web page (most detail) to the wireframes (least detail) and back: Wirify – Controlling wireframe level of detail

    I wonder if that would address some of your concerns about Wirify “deleting” the content?

    Cheers, Jussi

  9. Posted 23/12/2010 at 12:52 pm | Permalink

    Jussi, thanks for the recognition above and in the comments of the .js file (Hope you don’t mind I peeked!). Wirify is a very cool little tool. Kudos! Definitely going into my bookmarklets folder!

    If I may suggest… It’d be nice if I could hide, minimize, or move your wf-info div. It’d also be super helpful if there were a switch or button to toggle back and forth between the original and wirified view, instead of just normalizing when clicking the page*.

    *If you do stay w/ this technique, I’d suggest adding cursor: pointer to the CSS to kinda alert that some interactivity will take place upon click.

  10. Posted 23/12/2010 at 1:05 pm | Permalink

    Hi Tommy, cheers for having a look and I am glad you like it! The original intention was to release this as a Firefox Add-On but that would have been a hassle, not to mention limiting, compared to way it’s done now. So thanks again for your original Smashing article!

    If I may suggest… It’d be nice if I could hide, minimize, or move your wf-info div. It’d also be super helpful if there were a switch or button to toggle back and forth between the original and wirified view, instead of just normalizing when clicking the page*.

    Yes I have received similar feedback from others and I’m definitely considering this, probably by making the info box movable. Good point regarding the cursor, too!

    Ps. I will get back to the other comments above once we get through the silly season.

  11. Posted 23/12/2010 at 9:28 pm | Permalink

    The discussion continues over at the UXaid blog, have a look at
    Wirify and the problem of wireframes without content for more.

    Also, here are my replies to the earlier comments above.

    David: The only thing I don’t like is that the box in the upper right isn’t able to be hidden. It actually blocks elements of a page which is annoying…

    Nikos: Also i would like to suggest making your promotional window a little more flexible so that it doesn’t messes up with the wireframe when making a screen capture.

    I hear you guys, see my response to Tommy above. I will certainly look into this.

    Nikos: However it seems that it doesn’t work correctly in IE 8 and win 7.

    Yeah IE support is not a strong point at the moment, and there are issues on Opera too. Overall Wirify need some comprehensive cross-browser testing regime…

    Nikos: Finally i would like to make a suggestion for future releases. It would be nice to be able to turn on and off the HTML elements on the wireframe.

    Do you mean controlling which HTML elements (e.g. P, IMG, SPAN) to include in the wireframe? It’s an interesting idea but I’m afraid it would complicate the interface unnecessarily. I’m more inclined to something akin to the level of detail control shown in the second video above.

    As an aside, you may have noticed that hovering over any of the elements in the wireframe displays the underlying HTML element type in a tooltip.

    Lydia: It could be useful if the determinants for each level of detail were evident. As an example, frequently I’d like to be able to estimate how many words are fitting in a headline, but not be distracted by the images or ads. (I pretty much always want to differentiate between ads and images.)

    If the determinants were clear, or even selectable, I would appreciate choosing the level of detail.

    So essentially label or number each level and explain what’s shown when it’s selected? That’s a very good point, I’ll have a think about it.

    Thanks heaps for your feedback everyone! Feel free to add yours below if you like.

  12. 马甲
    Posted 24/12/2010 at 12:33 am | Permalink

    好,非常好!

  13. Posted 24/12/2010 at 4:48 am | Permalink

    I love love love that you made a nice tool, based on my meager works at web.without.words. Part of my process on that site was to “breakdown” the site when viewed without content – which hopefully gives more insight into what I consider the most lacking and most important part of design (web or otherwise) and that is hierarchy. I’m almost tempted to use your tool and just post my critiques and reviews, which is to say, this is really awesome. Great job!

  14. Posted 24/12/2010 at 6:16 am | Permalink

    Paul: I love love love that you made a nice tool, based on my meager works at web.without.words. Part of my process on that site was to “breakdown” the site when viewed without content – which hopefully gives more insight into what I consider the most lacking and most important part of design (web or otherwise) and that is hierarchy. I’m almost tempted to use your tool and just post my critiques and reviews, which is to say, this is really awesome. Great job!

    Hey Paul, that’s awesome feedback, thank you so much! Wirify would not exist today if it wasn’t for web.without.words.

    That’s a great way of explaining why viewing pages this way is useful, too. It’s important to keep in mind that Wirify is just a tool and it will not do the analysis for you. I would strongly encourage everyone – especially those who are critical of the concept – to check out your work at Web Without Words and the way you review and discuss the reconstructed version of the page.

    I personally like the aesthetics of your wireframes better with the higher contrast and coloured accents. Wirify is all grayscale intentionally though, in part to have that “traditional” wireframe look but also to be more impartial to the different element types (as colour implies importance).

    Thanks again Paul!

  15. 黄皮肤
    Posted 24/12/2010 at 11:02 am | Permalink

    不懂英文真吃亏,下载链接在哪?

  16. Posted 24/12/2010 at 12:27 pm | Permalink

    黄皮肤:不懂英文真吃亏,下载链接在哪?

    Please view a Chinese translation of this page using Google Translate. Hope this helps!

  17. Noel
    Posted 27/12/2010 at 12:04 am | Permalink

    Hi,

    I really like the tool and have a few comments:

    I would like a coding system or something to be able distinguish at a glance between e.g. images v. advertisement without hovering – I would want to print out the wireframe via a screengrab and find myself having to guess at the moment.

    The advertisment is cool but much too large in its current location, obscuring parts of the wireframe itself. I have no problem with the presence of it.

    The accuracy is fairly good but could use certainly use some improvement.

    Thanks

  18. looping
    Posted 27/12/2010 at 8:47 am | Permalink

    Thanks

  19. Posted 27/12/2010 at 9:14 pm | Permalink

    Great tool and very useful in planning new projects. Only comment for the slider / less detail section would be that ‘can the text be replaced with lorum ipsum instead of blocks?’
    Other than that – perfect

  20. Posted 05/01/2011 at 9:22 pm | Permalink

    We have just released an update to Wirify – you can now move the information overlay and Wirify runs better on Opera and Internet Explorer. Read Wirify January update for details.

    Couple of quick comments on the feedback above:

    Noel: I would like a coding system or something to be able distinguish at a glance between e.g. images v. advertisement without hovering – I would want to print out the wireframe via a screengrab and find myself having to guess at the moment.

    Hi Noel, that’s an interesting idea. Do you mean showing normal images and interactive elements like Flash differently? This should be possible to do, I’ll have a think about it.

    Noel: The advertisment is cool but much too large in its current location, obscuring parts of the wireframe itself. I have no problem with the presence of it.

    The information overlay can be moved around in the latest version of Wirify, I hope that helps.

    Noel: The accuracy is fairly good but could use certainly use some improvement.

    Yes, this is a known issue. In a way this is a good thing though, as the created wireframe is indicative only. It should be sufficient for high-level analysis of the page structure and perhaps as a starting point for a redesign, however it should never be a project deliverable or replace an actual, designed wireframe.

    Paul: Great tool and very useful in planning new projects. Only comment for the slider / less detail section would be that ‘can the text be replaced with lorum ipsum instead of blocks?’ Other than that – perfect

    Thanks Paul! I have decided to leave the level of detail control out for now as I think it would compromise the simplicity of the tool. The “lorem ipsum” replacement idea is interesting though, food for thought 🙂

    Thanks again for all your feedback!

  21. Vin Turk
    Posted 06/01/2011 at 6:08 am | Permalink

    Loving this tool. Any idea if there might be a way to export/import these wireframes into Balsamiq or another prototyping/wireframe tool?

    -Vin

  22. Vin Turk
    Posted 06/01/2011 at 6:20 am | Permalink

    In one of your youtube videos you adjust the level of detail which starts to show original elements within the wireframes, but my version of Wirify 1.2.1 doesnt seem to have this. Was it removed?

    (Note: I moved this here from the Wirify homepage so it’s listed along with the other feedback. -Jussi)

  23. Posted 06/01/2011 at 9:33 am | Permalink

    Vin: Loving this tool. Any idea if there might be a way to export/import these wireframes into Balsamiq or another prototyping/wireframe tool?

    Thanks Vin! There are no plans for export functionality at this stage, however we may consider it if there’s enough interest. That would most likely be a separate commercial version of Wirify though.

    Vin:In one of your youtube videos you adjust the level of detail which starts to show original elements within the wireframes, but my version of Wirify 1.2.1 doesnt seem to have this. Was it removed?

    That slider was actually just a mockup version and never made it to Wirify. As briefly mentioned in the January update post I’ve decided not to include the wireframe level of detail control at this stage as it could compromise the simplicity of the tool.

  24. Posted 07/01/2011 at 1:35 am | Permalink

    This is quickly becoming one of my favorite tools. Love it, thank you for making such an easy-to-use tool!

  25. Posted 07/01/2011 at 4:01 am | Permalink

    Wirify is very nice, would really like to export the content in to a customizable format. Would be great for developing A/B tests of landing pages and products pages. At least that’s what I’d use it for this second. Good deal, certainly needs to the ability to modify the output.

  26. Posted 11/01/2011 at 5:33 am | Permalink

    Great tool! I teach wireframing at the Art Institute and it’s really helpful to have a tool that can show students in real time what a site looks like behind the scenes!

  27. Posted 12/01/2011 at 8:52 am | Permalink

    Ive been doing wireframing on complex website and I love how I can grab some sample websites, wireframe it as a starting block. KODOS!

  28. Posted 15/01/2011 at 8:46 pm | Permalink

    Brief update: We are currently working on export capability for Wirify, read full details in our latest blog post: Preview: Exporting Wirify wireframes to OmniGraffle. We have also released an update to Wirify with better rendering of overflow elements.

    Some responses to your latest comments above:

    Hi Annette, thank you for your kind words!

    Michael, please see announcement above, I hope that’s close to what you were thinking.

    John, thanks, that’s great to hear! I always thought Wirify would be useful for teaching and learning, and your comment certainly supports that.

    Carey, I’m glad you’re finding the tool useful, cheers!

  29. mangesh jog
    Posted 18/01/2011 at 3:24 pm | Permalink

    awesome! very usefull and thanks and keep the good work.

  30. Posted 27/01/2011 at 4:18 pm | Permalink

    Cool concept but needs some work. Ran it on a couple of my sites and wasn’t so hot. Ran it on Yahoo and it was better but still not what I was hoping.

51 Trackbacks

  1. […] This post was mentioned on Twitter by Johannes Kleske, Sami Niemelä, Mark Jensen and others. Mark Jensen said: This is great: Make every website into a wireframe with just the click of a button — http://2kg.dk/d7 /via @jkleske @wirify […]

  2. […] Volkside | Introducing Wirify: The web as wireframes […]

  3. […] delicious i løbet af ugen. Facebook Ramps Up Big E-Commerce Drive – BusinessWeek – Volkside | Introducing Wirify: The web as wireframes – Feature Story – Lisa Strausfeld | Fast Company – iPad GUI PSD – Version 2 […]

  4. By Inner Monolog on 21/12/2010 at 4:16 am

    Wirify…

    Wirify is a bookmarklet that lets you turn any web page into a wireframe in one click. There are some compelling reasons for viewing a live web page as a wireframe: The wireframe allows you to step back and see the big picture. By tuning out the detail…

  5. […] y queréis discutirlo con el cliente basando las ideas en la estructura de alguna web ya existente, Wirify os puede ayudar, y mucho.Se trata de un bookmarklet (un enlace que se puede arrastrar en la barra […]

  6. By links for 2010-12-20 | James A. Arconati on 21/12/2010 at 11:02 am

    […] Volkside | Introducing Wirify: The web as wireframes Wirify is a bookmarklet that lets you turn any web page into a wireframe in one click. (tags: web-developer web-developer/tools reference web-developer/css business firefox free firefox/tools) […]

  7. […] Volkside | Introducing Wirify: The web as wireframes Interesting tool: Turn any web page into a wireframe (and tips for why you might do this). Wirify http://bit.ly/gDaaye via @use_this – J. Todd Bennett (jtoddb) http://twitter.com/jtoddb/status/16874072419868673 (tags: via:packrati.us) […]

  8. […] Wirify è un bookmarklet che permette di trasformare qualsiasi pagina web in un wireframe con un solo click. […]

  9. […] many modern browsers Website Share and […]

  10. By Wirify « D'log on 22/12/2010 at 1:32 am

    […] Wirify is a free service that lets you turn a web page into a ‘wireframe’. It’s packaged as a bookmarklet that links to the service, but it only seems to work in Internet Explorer. […]

  11. […] dem Bookmarklet Wirify lässt sich eine Website mit nur einem Klick in einen Wireframe verwandeln. Warum das nützlich […]

  12. […] Wirifi es un bookmarket (enlace que se carga en vuestro navegador si lo arrastrais) que al hacer clic en él, nos transforma la web que estemos visualizando en un borrador o wireframe con la misma estructura, con sus bloques de texto, imágenes, etc .. sin mostrar el contenido. […]

  13. By Wirify: The Web as Wireframes on 22/12/2010 at 4:26 am

    […] are helpful to UI designers as a thinking tools, to show page structure and hierarchy. In comes Wirify. Wirify is a bookmarklet that lets you turn any web page into a wireframe in just one […]

  14. […] | Wirify -> Bookmarklet Wirify by Volkside Via | […]

  15. […] 「Wirify」は既存のWebページをワイヤーに変換してくれるブックマークレットです。 […]

  16. By a two way street | Hiding in plain sight on 22/12/2010 at 10:44 pm

    […] via Volkside | Introducing Wirify: The web as wireframes. […]

  17. […] informações no link: http://www.volkside.com/2010/12/introducing-wirify-the-web-as-wireframes/ Tags: Wireframe LikeBe the first to like this […]

  18. […] Wirify è un bookmarklet che permette di trasformare qualsiasi pagina web in un wireframe con un solo click. […]

  19. […] do Wirify, um bookmarklet que transforma qualquer página da web em wireframe. Eles não ficam perfeitos […]

  20. […] une agence basée à Melbourne (Australie) propose un bookmarklet très intéressant baptisé Wirify. Le principe est simple, il transforme le site sur lequel vous vous trouvez en wireframe!Rien de […]

  21. By Wirify: The web as wireframes | UX Booth on 24/12/2010 at 3:53 am

    […] The web as wireframes | UX Booth UX BoothWirify: The web as wireframesShare This Share Browse UX BoothPreviousNext Close This function resizeIframe() { var height = […]

  22. By Le petit journal du Web — Décembre 2010 on 24/12/2010 at 10:42 pm

    […] Wirify — Un Wireframe est une représentation stylisée d’une page, appellé également maquette «fil de fer» qui permet de faire apparaitre les zones principales sans se soucier des détails. Cette maquette sert de base pour le travail du graphiste. Wirify affiche la version «fil de fer» du site affiché dans votre navigateur, ce qui s’avère pratique pour faire apparaitre la structure d’une page. via John’s Graphisme. […]

  23. […] Wirify: Transformer un site en Wireframes en un clic Génial ! : via LegZ […]

  24. […] 26, 2010Have you ever wanted to see the wireframe of a particular website? Now you can!Check out Wirify, which is a simple bookmarklet that allows you to instantly grab the wireframe from a website. […]

  25. […] » Volkside | Introducing Wirify: The web as wireframes Ett genialt verktyg som gör tvärtom: det transformerar vilken webbplats som helst till wireframes. Användbart när det finns flera favoritsajter att utgå ifrån som modell. Det är inte perfekt ännu, men idén är grym. […]

  26. […] sur le blog de Jonathan Menet, Wirify est un bookmark permettant de voir un site web en mode Wireframe/ Maquette conceptuelle. Cet outil […]

  27. […] Wirify is a beta release and has a few known issues, which ultimately don’t detract from this very useful […]

  28. By SoMe Soup » Wirify on 02/01/2011 at 1:39 am

    […] across this nifty little tool that should help designers and content managers etc visualize and manage […]

  29. […] Wirify es una nueva herramienta que nos permite convertir cualquier página web en un wireframe con tan sólo un click. Funciona con la mayoría de navegadores, simplemente tienes que arrastrar el link que te proporcionan sobre tu barra de favoritos. Más tarde, cuando quieras convertir cualquier página web en un wireframe únicamente tendrás que hacer click sobre el botón “Wirify by Volkside” que aparecerá en la barra de herramientas de tu navegador y en un par de segundos estará listo. Así de fácil. […]

  30. […] bookmarklet that lets you turn any web page into a wireframe in one click. I find it really helpful.http://www.volkside.com/2010/12/…Insert a dynamic date hereCannot add comment at this time.  Jesse Korzan, Creative […]

  31. By Wirify | Charlotta Baltazar on 07/01/2011 at 9:39 am

    […] testade precis det fantastiska bokmärkesverktyget Wirify skapat av Volkside.  Wirify ger dig möjlighet att enkelt skapa en wireframe av en redan […]

  32. By Auto website wireframes on 10/01/2011 at 8:57 pm

    […] Wirify is a small bookmarklet that lets you quickly see the wire-frame of any website with a single click. For example below is a wireframe of the current site. […]

  33. […] convert any web page into wireframes that you can study or use for your own work. » Visit WirifyCSS Resetr: View and compare CSS resets CSS resets are a must have in any stylesheet in order to […]

  34. […] the website. There’s also a Facebook app for creating docs with your Facebook friends.WirifyWirify is a nifty bookmarklet that lets you turn any website into a wireframe, instantly. So next time you […]

  35. By Wirify | The D on 12/01/2011 at 2:01 am

    […] Wirify lets you turn any web page into a wireframe Written by nuzzaci in Uncategorized at January 11, 2011 3:59 pm, Comments […]

  36. […] projects – here’s a little Chrome extension you should check out and make good use of. Wirify by Volkside Wirify is a bookmarklet that lets you turn any web page into a wireframe in one click.It’s […]

  37. By Indextwo | Web as Wireframes on 17/01/2011 at 9:03 am

    […] Sometimes, it’s good to stop and take a look back at current designs. I’ve already experimented using this on a few sites, including my own. Link: Wirify → […]

  38. […] Volkside | Introducing Wirify: The web as wireframes […]

  39. […] at få inspiration til at arbejde med mere komplekse wireframes er at studere andre sites. Her kan Wirify hjælpe dig. Wirify er et bogmærke, der kan vise et wireframe af hvilket som helst website med et […]

  40. […] […]

  41. […] speram (şi mai sper?) să scriu cândva. De exemplu despre inteligentul şi utilul bookmarklet Wirify, care “transformă” un sit într-o structură schematică uşor de explorar: ţineţi doar […]

  42. By Media Digitali a Nudo « Il Giornalaio on 20/01/2011 at 4:07 pm

    […] questo processo può essere di ausilio Wirify, bookmarklet che inserito nella barra dei preferiti consente di visualizzare la struttura della […]

  43. […] Volkside Share and Enjoy: Tags: browsingonline communicationweb designwebsite development […]

  44. […] Wirify gives you another way too see the relationship between text and graphics on a page.  This is handy when you are looking at complex pages and you want to see the relationship between the number of graphics and the amount of text on a site, and you want to see where these elements appear respective to one another in a schematic. Or if you just want to use the layout of another site to inspire you for your own site. […]

  45. By Wirify – Volkside | Bag of Brains on 26/01/2011 at 3:53 am
  46. […] http://www.volkside.com/2010/12/introducing-wirify-the-web-as-wireframes/ Posted in Design, Web | Tags: Wireframe, Wirify « Surfing The Web With Kinect You can leave a response, or trackback from your own site. […]

  47. By Partial Recall » Links for 2010-12-22 on 27/01/2011 at 11:02 am

    […] Introducing Wirify: The web as wireframes [Volkside – Dec 20, 2010] – Wirify is a bookmarklet that lets you turn any web page into a wireframe in one click. It’s lightweight and works in many modern browsers. To use Wirify drag the link below to your Bookmarks toolbar. […]

  48. […] sur le principe simplissime d’un bookmarklet. Il vous suffit de récupérer le lien sur la page de Volksite, de l’ajouter à vos favoris. Ensuite, un clic sur ce favori lorsque vous visitez un site et […]

  49. […] 現在見ているページをワイヤーフレームにするブックマークレットVolkside | Introducing Wirify: The web as wireframes […]

  50. By Resources for Wireframing - Flatsourcing on 02/02/2011 at 6:56 am

    […] Wirify – A great tool that allows you to take any site and turn it into a wireframe (or at least the foundation of a wireframe). […]

  • Volkside products

    • Naview helps you create easier navigations through prototyping and testing
    • Wirify is a bookmarklet that lets you turn any web page into a wireframe in one click
    • Tweetpond is an underwater-themed ambient visualisation of Twitter
    • More …