Katarina Šeme
Katarina Šeme & Klemen Vadnjal
Katarina Šeme
Katarina Šeme
Inea
Inea
2022
About the project
Inea is one of the leading companies in the field of industrial automation, process control, manufacturing intelligence and industrial energy management.
To increase the understanding of their processes of the prospect clients they decided to show their production lines with the fully interactive web animation.
My role was to prepare four (4) illustrations with a detailed overview of the processes in the production line and animate them as true to the real process as possible.
Three animations will showcase actual production lines, while the fourth will serve as an overview and show the connections between them.
As the animations will be primarily displayed on the company’s website I had to keep in mind the rules of preparing an animation for export as a .json file (lottie for web).
Process
At the first meeting with the client we have looked over the filmed footage of all the production lines, decided on the style of illustration and the most important focus points of each of the production lines.
The first and very important stage was to prepare illustrations with all the needed details and give a good overview of the processes to the future site visitor. There were several versions of illustrations for each of the four production lines before we decided on the final look at the end.
When the illustrations were final, I moved on to the animation stage. Here I experimented with the speed and frequency of movements, as all the animation needed to loop perfectly.
The client also requested some additional changes in the illustrations, which was not ideal, but I have managed to adjust them in a way that did not cause too many complications in the animating stage.
Perfect-loop web-ready animations
When all four animations were done I proceeded to export them as .json files, using the bodymovin plugin for Adobe After Effects.
This allowed us to incorporate animations on the website with as little file size as possible.
Then I animated four additional pop-up animations to include as an interactive overlay. These pop-ups are triggered by the mouse hover over and offer additional info on the process and include a link to a sub page with an even more detailed description of a particular part of the production.