How to Save Water for Your Garden

Interactive Infographic

The Idea

Part of my job as the designer of the RealTips blog on was to create infographics based on articles previously written for the magazine. Infographics are fun and rewarding to design, but the interactive designer in me wanted more.

Various infographics I've created

Collection of static Homes & Land Infographics I created

I wanted to click on images and see greater detail. I wanted to see other views and dynamic content. None of these things are possible with a static image.

To add a cool, sharable element to the RealTips blog, I proposed to make an “interactive infographic” that would inform and entertain like infographics do, but with the above interactive aspects.

Getting started

Once the idea was green-lit, I chose a topic I thought could have potential for some cool effects. I chose an article on maximizing your garden for the average rainfall of your location.

After hours of research honing my message, I created a wireframe to guide me along in the process. With the creative juices running wild in my mind I quickly jumped to Illustrator to begin the design.

Southeastern Towers Business Cards

The static design ready to be turned into interactive magic


Because this was a completely custom design outside of the normal framework of homesandland or RealTips, I started development on a blank canvas.

I wrapped the page in the minimal HTML5 Boilerplate framework and wrote the markup from top down. I wrote the accompanying responsive CSS, and added some bleeding edge effects such as the raining background area. Finally, I enlisted the help of one of our developers to assist with the more complicated javascipt, and the site was ready to launch.

The result is a living, moving infographic that tells a story while promoting the brand.

Visit Site

Previous Case Study

Next Case Study