Collaborative wireframes

Posted by Peter Labrow on 1 April 2009

I like to work in collaboration with clients, but in the early design stages, that’s not always a slick process. But I recently stumbled across some software that promises to change that.

It’s not often that you come across a piece of software that will change the way you work.

I remember when Adobe Acrobat landed, and suddenly how designers worked with clients changed forever. Previously, every design iteration required a printed proof and a face-to-face meeting. Acrobat changed all of that – the designer created a PDF from the design and e-mailed it to the client; design changes were picked up in a return e-mail or over the phone.

Yes, that saved costs – but the key thing I believe it brought to the design process was collaboration. Acrobat made it easier for clients to contribute, because they became part of the design workflow.

For many people, the first stage of creating a website is to sketch a wireframe. A wireframe is the most basic of layouts. Once you’ve identified with the client what needs to go onto the page, a wireframe will help the designer to understand how the various elements can be best laid out. Even in this electronic age, many wireframes tend to be hand drawn; indeed, creating a wireframe is one of the few times that I put actual ink on paper.

This makes it a poor vehicle for collaboration. Yes, I could scan it and e-mail it to the client, but what I tend to do is crack on converting the wireframe into the design, using a tool such as Fireworks. The finished results are polished, but that takes time. More importantly, you’ve raised expectations in terms of what the presented design will look like. Once elements of the wireframe become accurate representations, you don’t press on and ‘finish’ the design, with everything properly lined up and so on – otherwise it’s going to look like you’ve done a poor layout job.

So, then, the first thing the client sees visually could well be the design. That doesn’t make collaboration impossible, it just makes it more time-consuming, as it takes more time to effect each change.

We like to work in a collaborative way, in fact, it’s one of the things that our clients tell us they like about us. So I’ve often looked for a way of making the wireframe process faster and more inclusive.

Yes, there are loads of software packages out there to help you create wireframes – but they are either too expensive or too polished, focused on creating something that is closer to a design than a wireframe.

So I was pleased to stumble upon Balsamiq Mockups. Balsamiq Mockups does one thing: wireframes. It has no pretension of being a design package. The design elements which you add to a wireframe looked deliberately sketchy; almost hand drawn. They don’t always line up. They have wonky lines. They look fantastic.

Essentially, Balsamiq Mockups provides the user with a wide range of design and user interface elements to drag and drop onto a page. These include menus, images, text areas, form elements, search boxes – all of the key elements of a Web page or application.

Once on the page, they can be rearranged as required. It’s a fantastically fast way to work. Using it, I was able to create a home page mock up in just a few minutes. The best thing is, because it looks like a sketch, it can be presented to a client to get them to think about layout, without them focusing on the design details. Because everything looks like a sketch, no one is going to criticise it – they’re just going to focus on the task in hand.

A wireframe mock up of a website, ready for client approval

The wireframe is later transformed into the final design

This makes the design stage much faster – because the client has seen and approved a very basic layout.

It’s a great tool to use in a meeting – which is where I think it really excels, because it turns the wireframing process into a collaborative one. No skills needed – you don’t have to be able to draw to take part. The designer prepares a basic wireframe, takes it to the meeting, and the elements can be rearranged and approved then and there.

Changing a wireframe is as simple as dragging and dropping

If you can’t travel to a meeting, no problem. You can create a PDF and e-mail it to the client for commenting. Not bad, but perhaps not slick enough. Well, with Balsamiq Mockups you can export the design to your clipboard in the form of XML and e-mail it to the client. The client can then paste the XML into the free on-line demo version of Balsamiq Mockups, play around with it, export the XML back out and e-mail it to you. Very neat and very quick.

It’s not all perfect, though. Here are my likes and dislikes.

Likes

• It’s fast and fun to use.
• It makes collaborative wireframing relatively simple.
• Very easy to make changes.
• It makes people focus on content and functionality, without muddying thinking with design refinements.
• Great results that look like a neat sketch.

Dislikes

• I’d like it to be even more collaborative. E-mailing XML is all well and good, but it’s beyond the patience/ability of many non-technical people. I’d like to be able to save a design to ‘my account’ on line, then the client can browse to it (using only a browser) and login securely. (I understand that Balsamiq is working on an on-line version, so let’s wait and see.)
• It uses Adobe Air. This isn’t a problem in itself, it runs fine, but I’d prefer it if it were a native application – its non-standard interface works fine, but it’s not as slick as a native application. (But I recognise that using Air means that the application is cross-platform.)
• I hate the application icon! Sitting my OS X dock, it really looks like the poor cousin to some of the well-crafted icons sitting alongside it.
• A few elements, such as the picture box, scale badly.
• It’s a touch expensive. At $79, it can’t be called pricey, but for what it does I’d say that maybe sub $60 was fairer.

 

Come on, you can’t tell me that’s a nice looking icon

But I would say that my dislikes are really minor niggles that don’t get in the way of me using the product.

Make no mistake, even with its few flaws, it’s still a cracking product – one that will save Web designers, application designers and their clients pots of time, helping to shape the early stages of development in a collaborative way. And, best of all, it helps you defer the ‘actual design’ until the functional decisions are taken.

I really buy into the idea of collaborative working. Getting clients involved, rather than presenting them with final ideas, contributes to websites that better meet the needs of the business.

Balsamiq Mockups engenders collaboration at the earliest stages, where it will have the most impact on the overall project. It makes the process fast and fun.

I’ve no hesitation in adopting it or recommending it. I’ve been using it for just a few days, and it has already changed the way I work in a fundamental way, by doing one thing, but doing it really, really well.

Comments

2 comments · add a comment · this blog is moderated

Labrow Marketing takes no responsibility for any comments below, as these do not necessarily represent our views.

On 2 April 2009, Peldi Guilizzoni said:

Hi Peter, Peldi from Balsamiq here. Thanks so much for the great review! Regarding collaboration, there are many options, which I outline here: http://www.balsamiq.com/products/mockups. I am actively working on a hosted version of Mockups which is more or less what you describe, let me know if you'd like to be in the beta. Regarding the non-standard UI: we are working on rearranging the menus of the Desktop version a bit to make them more OS-specific. The dock icon is terrible, I totally agree. I am working with an actual graphic designer to prettify the whole app, and this will be the first step! :) Re: elements scaling badly: you're right, I'll work on it. Re: the price, I'm happy with it. I get more people saying that it's a bargain than those who say it's expensive, so I think it's about right. Also, 3400+ customers seem to think it's ok. ;) Thanks again for your review, I really appreciate it!

On 2 April 2009, Peter Severin said:

If you are an Eclipse user you should try WireframeSketcher (http://wireframesketcher.com). It's a plugin for creating screen mockups and UI prototypes. Written in Java it's fast and snappy. Eclipse is cross-platform and has a native UI. The product has fewer features but there are some advanced functionalities like master screens that you won't find in other tools. Also Eclipse has an integrated support for version control which allows you commit and share your screen mockups with your team.