How I designed Moonwalk Audio’s website to turn imagination into interaction

What do a vintage Japanese robot, a cardboard castle, a Godzilla toy, and a handful of pencils have in common? They became the starting point for an interactive website that brings Moonwalk Audio’s imagination to life.

Moonwalk Audio creates music, sound design, and interactive audio for video games. Their team has worked on more than 1,200 games, helping developers create worlds that sound as distinctive as they look. Their tagline is “Imagine the Sound of Your World,” and that made me wonder. What if their website included a world people could explore?

Finding ideas in unexpected places

When I started working with Moonwalk Audio, I knew that a conventional portfolio of game screenshots and audio samples could demonstrate their experience, but it couldn’t communicate their personality. I wanted to create something playful, that encouraged people to explore rather than scroll.

The team sent me a folder containing objects for the design including cardboard scenery, pencils, a plastic dragon, and a few vintage toys. They seemed to have little in common, but that collection was exactly what I needed.

Making something from nothing

I’ve always enjoyed finding connections between things that seemingly don’t belong together. This project gave me plenty of opportunities to do that. I started by making pencil sketches, arranging the objects into a composition that looked like a miniature world. The challenge was making everything feel as though it belonged in the same world.

To pull these objects together, I used black outlines, geometric shading, and a limited colour palette. I also wanted the finished artwork to retain some of the charm of the original objects as making everything too precise would’ve taken away the playfulness that made the idea so appealing.

Designing a world to explore

How the illustration looked was only part of the idea. Moonwalk Audio makes sound for interactive experiences, so I wanted people to interact with it. Rather than using conventional players, I wanted audio to become part of the illustration. When someone hovers over a monochrome object, it changes to full colour. Pressing it triggers music or sound effects. This became a way for visitors to listen to Moonwalk Audio’s work while discovering their personality.

Giving the website its personality

The Moonwalk Audio homepage illustration established a visual language I could use throughout the website. I developed their logo’s microphone-headed motif into a mascot which appears in different poses across the site.

Moonwalk Audio has an extraordinary amount of experience, and the website needed to communicate that expertise while expressing the team’s creativity and enthusiasm. I combined their illustrations with confident typography and a colour palette that balances playfulness and professionalism.

Bringing illustrations to life with code

I knew I’d be developing the website, so I could develop the illustrations and interactions alongside the content and page layouts. Layering SVG elements allowed me to animate the objects, change their colour, and play audio files while keeping download sizes to a minimum. To control the animations and interactions, I used CSS and vanilla JavaScript, then brought everything together using Eleventy.

See the finished project

The finished Moonwalk Audio website combines illustration, animation, interaction, and sound to create an experience that reflects the imagination behind the company’s work. Explore my Moonwalk Audio portfolio page to see more of my design and development process.

Related reading

• My Codeboxx portfolio page
• Last week in the studio (CW17-26): A series of artworks from QR codes
• Last week in the studio (CW18-26): Designing for print
• Design a new website or product