Overtune is a website that help music lover learn more about instruments and help music learner by providing useful tools. This project was designed and developed by a team of 4 students at Design of Complex Websites class, where I was the leader and manager of the project. This project was ranked #1 among other projects in the class.Project Source Code
Floating Bubble Navigation
Instruments are displayed as bubbles and are floating around with css animation.
There are also animations upon hovering and clicking. Making the web page interactive and fun.
There are buttons at top let users hear the individual note of the instrument. The page also includes short introduction from Wikipeida to give users a basic understanding of the instrument.
Range of the instrument and its visualization are displayed to let users know the range of notes the instrument can play, and we inlcluded 3 videos and 3 music pieces to let user know how the instrument is played.
A handy tool for all guitar learners. Correct note will be played once user clicks the buttons and user can tune the guitar according to the note. The user can also loop the note in case he needs extra time for a string.
There's pulse animation around the button if the sound is being played to give user feedback. Also there's reminder to remidn user to tuner on the volumn.
Every music learner needs a metronome to help keep up with the beats. We provide this tool for them so that they don't have to buy one or download another app.
User can adjust tempo according to their needs, and they can adjust the resolution of the beats in case they need precise beats. Visualization is also included.
We understand few music leaners will practice in front of their computers. Therefore we had kept mobile user's expereince in mind throughtout the design process.
Every page is elegantly designed on mobile view and users can practice everywhere using the tools with their phone.