Hero Section - Project Case Study
Music Mixer
A web application that allows users to drag and drop different types of musical instruments into a Drop Zone to trigger a sound based on the type of instrument dropped onto the player. Upon dropping the instrument onto the player, users also have the option to pause, resume the sound of the specific instrument, or reset the player to its initial state to try out new combinations.
Project Date
-
Date
28/07/2023
-
Type
Web App
-
Role
Web Designer and Front-End Developer
-
Team Members
Brayan Hortua & Viktor Kim
TECHNOLOGIES USED
Research and Project Overview
Challenge
The purpose of the Music Mixer was to create a game where the user enjoys music by dragging and dropping different instruments or pieces from a Drag Zone into a music player or Drop Zone. Once in the player, the user would have the ability to create different sound combinations and assemble their favorite pieces to create a song.
Brainstorming and Research
The research and brainstorming began with the study of drag-and-drop events in JavaScript for their implementation in the user interface and functionality with the HTML DOM. The design was envisioned to resemble a nightclub with electronic music and a party atmosphere. The color palette for the player and the game overall consisted of dark tones mixed with some bright accents. The music player was intended to resemble a mixer commonly used by DJs. The chosen instruments were also based on a nighttime party atmosphere, so most sounds are from guitars and electronic bass, as well as digital devices with high-pitched tones.
Process
The creation process of the Music Mixer begins with the development of wireframes to conduct a detailed analysis in the selection of typography, theme, color palette, and layout of elements, ensuring efficiency, readability, and user accessibility when interacting with the mixer. Additionally, a prototype was created for a closer view of the components and their functionality on the website, to be later translated into code using HTML, CSS, and JavaScript technologies.
Solution
The solution is an interactive and user-friendly Music Mixer, where users can create music by simply dragging and dropping instruments into a designated area. Inspired by the vibrant atmosphere of an electronic music nightclub, it offers an exciting and dynamic experience. With intuitive controls and a wide selection of instruments and sounds, it allows users to experiment and mix music creatively and personalized manner.
