When to Use High Fidelity Wireframes

When I say ‘high fidelity’ for a wireframe, I mean it looks almost the same as the actual interface you are going to publish.  It most likely means there’s no design document (like a Photoshop design) based on the wireframe, and the wireframe is all you need to give to the UI developer.  The wireframe is proportionally accurate in terms of layout, spacing, font size and colours are very close to the actual thing.  Creating such a thing is actually quite easy using modern vector design software (Visio, OmniGraffle, InDesign, etc.).  It should cut a whole design step out of your process and speed up your specification-to-build cycle. However, you should not take this approach unless certain conditions exist:

This is a great approach when the visual design has been nailed down already.  That means there’s a styleguide with design rules and patterns already established and fixed.  Essentially you are dealing with Lego blocks – you have an array of modular features and the wireframe is just to show how you want to stack them together for a particular page or screen.  The best way to know that the modular pieces will fit well together and lay out well on the page is to make them as realistic as possible, and hence the high fidelity approach.  

The scenario when you absolutely should not use this approach is when the design is in flux.  As I’ve stated before, wireframes should never dictate design (nor vice versa). It’s also not the right approach when you’re breaking out of existing capabilities of the user interface, because that’s basically creating new design. This is an important realization if you’ve been in evolution mode for a long time – try to spot early on that you’re not re-using existing features and switch to a concepting and design mode instead.  The high fidelity wireframe is 100% evolution not revolution, and trying to apply it when you need to innovate will end in poor results.

Filed under: creative delivery, information architecture, method, user interface , concepting, design, evolution, high fidelity, indesign, information architecture, lego, method, omnigraffle, revolution, visio, wireframes

Web Without Words Reveals Clutter Overload Is Still Common

I just came across this site which is doing a very interesting experiment in web UX analysis:

Web Without Words

When I look at these block schematics of high profile websites I’m horrified at how cluttered and complex they are.  It reinforces the manifesto I’ve previously put forth: customer experiences should not be this complex and intricate. Yet it’s a design approach which is sadly still very common.

Filed under: folly, presentation, style, trends, user interface , clutter, information architecture, schematics, web design, web without words

Wireframes

Wireframes usually come with a disclaimer like ‘not representative of actual design’ – this meaning that it’s an abstract schematic of the content and functions that need to be on the frame.  How abstract are they really though?  How many times has the final design radically deviated from the wireframe that you’ve seen?

A design process without wireframes is likely to be error-prone and unlikely to be well thought through.  I’ve done quite a few wireframes myself over the years and I’m a big fan.  However, I’ve also learnt that wireframes can be much more influential on final solutions than they should be, locking down the creative process and fixing a solution that isn’t the best.  

My approach: always work on creative concepts before or in parallel to the wireframe. I mean creative design and unfettered ‘what if’ solutioning.  Never let the creative be a step after the wireframes unless you’re able and willing to re-architect them as you proceed.

Filed under: creative delivery , information architecture, wireframes