Very early / first concept exploring an idea to create a proper mobile web experience for learning guitar & ukulele chords. The idea is this would be SVG / symbol font powered, so that all visual elements would be vectorized and layered (i.e., finger placement elements on top of the fretboard elements).
I've proven the concept with very crude HTML / SVG / symbol font prototype, and the next step is finalize a design approach before hitting the throttle. Tons of specs and design constraints I need to work out, including:
• Determining how to diagram "muted" strings, and likewise "open" strings in any given chord.
• Determining constraints for displaying chord names. "E" and "G" and "D" are easy, but "C#m7" or "Asus4" or "Eadd6/G#" push the limits a bit. I'll want to determine if I treat chord names as a strict string, or break the chord elements into components (e.g., tone, major/minor, added bass note, etc).
• Determining support for ukulele chord diagrams, which only have 4 strings.
• How to handle displaying fret numbers alongside the fretboard? This seems necessary for displaying barre chords further up the next (e.g., playing G# as 466544).
• If a chord is open and played at the top of the fretboard, does the "nut" need to be represented differently via the fretboard SVG?
• How many frets do I show at once? Should I always/only show 3 frets, or should it support showing 4 frets as well? An example of a chord spanning 4 frets is E played as x76400.
• Figuring out how I might embed a chord diagram, or multiple chords at once, onto larger screens.
• Figure out how this might scale out of the gate to support showing chord diagrams (major, pentatonic, mixolydian, etc)
• Figure out how I design the SVGs: is each chord shape given a single SVG element, or does each chord accept some parameters to combine multiple SVG elements into the proper finger placements? The latter would allow for animations / transitions (e.g., showing the 3rd fret slide to the 5th fret in a shift between chords).
• And so on.
Lots to figure out, but these are some of the questions on top of mind with this mini-project right now.
keyboard shortcuts: ← previous shot → next shot L or F like Z toggle zoom
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2015 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.