OPC IT. Managed services and web development in Canberra.

Balsamiq: Simple design made easy

Date: 
2 August 2016
Authored by: 
Toby Wild

A web developer, backend programmer, User Experience designer, Business Analyst and Product Owner all walk into a room.  It’s not the start of a bad joke, but it could be the start of a bad project.

Each person in the room knows what the website needs to do, and each person knows what it’s going to look like.

The only problem is each person is thinking something different.

The classic way of getting everyone on the same page regarding the look and feel of how a website full function, is to hire a graphic designer to come up with a design on what the common pages will look like.  And while this is a vital step (and should not be skipped), it doesn’t need to be the first step.  Especially when going back and forth to a designer not only costs money, but it costs time.

That is where a program like Balsamiq Mockups comes into the picture.

It’s a click and drag WYSIWYG tool where you can easily pull in all the elements you need to design a robust user interface, and every element can be scaled and customised.

In a matter of minutes, sitting around a projector, you can create an interactive skeleton of the website, and have everyone on the one page before you get a graphic designer to make a final pretty version.

I first used Balsamiq as the basis for the Functional Specifications for the eStage 1 project at Engineers Australia in late 2013.

This involved creating around 200 separate mockups showing the various forms, input elements, page layout and user journey.

Having a basic graphical representation of what was going to be built, along with a list of business rules associated to the graphical elements, allowed us to come back to the document during development in order to confirm we were on track, and to assist in planning out the future development tasks.

Best of all, is that the mockups can be saved out to an interactive PDF document, allowing users to click on predefined elements in order to be taken to a new page of the PDF document showing what happen if the user themselves clicked that element.

*This is an unpaid review of the Balsamiq Mockups software.

The Balsamiq Mockup

The final website