hopefully i can attach a screenshot here... I am buried under the complexity of displaying piano notes. (hmm, thanks editor guy for including the screenshot in the message. but it's not quite hires enough so link is http://pianocheetah.com/etc/pianocheetah.png )

See how the white notes of the piano are wide at the top (as they are on piano). I need them to have tails the same width as black notes. because, musically, they're the same "width". So see how all the white notes look like "dig dug" (not sure if you're old enough to have played that video game). They lean left or right depending on the hand that plays em. And they're positioned as they are on the piano keyboard. But it kinda makes them look strange and freaky looking. Anybody got a little artistic pizazz that can help me make these things look better? Somethin curvy maybe? examples or ideas welcome.

Here is the link to the screenshot http://pianocheetah.com/etc/pianocheetah.png

thank you

1 Answer 1


Remove all borders and rounded corners and keep each cell a single solid color.

The best UI is no UI at all so make sure that everything you add absolutely has a reason for being there. Even simple things like borders and gradients can cause friction to the end user.

enter image description here

I'm not sure the keyboard is even required to be there. Perhaps consider having a way to toggle between keyboard mode and note editing modes?

enter image description here

  • I'll give that a quick try. But note "heads" are important to see - when you hit a note is more important than how long it's held. There are a lot of cases where the same note is played repetitively. Also, this doesn't get around the white "dig dug" shaped notes. They need to look as they do on the piano when hit, and thinner (as they sound) later. Let me give it a try Jan 24, 2015 at 16:28
  • I actually like how the black notes are gray lines and the white notes are white lines. I would keep that as is and just use solid colors on the already straight bars to indicate note length.
    – DaveAlger
    Jan 24, 2015 at 16:55
  • 1
    I would use the key on the keyboard itself as the "note head" maybe by having it fade to the color of the approaching note. I think it would be less distracting the cleaner you can make the lines (on the keyboard itself as well)
    – DaveAlger
    Jan 24, 2015 at 16:59
  • I'm hoping to have a first attempt, umm, prob tomorrow. Fighting an important bug today that is, rrr, not bein nice to me. Jan 24, 2015 at 21:33
  • Hmmm, well here's what they look like with just no borders. I think it's an improvement alright. pianocheetah.com/etc/pianocheetah2.png I might try putting some 45degree angles connecting notehead to tail... Jan 25, 2015 at 20:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.