Refactor chord style #3
Conversation
- Variables for base colors - Variables for inline SVG for chord variation backgrounds - More chord colors
|
Here's a suggestion for the design for the chords. I took some shortcuts for sake of time, and it needs a little tweaking, but you'll get the general idea:
|
|
I like the idea, and with the chord labels on the lyric I think we can probably hide the legend by default, maybe even get rid of it. That'll look way better on smaller displays like iphones. One of the issues I was hoping to improve on from the ASCII chord docs is being able to know the current chord from a visual cue that you don't have to scan back for. Is there something we can do for a long lyric segment on the same chord so that you don't have to scan back to the beginning of the segment? Given the number of variations on a chord, it's probably not feasible to have different color/shade combinations for each one and still have decent contrast, so I was thinking use the color to indicate the base chord and use something else to indicate the variation. Text is probably not the best approach even if it's mostly opaque (did I just commit a huge design sin there?) but I don't have any better ideas. |
Personally, I think the legend is the most useful parts when you know the song lyrics but just need to see the chords, so I'd suggest not ditching it entirely.
You mean other than the little labels? |
Makes sense, maybe both sections could toggle on and off?
They work great for short phrases. I get lost on the longer ones, eg:
If I'm following the words, when I get to "wrist, and" I can tell that the base chord is G because of the color. But I don't know which variant I'm supposed to be playing and transitioning from to the next chord. I'd have to scan back to "Time" and lose my place and mess up the transition. |
|
Thankyou |
Trying a different visualization for chord variations. Keeps the base chord color the same and adds inline SVG opaque background images for things like minors, 7ths, etc.