We made a free guitar fretboard visualization web app

Show and Tell
#1

My friend and I were sick of searching Google Images for outdated fretboard diagrams, or using old sites with ugly UI’s when learning scales/chords, etc…

So, being a UI/UX designer and my friend a developer, we created one from scratch at https://fretastic.com

We’re working a ton of this to make it better, but we already have a ton of features atm:

  • Backing Track Player
  • Show Scales, Modes & Chords in any Key
  • Show 3nps or CAGED positions
  • Show scale degrees
  • Highlight Triads / Arpeggios
  • Highlight root note
  • Control the # of frets displayed
  • Add or remove strings
  • Create custom tunings
  • Share page with all settings in tact (even with a backing track)
  • Flip fretboard for left handed players
  • Works for all mobile devices
  • Installs as an App on Mobile Devices

Feedback is appreciated!

9 Likes
#2

Nice!

This is a really elegant UI and presents the information in a clear and succinct way. I especially like the scale fingering mode!

A few other useful scales:

  • Chromatic
  • Whole Tone
  • Diminished (Half-Whole)
  • Diminished (Whole-Half)

Other Modes of Limited Transposition: https://en.wikipedia.org/wiki/Mode_of_limited_transposition

Another useful feature for the ‘Scale Notes’ section, would be an option to display intervals that relate to the Root / Key Center. This is a much more musically useful concept then the intervals between each note of the scale.

Like if I want to use the lydian mode, I’m thinking about the #4 interval (from the root) - not the fact that the fourth note is a whole step up from the third note.

In a similar vein, it would be cool to “build your own” scale or arpeggio from intervals, and see it mapped over the fretboard.

3 Likes
#3

Great feedback! Yeah, we plan to add a lot more scales for sure.

#4

12notes
12notes512×512 13.6 KB

Awesome job.

I’ve been developing an app but I don’t have the time to finish it.

As a visual thinker, one of the things I came up with ( sure others have tried it before ) but I’m going to give it to you if you want to use it, go ahead.

For the scale degrees. I developed shapes that had space in between to put numbers text or other symbols even.

Root = circle
2nd = heart
3rd = triangle
4th = square (rotated as in the image)
5th = pentagon ( or house shape )
6th = hexagon
7th = star shape

You get shapes telling you things, then you can use colours to say natural, flat or sharp. Make this a branding thing or something. Use on the fills or the outlines.

I actually wrote the whole thing up in vectors for native android but I lost the code with my computer dying, may have it on my time machine backup but I need another mac to restore to :frowning:

Love the name, I’d love to collaborate if you guys need it in flutter since it works everywhere. Just need some encouragement and company to do it with.

#5

Nice. This is a PWA built with Nuxt/vue.js. So, it works as an app that’s installable on iOS and Android. Of course though, it’s not as performant as a native app, but my partner may also build this out as an actual native app for iOS/Android to get us in the actual app store.

1 Like
#6

That great.

Nothing like native, I had it scaleable to show any number of frets, with sounds and haptic feedback, fretmarkers and dots, fret and note highlighting for visual aids. was going to start designing mini lessons, so this was an interactive canvas to author lessons.

The haptic feedback felt very cool; running your finger up and down the fret board; you 'd almost swear it had bumps on the frets :slight_smile:

edit: for your app; when you highlight a note also highlight the sting and fret; it makes a huge difference. Just noticed you got is scalable to; try to make it trapeziod shaped, and frets with the right distance (used a real fret calculator on resizing) there’s library you can convert (stringlength to nut fret distance ratios) this is how I had it. But id does make your canvas a bit complicated, specially placing your symbols and touch detection boxes, but you only have to do it once.

1 Like
#7

Depends on who you are and what your training was. But, that’s just nitpicking.