FretShapes case study page 1

FretShapes holds a special place to me as a long-term endeavor. This in-depth case study examines the various forms the fretArt/fretShapes concept has taken. It all started over 25 years ago...

1)

I became obsessed with the guitar in the early 1990's.

During this period, as an early teen, I experimented extensively with different ways of visually representing the guitar fretboard.

I have fond memories of turning over my father's bookstore bookmarks (which were the perfect shape for fretboards) onto the blank side in order to draw guitar scales and chords with colored pencils and pens.

The shapes were mesmerizing to me at the time. I soon realized that chords, scales, and even intervals could be visually represented as beautiful lines and patterns. The fretboard patterns looked like art.

Up to that point, my life had revolved around art, design and music (ok, and skateboarding and hacky sack too). As an undergrad studying art at the University of Missouri, I continued to play the guitar and learn about music, all the while continuing to think about the fretboard as a visual canvas.

Fast forward to 2002.

I was enrolled in a multimedia class at the Berklee College of Music. The focus was on Flash and ActionScript. As a final project for this class, I saw an opportunity to turn my teenage bookmark fretboard shape experiments into a tangible (and interactive) digital form.

I called it Neck Art!

Watch the video directly below to see a short demonstration of how the Neck Art Flash app worked.

1)

I became obsessed with the guitar in the early 1990's.

During this period, as an early teen, I experimented extensively with different ways of visually representing the guitar fretboard.

I have fond memories of turning over my father's bookstore bookmarks (which were the perfect shape for fretboards) onto the blank side in order to draw guitar scales and chords with colored pencils and pens.

The shapes were mesmerizing to me at the time. I soon realized that chords, scales, and even intervals could be visually represented as beautiful lines and patterns. The fretboard patterns looked like art.

Up to that point, my life had revolved around art, design and music (ok, and skateboarding and hacky sack too). As an undergrad studying art at the University of Missouri, I continued to play the guitar and learn about music, all the while continuing to think about the fretboard as a visual canvas.

Fast forward to 2002.

I was enrolled in a multimedia class at the Berklee College of Music. The focus was on Flash and ActionScript. As a final project for this class, I saw an opportunity to turn my teenage bookmark fretboard shape experiments into a tangible (and interactive) digital form.

I called it Neck Art!

Watch the video directly below to see a short demonstration of how the Neck Art Flash app worked.

2)

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

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

2)

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

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

3)

In 2010, Apple released the first iPad. With this new device on the market, I set out to re-imagine NeckArt.

I soon had ideas about what NeckArt might look like with a larger screen. I designed mockups for a full-featured native iPad app, and renamed it FretArt.

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

3)

In 2010, Apple released the first iPad. With this new device on the market, I set out to re-imagine NeckArt.

I soon had ideas about what NeckArt might look like with a larger screen. I designed mockups for a full-featured native iPad app, and renamed it FretArt.

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

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

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

4)

Another six years passed. 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 by making it my capstone project (which will be the focus of the rest of this case study, so buckle up!).

The first task was to retool the graphics for retina screens.

This meant a major overhaul of all of the assets, including transforming the guitar into a simple outline and then experimenting with various flat-graphics styles.

4)

Another six years passed. 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 by making it my capstone project (which will be the focus of the rest of this case study, so buckle up!).

The first task was to retool the graphics for retina screens.

This meant a major overhaul of all of the assets, including transforming the guitar into a simple outline and then experimenting with various flat-graphics styles.

5)

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

5)

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

6)

Once the UI felt complete, I focused on the logo.

Alongside working on the logo, I recorded 49 audio clips (one clip for every note on a 24-fret four-octave guitar fretboard).

The screenshot image below shows the 49 audio clips color coded by octave (in Ableton Live).

This case study continues on the following page with a deep-dive into color and code. Click the link below to view the fretShapes case study part 2.

6)

Once the UI felt complete, I focused on the logo.

Alongside working on the logo, I recorded 49 audio clips (one clip for every note on a 24-fret four-octave guitar fretboard).

The screenshot image below shows the 49 audio clips color coded by octave (in Ableton Live).

This case study continues on the following page with a deep-dive into color and code. Click the link below to view the fretShapes case study part 2.

fretShapes part 2

From NeckArt to fretShapes

1)

2)

3)

4)

5)

6)