From NeckArt to fretShapes

FretShapes is a visual representation of the ways guitar scales draw lines across a guitar fretboard. FretShapes also doubles as a playable computer instrument.

fretShapes is a visual representation of the ways guitar scales draw lines across a guitar fretboard. FretShapes also doubles as a playable instrument.

fretShapes_image
fretShapes_image

Beginning 25 years ago as “NeckArt” this project assumed several different forms during its journey to a latest-and-greatest iteration called “fretShapes.”

Beginning 25 years ago as “NeckArt” this project assumed several different forms during its journey to a latest-and-greatest iteration called “fretShapes.”

1)

During the 1990s, my father owned a bookstore, and I was a guitar-obsessed adolescent. A stack of logoed bookmarks neighbored the register and a mug filled with pens and a few pencils. While sketching on the backs of these bookmarks, I discovered the patterns that chords and scales assume as they wrap and climb the fretboard. The resulting shapes and the lines between them gradually became the stuff of art: I started to experiment with different ways of visually representing Western music’s inescapable truths, as they apply to a guitar and its fretboard.

In 2002, during my final year at Berklee College of Music, I built my first interactive version of “Neck Art” for a multimedia class that focused on Flash and ActionScrip.

1)

During the 1990s, my father owned a bookstore, and I was a guitar-obsessed adolescent. A stack of logoed bookmarks neighbored the register and a mug filled with pens and a few pencils. While sketching on the backs of these bookmarks, I discovered the patterns that chords and scales assume as they wrap and climb the fretboard. The resulting shapes and the lines between them gradually became the stuff of art: I started to experiment with different ways of visually representing Western music’s inescapable truths, as they apply to a guitar and its fretboard.

In 2002, during my final year at Berklee College of Music, I built my first interactive version of “Neck Art” for a multimedia class that focused on Flash and ActionScrip.

2)

Five years later, Apple released its first iPhone, sparking Neck Art’s rebirth as an app.

A complete set of fretboard diagrams created in Adobe Illustrator turned into a mockup of the Neck Art iphone app.

2)

Five years later, Apple released its first iPhone, sparking Neck Art’s rebirth as an app.

A complete set of fretboard diagrams created in Adobe Illustrator turned into a mockup of the Neck Art iphone app.
neckArt_full_set_image
neckArt_iphone_mockups
neckArt_full_set_image
mobile_neckArt_iphone_mockups

3)

In 2010, the first iPad beckoned a redesigned, full-featured iPad app called FretArt, which is a vector guitar with proper proportions, interface controls, and gradient-mesh tuning machines.

guitar_parts_with_peg

3)

In 2010, the first iPad beckoned a redesigned, full-featured iPad app called FretArt, which is a vector guitar with proper proportions, interface controls, and gradient-mesh tuning machines.
mobile_guitar_parts_with_peg_image

The interface features graphic guitar necks that visualize 2-note intervals, chords, and scales.

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)

Retooling for retina screens

guitar_outline_graphic
flat_guitar_graphic

Flat-style user interface design

flat_UI_images

4)

Retooling for retina screens
mobile_guitar_outline_graphic
mobile_flat_guitar_graphic

Flat-style user interface design

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.