Love them or hate them, wireframes are an important part of any design phase whether it is a website that is being designed or a mobile application. The wireframming stage helps the client and the designer focus purely on the functionality of the website or application under all the glitz and glam of the design.

Wireframes are essentially the stripped down version of your website. It allows members of your web design and development team as well as the client to focus on what the website is trying to achieve within the framework.

When designing wireframes, it is important not to be too concerned about the finer details within the wireframe. It is there to quickly communicate the ideas and functionality. Details can be refine during the design phase of a website.

Because of the wireframes simplicity, It is important that documentation,notes or even a presentation is provided with your wireframes incase they are misinterpreted by clients and other members of your team. Highlighting areas will stop others from glossing over important factors that the wireframe is trying bring to the forefront.

Some wireframming tools that we've like to use include, flair builder, Insitui, Sketchy for the iPad, OmniGraffle for the iPad, Balsamic, mocking bird, pencil project and don't forget the trusty pencil and paper (sometimes even a whiteboard for group collaboration).


Insitui Overview from Insitui on Vimeo.

At our little Sydney web design studio, PB Web Development, we find that wireframming is a very important step in the design phase of the website. It allows us to not only to form the structure and general layout of the website but also determine the main function of the website and it's particular pages at various points.

The Transit Lounge Wireframe


Being able to see from an overall perspective gives both the client, design and development a better understanding of what the page does, what needs to be designed, and what needs to be developed.

Simple usability testing can also be done at this point of the web design and development phase making sure nothing is a miss.

Another advantage that we find with the wireframes is that once they are confirmed with the client, design and development teams can be presented with the wireframes at the same time. Development can start with converting the wireframe into a working prototype and the initial design stages can also start concurrently.

If your not using wireframes in your current design and development processes then do look into it as it can very much improve communication between the clients and the designers and the development team.