Case Study
Interactive SVG Inforgraphic
About
This project was developed in the third semester of Interactive Media Design at Durham College. The animations and interaction were coded using jQuery, TweenMax and SVG animations. The SVG elements were designed using Adobe Illustrator. The topic of this infographic is "Building a Community Garden". This was one of my best works. This project was a group project, each team member had to create their own infographic using the information provided by our clients from "We Grow Food". Each team member was assigned a demographic age group, I was assigned the Adults Group.
Tools Used
Adobe Illustrator, HTML, CSS, and JavaScript
How It Works
The infographic will guide the user through step-by-step instructions of building a garden using texts and interactive objects. Each step is revealed when the user clicks the next button and certain objects will animate according to the step. There are also tips and tricks throughout the infographic.
Development
The project began with a proposal to the clients, explaining what our groups plan was for developing the infographic. Then researching each step of building a garden along with tools used and materials. Each tool, material, and background objects are SVG graphic elements and designed using Adobe Illustrator (as shown to the right). After completing the design portion of the project, the animation for the infographic was coded using HTML, CSS, and JavaScript.
NOTE: It's best to view this application in Google Chrome as it was developed for google chrome! Make sure put the browser in full screen.
