AltViz Peaks

How To Use Balsamiq Charts & Graphics Bundle to Create Mock-ups

RICHIE BARTER | HOW-TO

Building data visualisations is a tricky business and Coolgarif Tech use a range of tools to simplify the design process. Our wireframing tool of choice is Balsamiq, as it enables us to quickly iterate ideas and communicate them to our clients.

However, Balsamiq has always been a bit weak on built-in components for mocking-up charts and dashboards. Over time we have ended up hand-building a bunch of representative charts for our client projects and these project assets enable us to get up-and-running on a new project pretty rapidly. We have now released these accumulated mock-ups to the wider-world.

Once you've completed your purchase of the graphs & charts bundle you'll have downloaded a zip file with all the available charts in png format. The rest of this blog will provide a few tips and tricks on folder structure and how best to make use of these new design assets.

Firstly unzip the bundle into a sensible location where you can find it. I usually put it on a generic folder path like:

/CoolgarifTech/designs/chartsformockups

The important thing to understand with the Balsamiq's data-format is that the folder location of the chart images is important. So if you move or delete the image after it's linked to a certain wireframe then the link will be broken and the chart won't appear.

Let's examine the steps required for a single-use chart in your wireframe. Imagine some new data visualisation that we are building for Richie the pro-surfer (no relation to me naturally) and the design calls for a single chart to be dropped into the middle of the visualisation to show average wave height or some such. Here is an example set-up for this scenario:

Balsamiq surf site mock-up - waiting for graph

How best to go about this then? Select an image element from the Media assets in the Balsamiq toolbar and drop this onto the area you want to place the wireframe of the chart. It should look something like this:

Balsamiq mock-up - image element added

Then using the navigation box provided by Balsamiq, select the drop down next to the image symbol. In this drop down there is the option to Import Image, select this and select the relevant chart object from the generic folder we set up above at /CoolgarifTech/designs/chartsformockups

Balsamiq mock-up - choose image from drop-down

Once selected, the box will render the desired chart automatically for you and you'll end up with a data visualisation that you can send to Richie the surfer for feedback and iteration.

Balsamiq mock-up - chosen graph added to page

Project Assets

So the example above was pretty basic and anybody used to using Balsamiq will know that stuff already. How about the scenario where you are working on a complex project with multiple dashboards for a client?

This is where the Balsamiq project assets functionality comes into its own. When you start a new blank mock-up, the project assets menu item is blank and, in order to place the charts and visual tools into it, you need to follow these steps.

Balsamiq mock-up - blank Project Assets tab

Firstly save your new blank mock-up into its own project folder, for example the following folder path would work:

/CoolgarifTech/projects/sample_project/mockups/test1.bmml

In this mock-ups folder you also need to create a new folder called assets.

assets folder in Balsamiq project folder

Into the assets folder copy the relevant charts that you'd like to have access for your project. In this case I've chosen some bar charts and scatter plots from the bundle's available assets.

Once you re-save the Balsamiq file, the new assets will appear under Project Assets in the menu.

Balsamiq mock-up - Project Assets tab containing 3 graph types

Here is an example with a couple of charts in use.

Balsamiq mock-up - graphs displayed on page

As noted above, if you delete the assets folder within your project or any of the individual png files then they will become unavailable to the project.

I hope that this proves helpful in your data visualisation design and client engagement. If you ever need our advice or thoughts on a project or visualisation problem feel free to reach out to @AltViz_LDN on twitter.

Grab the Graphs & Charts Bundle here!