Prototyping with Balsamiq Mockups

Balsamiq mockups is a rapid wireframing tool which reproduces the experience of sketching interfaces on a whiteboard, but using a computer so as to share, modify, generating ideas rapidly and for communicating to designers, developers and project managers more easily.

Prototyping

In User Experience the prototyping phase comes after gathering user requirements and business needs. Prototypes are created with as much insight about the system as possible hence the process involves all stakeholders (users, project managers and developers). Low fidelity prototypes are ones that are quick, easy and cheap to create hence can be drafted with pencil and paper. Another important advantage is that they are easy to modify as well. High fidelity prototypes take more time to make but are closer to the final product in terms of look and interactivity.

This is an example of how we used Balsamiq mockups  to create wireframes for a site called Lanchester Investments.

Here is the wireframe sketch created in Balsamiq mockups.

Testing and evaluation is done with users until they are happy the design will help achieve their goals. After determining how the content will be laid out, a higher fidelity prototype was created in Adobe Photoshop CS2. The design is confirmed with all stakeholders and a more interactive prototype is created in Dreamweaver in order to apply look and feel. CSS, Javascript and HTML code bring the whole website to life.

The project below is for Harold Bankers.

       

One can try Mockups for Desktop for free at http://www.balsamiq.com/. The application is fully functional for 7 days, but you’ll need a key in order to save your work after the evaluation period is over.

Lessons learnt:

There is free software aspiring UX designers can get a hold of and try out.  Don’t ever let cost be a hindrance.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s