Wireframe Strategies: The Right Level of Detail

Jared Spool’s UX thought of the day caught my eye this morning. It linked to this fairly old podcast from Chris Farnam, discussing wireframe strategies.

Having been caught in the downward spiral of Balsamiq wireframes more than once (you know the one – you start with something simple and you end up with something… not simple) it appealed.

How do you use wireframes and how detailed do you think they need to be in order to be optimally effective?

This one is a very interesting topic and quite close to home at the moment. I think it depends on the end goal and your audience. So if sketches are going to get you where you need to go, do as much with those as you can before you transition to online methods. But as soon as you need to start having more tidy wireframes that hint at behavioural aspects, moving through to tools like Balsamiq is a good idea. I like Balsamiq for the fact it still gives people the feel that it is design in progress, a rough draft so to speak.

But then in some cases people can understand, and respond better to high fidelity wireframes. One example that I’ve had recently, was that because we’re using google material design components, we’ve got an illustrator file where someone wonderful has examples of components used. It has been quicker for us to mock up in illustrator, and style these, than to create our own similar thing in Balsamiq. Unfortunately it can give the wrong impression, as people don’t see all the beginning sketches and thought that went into it before it got to that stage. These are easier if you are trying to sell concepts too.