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

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.

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!

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

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

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!

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!

Dusan: One suggestion, it would be nice if this tool could mark navigation parts, images, header, footer . . . some HTML 5 markup.

Thanks Dusan, that’s a great idea. There’s some very rudimentary HTML5 support already in place, for example each canvas is displayed as an “interactive element” with the play symbol. I think Wirify wireframes will definitely benefit from the new semantic elements, and we’re looking at adding better support in the future.

Matt: [jMockups] lets you convert any website into a high fidelity mockup, redesign it, and share it wither others in a matter of minutes. For prototyping changes to existing sites, no other tool comes close (if I do say so myself).

Nice plug Matt In all seriousness, I had a quick look at the tool and it looks great. There’s a similar product called MockGen / Looksie by Tim Shnaider, too. It looks like the high fidelity mockup space is definitely heating up, good times for web designers all around I reckon!