guitar to piano tool

print/desktop | ux/ui design | adobe illustrator + processing

go to interactive prototype


The Guitar to Piano Tool that I designed was a passion project of my own. It came out of a personal need as I am a musician that had spent time learning both piano and guitar and wanted to better understand the relationship between the two in a visual way. The tool was meant to be used as a reference to help people understand the relationship between the notes on the fretboard of a guitar, and where those notes would be on a piano, including their respective octaves. I was not able to find anything on the internet that did this very well, so I decided to create my own.

initial prototype

I began prototyping different layouts to find the best way to visualize the information. I created two different visualizations for the piano and guitar fretboard that were not necessarily unique in comparison to other people’s visualizations, but I wanted them to feel consistent. Since music is heavily focused around the key you are playing in, I chose to have that displayed in a larger font, as well as the overall guide to what the notes were in that key. With that focus in mind, I made it so the notes within the given key on the piano/guitar were highlighted.

final prototype template

After the initial ideation I created this template for what a singular key would look like. I decided to keep the labels for the musical key at the top with a large font so that it is high in the hierarchy. I also included two different variations of the guitar fretboard, one in the standard tuning and one in an additional common tuning. I highlighted the fret numbers with one or two circles based on the common labelling on a real guitar fretboard. Finally, I labelled the octaves on the piano with numbers, which will give a reference to which colour is associated to which octave, shown by the coloured bar above the piano keyboard.

adding colour

Once the final template was created, I began fleshing out how the colour scheme would be applied to the layout. The colours are used a signifier to show which octave is being used. This was done so that whoever is using this tool can quickly find the note that they want to translate, and since there is only one of each note per octave, the colour helps them identify the note to translate efficiently.


Now that I had created a static template with colour for my reference tool. I decided I wanted to make an interactive desktop version using Processing. This tool now allows people to select the key they want, the tuning of their guitar and the program will colour code everything for you. It also gives the accessibility to left-handed players to be able to view the tool in different orientations. This tool is only intended to run on large screens and is not optimized for small screens like smart phones.

go to processing prototype


Taking a lot of data and visualizing it is always an interesting challenge as a designer. This was a unique problem because to make sense of the information, you must understand it in a great deal of depth. I got to think as both a designer and musician. Understanding the relationships between the instruments as a musician and exploring the best way to show that information so that someone who doesn’t understand it, can use it as a tool to learn, was a rewarding experience.

next portfolio piece: citymapper