From NeckArt to fretShapes

FretShapes - a guitar scale visualizer, a playable computer instrument, and a labor of love.

FretShapes - a guitar scale visualizer, a playable computer instrument, and a labor of love.

fretShapes_image
fretShapes_image

FretShapes holds a special place to me as a long-term endeavor (started over 25 years ago). This case study examines the origins and various "shapes" and forms that this concept has taken over the years, starting with NeckArt all the way up to it's present form as fretShapes (pictured above).

FretShapes holds a special place to me as a long-term endeavor (started over 25 years ago). This case study examines the origins and various "shapes" and forms that this concept has taken over the years, starting with NeckArt all the way up to it's present form as fretShapes (pictured above).

1)

In the early 1990's, I was in my early-teens when I first started getting serious about the guitar. I'd sit in my father's bookstore, flip over his store bookmarks and sketch out fretboard diagrams. It wasn't long before I realized that intervals, chords and scales could be represented visually as lines and shapes.

The patterns looked like art to me. So, I started to experiment with different ways of visually representing chord and scales shapes on the guitar fretboard.

In 2002, during my final year at Berklee College of Music, I saw an opportunity to build my first interactive version of, what was at the time called, Neck Art. I took a multimedia class that focused on Flash and ActionScript. My final project for this class was Neck Art. Watch the video directly below to see a short demonstration of how it worked.

1)

In the early 1990's, I was in my early-teens when I first started getting serious about the guitar. I'd sit in my father's bookstore, flip over his store bookmarks and sketch out fretboard diagrams. It wasn't long before I realized that intervals, chords and scales could be represented visually as lines and shapes.

The patterns looked like art to me. So, I started to experiment with different ways of visually representing chord and scales shapes on the guitar fretboard.

In 2002, during my final year at Berklee College of Music, I saw an opportunity to build my first interactive version of, what was at the time called, Neck Art. I took a multimedia class that focused on Flash and ActionScript. My final project for this class was Neck Art. Watch the video directly below to see a short demonstration of how it worked.

2)

Five years later, the first iPhone was released by Apple. The first moment I saw this device I had visions of turning Neck Art into an app.

I put together mockups of what a Neck Art app might look like. The full set of Neck Art diagrams are pictured below along with three (very early) iPhone mockups.

2)

Five years later, the first iPhone was released by Apple. The first moment I saw this device I had visions of turning Neck Art into an app.

I put together mockups of what a Neck Art app might look like. The full set of Neck Art diagrams are pictured below along with three (very early) iPhone mockups.
neckArt_full_set_image
neckArt_iphone_mockups
neckArt_full_set_image
mobile_neckArt_iphone_mockups

3)

Fast forward another three years to 2010, when Apple released the first iPad. With this new device on the market, I soon had ideas about what NeckArt might look like as an app. So, I set out to re-imagine, and ultimately re-name, NeckArt. I ended up designing mockups for a full-featured native iPad app, now called FretArt.

Using Adobe Illustrator, I created a vector guitar with proper proportions and scale-length. I also created vector interface controls and gradient mesh tuning machines.

guitar_parts_with_peg

3)

Fast forward another three years to 2010, when Apple released the first iPad. With this new device on the market, I soon had ideas about what NeckArt might look like as an app. So, I set out to re-imagine, and ultimately re-name, NeckArt. I ended up designing mockups for a full-featured native iPad app, now called FretArt.

Using Adobe Illustrator, I created a vector guitar with proper proportions and scale-length. I also created vector interface controls and gradient mesh tuning machines.
mobile_guitar_parts_with_peg_image

I took all of the graphical assets and assembled them into a fully realized interface.

fretArt_ipad_screenshots

Click the GIF below for a demonstration of the basic functionality of FretArt.

Click the GIF below for a demonstration of the basic functionality of FretArt.

4)

Another six years passed, and in 2016 I found myself with a new opportunity to further develop FretArt. While enrolled in the year-long Designer Track at www.bloc.io, I incorporated FretArt into my curriculum as a capstone project.

guitar_outline_graphic
flat_guitar_graphic

The first task was to retool the graphics for retina screens. This meant a fairly major overhaul of all of the assets, including transforming the guitar to a simple outline and then experimenting with various flat-graphics styles.

flat_UI_images

4)

Another six years passed, and in 2016 I found myself with a new opportunity to further develop FretArt. While enrolled in the year-long Designer Track at www.bloc.io, I incorporated FretArt into my curriculum as a capstone project.
mobile_guitar_outline_graphic
mobile_flat_guitar_graphic

The first task was to retool the graphics for retina screens. This meant a fairly major overhaul of all of the assets, including transforming the guitar to a simple outline and then experimenting with various flat-graphics styles.

mobile_flat_UI_graphic

5)

Using the vector app Sketch, I experimented with browser-based interface designs.

color_fretArt_ui_screenshots
user_personas_images

5)

Using the vector app Sketch, I experimented with browser-based interface designs.
mobile_color_fretArt_ui_screenshots
more_color_fretArt_ui_screenshots

6)

Once the UI felt complete, I focused on the logo. The logo design went through the following developmental stages until finally the current fretArt logo emerged. (See in part 2 on the next page.)

fretArt_logos

While working on the logo, I also created 49 audio clips, one clip for every note on a 24-fret four-octave guitar fretboard. The the screenshot image below shows the 49 audio clips color coded by octave after recording with Ableton Live software.

fretArt_live_session

Next, fretArt becomes fretShapes with an exploration into color and code. Click the link below to view fretShapes case study part 2.

6)

Once the UI felt complete, I focused on the logo. The logo design went through the following developmental stages until finally the current fretArt logo emerged. (See in part 2 on the next page.)
mobile_fretArt_logos

While working on the logo, I also created 49 audio clips, one clip for every note on a 24-fret four-octave guitar fretboard. The the screenshot image below shows the 49 audio clips color coded by octave after recording with Ableton Live software.

mobile_fretArt_live_session

Next, fretArt becomes fretShapes with an exploration into color and code. Click the link below to view fretShapes case study part 2.