by Toby O'Brien

There's a plethora of applications out there that will give you the tools to create a professional looking set of wireframes to share with your clients and stakeholders during the design of a website. However I've recently been drawn to the concept of going 'lo-fi'.

Whilst wireframes are an essential part of a successful web project, there is the danger that a disproportionate amount of time can be spent on this aspect of it. Wireframes are a useful tool to convey early design considerations and information architecture, but ultimately the real deliverable is the website or application itself.

Usually the process of designing a new application or website will be to start off with some ideas sketched on a bit of paper or white board. These will then be iterated through in real-time, first with an internal team of developers and designers, and then in a workshop with stakeholders.  I've found that these are usually highly productive and beneficial sessions at the end of which you have a set of 'lo-fi' wireframes. I've then gone away and documented the wireframes in a more polished format, using the excellent Omnigraffle and a library of professional looking components. These get forwarded to stakeholders which then results in further rounds of iteration and amendments.

Whilst the wireframe documentation can be very detailed and look great, sometimes this final round of iteration can be quite time consuming, and potentially counter productive in the grander scheme of the success of the project. Here are some of the issues I've encountered:

1. The wireframes look like an end-product in themselves. There is then a gap in expectation if the font, headings, icon library etc are different  or if a button has been moved from one place to another in the final application.
2. Whilst the wireframe should convey functionality and basic information architecture, by putting too much detail in them it's taking away the opportunity for the designer to innovate of their own behalf.
3. The more detailed the wireframe gets, the more likely the client is to get hung up on ensuring that every detail has been considered prior to signing it off.
4. Once you start building the website, more often than not - you realise that some of the design decisions you made in the two dimensional world of the wireframe, don't work as well when transferred to a web page. In the course of a build you will find more innovative or user-friendly solutions to problems. If the wireframes and application don't match up, it means that you then  potentially then have to go back and go through a process in change management and updating documentation that could have been avoided.
5. With the advent of AJAX,  there is increased reliance on inline light-boxes and content being hidden and revealed using animation. It becomes increasingly time consuming and confusing to make wireframes of these interactions.
6. Whilst there is a tendency for the key stakeholders in a project to go through the wireframes in detail - many of the end users don't get involved at this point, and even if they are, many be won't be used to seeing this sort of abstracted representation of a website.

With a 'lo-fi' approach, you can potentially get stakeholders less hung up on the minutiae of detail, and focus more on the functionality of what the wireframes are attempting to portray. For the most part, the first tangible experience of the design that users will get will be after you start building. It's at this point you start to get the real quality feedback to the design. If you spend less time in the iteration of wireframes - you can spend more time incorporating this valuable feedback in to the actual application.

With this in mind here are some tools that I came across that can be used to achieve that 'lo-fi' look.

Tools for creating lo-fi wireframes

Pencil and paper

Simple and cost effective. You can use graph paper if you're not so confident in drawing straight lines!

Omnigraffle templates

For those not so confident with the pen, here are a few options that have that 'lo-fi' hand drawn look that will help to focus the client on the concept rather than graphical design:

• Web Sketch Interface v2 - made by apirak (http://graffletopia.com/stencils/459)
• Sketch wireframe - made by davidpereira (http://graffletopia.com/stencils/445)
• Wireframe Sketch - made by radiorental (http://graffletopia.com/stencils/414)

Plug-ins

I also came across these plugins for platforms that we use in-house:

• http://wireframesketcher.com/ - This offers seamless integration with Eclipse - the IDE of choice amongst our developers
• http://www.balsamiq.com - Offers integration with Jira - which means that wireframes could be created both internally, by customers and shared through our tracking system

Word, Powerpoint, Open Office

Sometimes a series of nested tables created in your desktop application of choice might be all that's required.