Overview
I'm currently working on an exciting project where I'm helping redesign the landing page and dashboard for an AI music extractor. It's currently in-progress but I got permission to share so I will update my learnings, progress, and designs here as we go!
Current Stage
One of my friends at Google is working on a side projects and asked for my help in redesigning his website for an AI music extractor. The tool, focused on artists, musicians, and DJs, allow users to upload a song and then extract the vocals and instrumentals into two separate files, allowing them to use them as samples, or other variations in their music productions.
Last week we looked at various options I designed for the layout and structure (1 column vs centered vs stacked). We are now currently working on the layout, color, and designs at this stage.
Current Design
Goal
The overall product is fairly simple, and the user flow is straightforward, so our plan is to elevate the brand and design of the webpage to bring in a more modern look and feel to attract the younger music generation.
Here's the brief he sent me in terms of the redesign in his words:
"I want it to look professional but also playful, because it’s around music. In my mind I’m thinking of something that has a retro, 8-bit feel, skateboard brand feel (like VANS), with simple 1-2 colors, bold borders, maybe some comic book style influences. I keep thinking of Miss Minutes - that type of style, but more modern, clean and minimal."
So let's get into some mood-boarding, colors, and designing several options with that in mind!
Note: most of the copy is placeholder as our focus is on the color and design at this stage. We will update the copy once this is finalized.
Moodboard
Option 1: Music professional themed
The first option I designed was with musicians in mind. I gave it a off-white background with a contrasting bold orange to give it feel of professionalism while also having some fun (like musicians are!). The orange color was chosen to give a feel of warmth and security but also playfulness that would resonate well with our audience.
Note, for all the styles I went with a strong, black border with sharp edges to give the classic feel, but will utilize colors in various ways to give off the fun and playfulness in the components that he wants.
Option 2: Miss Minutes
I designed 3 color options here, with inspiration from Miss Minutes. I really like the strong, bold colors but the green also gives a unique feel of excitement with a timeless energy. The green on green palette option also gives a muted, yet cohesive feeling.
Option 3: Retro classic blue + modern classic
I took inspiration from the classic Windows colors to make it feel pixelated with a modern touch.
The second color option was more of a modern take at the colors although I felt that this one was the least impactful as it felt very similar to many existing brand colors and energy.
Option 4: Retro video game style
I was inspired by Gameboy's that I used to play and wanted this to be designed to feel retro, but with a modern look. It has the green to pop the buttons out visually, but the white background gives it a professional, simple look & feel to it as well.
I'll be presenting these option to him next week. Let's see which one he'll end up choosing! I'll update this post with more updates and thoughts as we progress.