logo for overtune project

Project Leader | Web Design | Web Development | JavaScript | HTML | CSS | Python

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
Main page of Overtune

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.

Instrument page of Overtune

Instrument Introduction

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.

Instrument page of Overtune
Tuner page of Overtune

Guitar Tuner

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.

Metronome page of Overtune

Metronome

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.

Metronome page of Overtune
Mobile page of Overtune

Mobile View

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.