Written by UKWDA on 31 July 2012
What is wireframing?
If you are unfamiliar with the term wireframing then you're not alone - it is something that we all do as designers, without even knowing it. When the idea of a website's layout enters your head, and you jot it down on a piece of paper - you're wireframing. Wireframing is the process of creating a basic visual guide to depict the layout of a website, its navigational properties, and how each of its pages interact with one another.
What makes wireframing so important?
Wireframing is an essential part of the design process, serving as a blueprint for everything that is to follow. Without observing and making proper use of wireframing, projects have a nasty habit of going over budget and way past deadlines. This means unhappy clients and lots of tedious remedial work, not to mention a bad reputation as a designer.
It is imperative for the design process that the fundamentals of a project are etched out this way. As a practicing web designer, you simply do not have the time to rework the functional aspects of a site, further on down the line - making changes to a wireframe sure beats making changes to a fortnight's worth of coding.
Wireframing is key to a unity of thought
Wireframing creates a focus by ensuring everyone understands the overall plan. Everything is stripped back to just the bare basics - no logos, no colour, just a series of boxes with one line descriptions that explain what'll be in the box - what'll be in that specific area, on the site.
Indeed, the client/designer relationship underpins the importance and essentiality of the wireframing process. We've all made the mistake of taking design concepts into a client that are awash with colour and all the vibrancy that hours of creativity produces, only to hear 'I'm not sure about that colour,' or 'I want the logo on the left side, not the right.' This is an unnecessary distraction when you're at a preliminary stage and you're trying to discuss the website's functionality.
A good way of defining wireframing might be as a precursor to anything aesthetic. Wireframing is all about ensuring that everything is correct, both in terms of functionality and locality, and that all the pages of a site are set out in a way whereby they link with one another in a logical way that is intuitive, and enhances the end user's experience. Get it right at the wireframing stage, and the rest of the project should run smoothly.
Streamlining design with wireframing software
Whilst many designers prefer to stick to the traditional pen and paper approach to wireframing, there are a multitude of software platforms available that are designed to improve the wireframing process. There are some major plusses to using wireframing programmes. For instance, there's the convenience of being able to remotely share the process with other members of a design team, and with a client, without having to be in the same place at the same time.
Tweaks can be made by a team member before being saved separately, making it easy to compare and contrast various versions of a wireframe before deciding upon a final solution that works best. Then there's the obvious benefit of being in an ambient environment - it's easy to visualise how a site's going to work when you're viewing the wireframe on a computer screen. Two major players in the world of wireframing software are Balsamiq, and Axure, but which one gives you more bang for your buck?
Choosing the right wireframing software
First off there's Balsamiq. You can see from their website that they're a passionate bunch with a fun approach to enhancing the process of web design. Their system has been created so that mockups can be created in a way that replicates the hand-drawn sketchiness of traditional wireframing. It is quick to use and easy to grasp, which means a lot if you're the type of person that gets easily phased by new software interfaces.
The sketchiness of the wireframes it produces are a real plus, because it encourages project contributors to have their say - nothing seems too precious. It's intuitive as well, seeming to know exactly what you want to do next. Perhaps the best thing about Balsamiq is that its entry-level version is free, meaning that you can jump in and see if it's right for you, without even thinking about your finances.
Then of course, there's wireframing's high chief, the almighty Axure. This is a programme that takes wireframing seriously, which is reflected in both the level of power that it gives you, and (unfortunately for some), the amount of time it takes to get your head around some of the great things it can do.
Axure almost bridges an indefinite number of gaps between what a wireframe is, and what a finished website is. You can build your wireframe up, layer upon layer, until you have a serious high-fidelity prototype. It's then that you're gifted with the one feature that sets Axure apart from its competitors - interactive HTML prototypes. This function gives you the ability to see how complex aspects of your finished website are going to pan out.
Which one is best for me?
When it comes to making a choice between the two, it's all down to your budget and the type of website that you're building. If you're still a relative web design newbie, or your bread and butter is boutique websites that stick to a limited number of pages, then you're likely to get everything you need from Balsamiq. Also, given that it's free to start off with, you've the added benefit of being able to test it out and, should you need to, upgrade to more enhanced versions of the software. If you find yourself outgrowing its capabilities then you can make the logical progression to Axure.
When it comes to Azure there is no denying that you're dealing with an absolute behemoth. There's things this programme can do that defy belief. Realistically, though, a lot of its features are dedicated to dealing with high level complexities that incorporate the concerns of large-scale businesses with large-scale websites. Axure is great if you have the time to learn it, and the money to invest in it, it all just depends on the amount of use you'll get from it.