Last week in the studio (CW42-26)

Last week, I continued developing Moonwalk Audio’s new website, turning a collection of sketches and objects into an interactive SVG fantasy world. There’s still plenty to do, but the most extravagant animation I’ve created so far is taking shape.

Having switched from static designs to working in code, I spent last week developing Moonwalk Audio’s new website. And the most extravagant SVG animation I’ve created so far is taking shape.

Moonwalk Audio create music and soundtracks for video games, and their tagline is “Imagine the Sound of your World.” We’d discussed creating an animated banner that does more than simply move. We wanted people to explore it and discover their work. Moonwalk Audio will score the animation, so my job was to turn what initially seemed like a random collection of objects into a world to explore.

The team sent me a folder with items they wanted in their banner, including a vintage Japanese robot toy, pens and pencils, toy figures, a UFO, and a plastic dragon.

So I made a loose pencil sketch to see how those elements might fit together.

As we talked throughout the week, I swapped some objects for others. I like to add something of my own when I can, so I soon swapped that plastic dragon for, well, you guessed it, one of my Godzilla action figures. I turned my sketches into vectors:

Then coloured them in two ways. First, in colour using a consistent palette of blues, reds, and warm neutrals; then in monochrome blue, with one or two details left in colour.

I arranged these monochrome elements into a fantasy landscape:

Then I wrote code that changes CSS custom properties when someone interacts with an object in the banner.

Their logo was the only graphic asset Moonwalk Audio had before starting this project. It’s cute, and I wanted to build on it by turning their microphone-headed mascot into a character. I developed several poses for the character and placed their logomark on its chest.

The mascot now stands proudly in the middle of their world, introducing people to Moonwalk Audio and their new website.

I love creative challenges like this, and I’m looking forward to receiving audio from Moonwalk Audio and figuring out how to integrate it into the banner. The challenge will be making the experience as accessible as possible while keeping the overall file size to a minimum.