This project was a product of my research and studies of how my animations in After Effects can be converted into code and added into user interface. It started out when I was tasked to convert a full infographic animation into a gifographic. The file after conversion was so heavy that it took the gif a long time to load. I have put myself to the shoes of the end user and found out that they lose interest about a content that loads so slow.
We want them to take time and understand what our content is so I decided on experimenting on existing gifographics and converting them into codes by using Bodymovin and Lottiefiles. Then soon after that I built a template in VS code for future projects. I have sent this proposal to the content team in OneAffiniti a digital marketing automated platform company. I proposed this as a new way of giving out content without using a third party builder like Ceros
My design concept for this project were base on schematics and robotics. I played around with shapes and decided to go with the diamond as the base. Diamond is a valuable gem and therefore it was a best representation of the word “top”. With the base shape for the robot or tech, I added parts to represent each topics. Then layout everything close to a schematics of a machine. Colours came after when I have drawn the graphics. I picked high contrasting colors to make the whole graphics standout from a very long information. I want them to view the graphics first then get curious and read. I animated the graphics in a subtle way to tell a short story and capture the audience attention then keep their attention in the page.