Wireframing: Low-Fidelity or High-Fidelity?
When creating wireframes you have a couple of options – the first is to create low-fidelity designs which involve scribbling on paper, drawing on a whiteboard, or the use of software to create simple diagrams.
The other option is to use high-fidelity mockups that go a step further and typically include a range of design elements such as a logo, images, a colour scheme, and other basic graphics.
There are pros and cons to each of these approaches – low fidelity wireframes are very quick and cheap to produce. You can easily change and modify them to suit your needs or throw them away and start over from scratch.
The fact that they’re less formal can also be helpful when asking for feedback – it’s somehow easier to criticise something when it’s a rough draft as opposed to a high quality mockup (i.e. people don’t want to hurt a designer’s feelings).
On the other hand, high-fidelity mockups are much more polished – this can be useful for giving everyone a clear idea of how the interface will look and work, but they’re also very time-consuming and expensive to produce.
High-fidelity wireframes can also be confusing for clients – especially those who aren’t particularly tech-savvy as they can struggle to understand the difference between an interactive mockup and the final fully functional application.
So, which is the *right* approach to wireframing? Neither! It depends on the scope and context of the project you’re working on.
You need to consider what your goals are when using wireframes. Are they for your eyes only or do they need to be shown to colleagues and clients? Do you really need to use high-fi when low-fi will suffice? What kind of resources do you have – both in terms of time and budget?
It’s also important to note that you don’t necessarily need to use one approach or the other – it can be useful to start out with low fidelity wireframes and build up to more realistic and accurate mockups as you iteratively enhance the design.
But don’t obsess about which approach you use – remember that wireframes are simply a design tool that enable you to quickly test different ideas, highlight any potential issues, and ultimately help you produce a better design solution.
Chris Creed sums up the differences between low and high-fidelity wireframing and reminds that the choice should be made upon your objectives. I recommend checking out Chris’s Blog where he writes about interface design, usability and user experience.