Music Mixer
Music Mixer
About The Project
This project is an interactive music mixer built from scratch as a team assignment. The goal was to create a drag-and-drop experience where users can place sounds into target zones and build a track directly in the browser.
We designed the project around a vibrant, party-themed concept with a DJ panel and speaker visuals to simulate a club atmosphere. In the team workflow, I focused on the design side (original background, speaker, DJ panel) and I also built the HTML and CSS structure. Chris Macwan handled the main JavaScript functionality that powers the mixer interaction.
To make the mixer feel complete, I also created an original song specifically for this build. The final result is a simple interactive experience: drag the sounds, drop them into the DJ panel, press play, and the page turns into a mini “party” demo.
The visual direction was developed from scratch, with design elements created in Adobe Illustrator (logo and palette) and then applied consistently across the layout.
Design, color palette
JavaScript Functionality
Adobe Illustrator
User Interface
User Experience
User Research
Marketing
Web Development
Design
Software & Technologies
Design: Adobe Illustrator
UI Layout: Figma
Development: HTML, CSS, JavaScript
Interaction: Drag-and-drop based sound placement
Music: Ableton Live 11
Version Control: Git + GitHub
Challenges
One challenge was keeping the drag-and-drop interaction clear for the user, so it feels obvious where sounds can be placed and how to build the mix.
Another challenge was aligning the visuals with the functionality, so the DJ panel design matches the logic of the drop zones and still looks clean on different screen sizes.
Audio balancing was also important, because multiple sounds playing together can get messy if the volumes and timing are not handled carefully.
July 2025
Main Goal Of The Website
The main goal of this website was to create a fun and easy-to-use music mixer where users can build a track by dragging sounds into the DJ panel. The page needed to feel like a complete experience: strong visuals, clear interaction, and a layout that works well across screen sizes. Also practicing the team-work and JavaScript.
