AMPLICATION WEBSITE ANIMATION LOOP
This is a website header for Amplication's website, a platform dedicated to code modification and creation.Upon receiving the project, we envisioned a dynamic animation loop designed to resonate with the coding community's visual language while staying true to Amplication's brand identity.
As a result of the limited design guidelines and elements I had to work with, I had to think creatively and find ways to make the animation stand out.I designed a layout that shows a piece of code's journey from the Amplication platform through various modifiers, ending with upload to the cloud. Afterwards, each icon was carefully refined.
Early Stages Frame Design:
Amplication brand / and / design elements:
Icon Sketches:
I strategically manipulated the vector layers to ensure a seamless online animation experience, because this animation had to be in JSON format. This process required working only in vector-based layers, and within the LottieFiles supported features - which are very limited.
Icon animation evolution:
After that, it was just a bunch of trial and error, trying to manipulate the key frames to make those simple designs have a lot of character, and then making sure that they play in the loop.
The outcome is slick animation that, despite its straightforward graphic system, conceals cool little animated details.
Thanks for scrolling :)
