This is a project created I worked on at HLabs for The Economist as a paid advertisement article made for Palo Alto Networks, an American company that specializes in virtual security.

During the concept phase I helped in deciding on the illustration direction, after which I created and animated the visual assets using multiple techniques such as frame by frame pixel art as well as bone animations.

The initial route that we were playing around with, especially since the article revolves around security in the age of AI, was to use generative AI to create a trippy looking lock that fits into the environment and is shifting into different styles or elements.

The first two frames show our experiments using only Runway AI, the third one is a quick 3D lock animation that we then fed into AI to change the style and the last one is just a 3D sketch to test out a more wireframe looking direction.

We quickly abandoned the idea of using AI for this since we weren't happy with the results that it could provide at the time.

Looking through the Palo Alto brand book, I noticed various decorative elements that were being created out of repetitive vertical stripes with tapered edges.

This motivated us to propose this new style, creating the lock element that the client asked for along with a key that it morphs into.

The only downside: animating irregular paths in Rive proved a bit tedious. Instead of using regular trim paths, I ended up creating small two bone rigs for each line.

For the first inline animation I took inspiration from John Conway's Game of Life (top half), which is a popular emergent system that shows you can mimic lifelike behavior through a set of simple rules, such as a cell changing states based on how many neighbors it has.

I thought that this would fit nicely with the theme of virtual security and imagined it at first as a virus spreading. Adding skulls looks a bit too spooky for adverts though, so instead I replaced it with a ladybug.

This is a social media post I did for HLabs showing my process for creating the pixel art bug animation.

I'm using an indie game favorite app called Aseprite to create the frame by frame animations. I'm then exporting everything as SVG and using the shape builder tool in Illustrator to cut out a grid of vertical lines to fit the frames.

The lines use a custom brush that I made, which adds the tapered edges on the top and bottom of each line.

Finally, I export the individual frames and animate them in Rive using a solo layer.

For this animation I wanted to get a more choppy aesthetic to the lock animation so that it contrasts nicely to the more fluid vector animation of the elements around it.

To achieve this, I created a few frames by hand of the lock opening using simple shapes in Illustrator, then built the final tapered line frames using the shape builder tool as before.

Year: 2004 Services: Motion Graphics & Interactive Module Location: Worldwide

Alexandru Savescu: Illustration & Creative Direction Shadi Ekman: Creative Direction Enzo Mehdi: Vev Development Megan Hunt: Vev Development Bea del Campo Calles: Project Management