This is an infographic that you may interact with. An infographic's purpose is to provide information about a topic in a way that is engaging, fascinating, and interactive.
I designed all graphics in illustrator by using my own created reference, such as picture of the tea cup. I have researched over internet about tea benefits and the links are provided in the final screen of the infographic.
Adobe Illustrator
HTMLS/CSS
Javascript
jQuery/GSAP
Macbook Pro
This project had challenges during the process of desiging it and also while coding it. One of the chanllenges was doing research for trusteble content and implement it in the interactive way. This was one of the first projects that was designed and developed with SVGs and animation. Another challenge was the voice over set up in the project, each of the screen have a voice over.
The very first step was searching information about teas and there benefits. Secondly, all the graphics and content was designed with Adobe Illustrator and come up with choice of typography, colour scheme, and logo. Another process was the voice over on each screen with information about tea. Firstly was recorded and then improved with Adobe Audition, and Lastly, implemented in the code. Lastly, the interactive and the animation design was using HTML,CSS, Javascript; By implementing graphic design made in Adobe Illustrator.
This infographic is built for computers screen and chrome browser. The infographic screens size are 960x600px. Here is avalable the finale project for you to interactic with. Click the button "Launch" and learn about Teas and there benefits!
Launch