Sketch an interactive infographic

Wireframe for Aid Transparency

Wireframe for Aid Transparency (Photo credit: Edith OSB)


I’m participating in a MOOC – Massive Open Online Course – titled Introduction to Infographics and Data Visualization, taught by Alberto Cairo @albertocairo (see who blogs at The Functional Art .


This week, we were assigned to create the design for an interactive infographic to present the data on organizational transparency of big international aid organizations – the World Bank, for instance, and many governmental aid organizations. The data and some basic graphs are presented by the Publish What You Give organization.

The exercise really makes me think.  In the video lectures, Albert Cairo tells us that that an interactive design needs to be obvious – to make clickable things look clickable. That sounds great — and anyone who has spent 30 minutes finding the link on a page of text understands its importance — but it is harder to achieve than it looks.  In earlier versions of this design, the boxes where information appears (on the right) and those with options to click (on the left) looked the same. Then I realized: how would anyone know where to click?


In this design, the solid boxes on the left would present choices. The top box chooses among the three types of transparency rated: Organizational, the biggest donor Country, and the biggest Project. Once selected, subsequent boxes would let you choose just governmental or private, or types of aid (military, humanitarian, health, etc.) The blue box would let you select individual organizations and get some score card information about each one.


For each selection, a Top 10, a Bottom 10, and an Improved Since 2011 would pop up in the boxes on the right.


The headline area would provide basic background information about aid transparency (and lack thereof) and show the overall growth in aid – total and by recipient continent – for the last 50 years.


The lower area explores the transparency scores by the total amount of aid given, and will also light up (or not) according to the selections on the left side.

I haven’t yet learned enough of Illustrator to use it — although it’s the right tool, because the vector graphics can be resized.  This was done is trusty old Photoshop Elements 9.



About Sister Edith

Benedictine sister of St. Scholastica Monastery, Duluth, Minnesota
This entry was posted in Data Visualization, Education, Internet and tagged , , , , . Bookmark the permalink.

Comments are welcome and moderated

Please log in using one of these methods to post your comment: Logo

You are commenting using your 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

This site uses Akismet to reduce spam. Learn how your comment data is processed.