Making a web app

DROHNE

In my personal experience, the best part of AI tools and LLMs isn’t to help you with the things you already know, but to fill the gaps in your knowledge.

When I first started getting jazz lessons in 2021, one thing I struggled to conceptualise was modal theory and harmony. I think guitarists in general struggle with theory as we memorise the fretboard in shapes and patterns more so than actual logic and understanding.

I might be biased, but this tool helped me understand this in a matter of hours. I have always loved the music that comes out of Turkiye, North Africa and South East Asia, but found it challenging to learn these styles without a translator or a teacher.

Time
2 rainy weekends
Role
Everything
Team size
1 absolute shred head

The Interface

UX/UI

Inspired heavily by ‘groove boxes’ of the 80s and 90s. I wanted the tool to have a nostalgic and brutalist look about it.

The controls needed to be simple and intuitive with the understanding that if someone has reached this part of theory in their musical journey, that they would have seen similar interfaces and words before.

The interface was designed by me in Figma, and then built with Claude/Replit

DROHNE music interface with drone controls, a fretboard and modal harmony tools.

Character Design - ChatGPT

Dr.One, the all hearing deity of harmony.

A droning note is such a strange thing to hear. For me it’s always been strangely spiritual sounding, its lack of complexity or chordal changes can take the brain to some strange places as you subconsciously drown it out in the search for new and novel sounds.

I wanted to have a character on the site, just to give it some personality.

I tried to create something that was ugly, pretty, creepy and kind looking all at once. Knowing I planned on bitmapping the final image to adhere to the brutalist/ASCII theme - I chose to make the character from materials that were high contrast, shiny, but also somewhat organic looking.

The creature was created in ChatGPT, with the change of expression (on state) edited with nanobanana. The final bitmapping and grading was done in Photoshop.

Dr.One character development: the original sculptural creature beside its two monochrome states.

Art style inspiration

mood boarding

ASCII art, 8 bit mono and brutalism were my main inspiration for the style of this piece. Pulling heavily from vintage music hardware and early computers/DOS.

Vintage monochrome computer interface and ASCII art inspiration.

ROLAND 808

The most famous drum sequencer ever

The use of dark colours, sliders and knobs accompanied with bright contrasting labels was massively inspiring for the colour scheme.

Roland TR-808 drum machine interface with dark controls and colourful labels.

90s multi-fx screens.

Charming Pixel-art

My beloved ZOOM multifx pedal I’ve had since I was 18 years old has a UI that to this day outperforms any of my new-age LCD screen devices. Something about sending a message or information with such a limited grid has always stood out as being very cool to me.

Collection of monochrome pixel icons from ZOOM multi-effects pedal screens.
Mike White

I’m a seasoned digital designer living in Brisbane, Australia.
Electric guitar, futsal, my cat — happy to talk about any of these at length.
Let’s work together to make something nice.

DROHNE — video demo

Watch on Vimeo