Since I started working alongside Nic, we’ve been able to increase the level of service that we can offer to our clients. I guess it is the main difference between Nic being a solo freelance web developer and us working together as an “agency” (with inverted commas as I’m not sure that a 2-people business can really be considered as an agency, but it’s not the point today).

One thing we now provide for each project is proper planning and wireframes.

What are wireframes for?

Wireframes have, for me, 3 main reasons to be:

• They highlight potential problems that we would otherwise have had during the development phase. You can’t think of everything when you talk and write about features. Some issues become apparent when they are created.
• They allow you to save time for the development and design. Everyone agrees on a single version, there’s no going forward and backward a hundred times. Besides, the client, the project manager and the developer will all have different views. Wireframes allow you to agree on one single version.
• The client sees what his vision would actually look like. They sometimes change their mind when they have visuals in front of them and realise that it might not work or not be as nice as they thought.

What should you focus on?

You should focus on the layout, basic colour palette and interaction between the different pages.

Wireframes should remain relatively basic and the level of details depend on the time you have, the complexity of the project and whether the client already has a clear idea of what he wants. I, for example, like to add real pictures to get a better feel of the site.

Choose your method

I personally use a software called myBalsamiq. They have an offline and online version, although they don’t synchronise yet, which I find pretty annoying. I use the offline version as it’s faster and our internet connection in the office is unpredictable. But I can upload files on the online version and give access to the client when needed.

For a middle-sized project, it takes me 2 or 3 days. The homepage is essential, then usually the categories, sub-categories and product pages. If it’s an e-commerce, the basket and checkout page can be important too.

There are many wireframe tools, but if you don’t want to use any, then I would recommend that you, at least, use the old pen and paper to decide on the layout of the site before you start the build. It will only take you a few hours and save you a lot of hassle.

In a word

Wireframes are useful and important. Trying to convince the client who’s never experienced it is quite tricky. They don’t always understand why you want to invoice them 2 or 3 days on top of the build just to draw nice pictures. But believe me, they do see how useful wireframes are once they are done.

In my next post, I will show you the wireframes we did for our latest project, Paperfly, and explain what problems they resolved before we even started the development phase.