New piano design with optimized contrast

[RebeccaDeField]

In this pull request I have:

• Redesigned look of the piano
• Fixed alignment issues in piano roll
• Optimized the overall contrast

Screenshots

Fixes #3018

@simonvanderveldt @Umcaruje @tresf

[simonvanderveldt]

Looks great/a lot better! It also works for the black keys, right?

[RebeccaDeField]

@simonvanderveldt Thank you :) Yes, the black keys look the same as in the mockup I posted earlier.

[Umcaruje]

I still kinda think the green is a bit too overwhelming and I would have it as an transparent overlay over the keys so it kinda blends in with the white and the black. This would also make a nice distinction between pressed black and pressed white keys. Just my 2 cents.

That said, if I'm in the minority and you think that the overlay idea is not good/doesn't provide enough contrast, I won't oppose the merging of this PR 👍

[tresf]

I still kinda think the green is a bit too overwhelming

Remember, this only shows during a live preview. Overwhelming is usually a very short lived time span. 👍

I guess my point is we should demo this. 👍

[RebeccaDeField]

@Umcaruje I think you have a good idea. Let me try it as an overlay and see how it looks in action.

[RebeccaDeField]

@Umcaruje Mockup:

I tried your idea a couple of ways and this is the best that I could come up with. Please let me know if you had something else in mind.

[Umcaruje]

That looks perfect to me 👍

[RebeccaDeField]

I will update this pr when I get a chance and if there are no objections, I will go ahead with @Umcaruje's tweak to the design.

[RebeccaDeField]

Updated screenshots:

[simonvanderveldt]

@RebeccaDeField just tried your branch (it's master, right?) and I do have one more suggestion, I'd very much like it if the color of the keys matches with the notes in the Piano roll, which it currently doesn't. Because they're both green it looks a bit odd imho.
What's do you think about this?

Screenshot of the colors in the Piano Roll as I got them running your branch

[RebeccaDeField]

@simonvanderveldt Yes, it's the master branch.

Is this what you mean?

[musikBear]

@simonvanderveldt uhOh.. not sure about that! A difference between pressed keys and inserted notes are quite important. If those are the same, i fear it will look confusing, when a note plays, but another area of the same color is briefly active. This would be disturbing for the eyes, especially with short notes. It will be a kind of competition for your eye-focus, and that will not be nice. @RebeccaDeField you can try and test if that is a correct assumption :)

[tresf]

A difference between pressed keys and inserted notes are quite important. If those are the same, i fear it will look confusing

You guys are splitting hairs. These notes are only highlighted while you're clicking them or playing a keyboard.

[simonvanderveldt]

Is this what you mean?

@RebeccaDeField Yes, that looks better to me :)
The piano key seems a bit dark though?

@musikBear actually that isn't the case, the final color you get in the grid is a combo of the background color + the note color and it's alpha level. So the colors will never be the same.

[tresf]

@simonvanderveldt Yes, it's the master branch.

Is this what you mean?

That green is now quite close in darkness to the black. How does the black key overlay look?

[RebeccaDeField]

I'm thinking that it might be best to lay out all of the options and get a vote so that we can go forward with one of these options as there does seem to be a lot of ideas and it would help to have a solid direction for the pressed keys. :)

Option 1 (Solid)

Option 2 (Transparent)

(Edit: Updated screenshots for both options with the same hue and saturation as the notes as per @simonvanderveldt's request)

Option 3 (Transparent white, solid black)

Your vote?
@simonvanderveldt @tresf @Umcaruje @musikBear @vlad1777d @Spekular @mikobuntu @eagles051387 @grejppi

[tresf]

Like a broken record, I vote for whichever version has higher contrast on the black keys, which is what is the major problem in #3018.

[simonvanderveldt]

I'm for 1 but based on the green note color (#0bd556).

[RebeccaDeField]

I have just re-read your comments and I believe I understand what you you mean now. You were wanted the hue and saturation to be more consistent, not the keys to be the same exact color/shade as the notes, correct? If so I can just update option 1 and 2 and remove option 3.

[simonvanderveldt]

I have just re-read your comments and I believe I understand what you you mean now. You were wanted the hue and saturation to be more consistent, not the keys to be the same exact color/shade as the notes, correct?

Correct :)

[simonvanderveldt]

Like a broken record, I vote for whichever version has higher contrast on the black keys, which is what is the major problem in #3018.

@tresf I think both proposals as that are now shown in #3077 (comment) solve this issue.
Do you feel one of them is better than the other?

@RebeccaDeField I'm going with option 1/solid, it gives a bit more contrast and looks a bit clearer to me.

[tresf]

Do you feel one of them is better than the other?

1 although sounds like people want the best of both worlds (option 2 for white and option 1 for black)

[RebeccaDeField]

@tresf you mean to make the white keys transparent and the black keys solid?

[tresf]

@tresf you mean to make the white keys transparent and the black keys solid?

Effectively, yes. I think it's the best of both worlds (perhaps not the best from a code perspective).

[RebeccaDeField]

perhaps not the best from a code perspective

Sorry, I'm not sure what you mean by that. Wouldn't this be done using pixmaps?

(Edit: uploaded the wrong screenshot. Fixed now)

[tresf]

perhaps not the best from a code perspective

Wouldn't this be done using pixmaps?

In that case, I redact that statement. 👍

(Edit: The Edit looks great)

[RebeccaDeField]

@tresf I'm glad to hear you like it. I added your idea as an option in my previous comment and I will count it as having your vote already :)

[Umcaruje]

I'm still for option 2. Option 3 is kinda ok, but I don't prefer the non transparent overlay on the black keys.

[musikBear]

Honestly, i think we just have to understand that consensus wont happen :) I'm for one ok with either. Both are visually fine. Good work @RebeccaDeField and admire your patience

[mikobuntu]

option number 3 looks good to me @RebeccaDeField :)

[Umcaruje]

I wanna add that if I were to pick between options 1 and 3, I'd go with 3.

[simonvanderveldt]

3 looks good to me as well 👍

[midi-pascal]

3: 👍

[vlad0337187]

@RebeccaDeField , I vote for option 3, because I like that colors better of all other.
I think that there's no need to make something transparent, just to take that colors and make them solid (there's no need to make extra calculations while runtime, such colors will be constant at any case).
Option 1 has "too green" color, there is too little of blue component in it, in option 2 pressed black key is too dark.

And it's so flat. I know, that it's such minimalistic design, but I wanted a little volume to black keys in Piano Roll
(not white, because when you look to general keyboard, white keys look like flat because we see only their surface in one plane, black have a little volume, because there is a little slope on their sides)
(at least to unpressed black keys, maybe pressed can be such as they're now to be more noticeable)
because current look seems to be a little bit pour.
I'm not asking you to make all completely different, but all other buttons, panels on your screenshot have gradients, it looks like a little volumetric. And such flat keys are struggling from all picture.
(your screenshot: https://cloud.githubusercontent.com/assets/204286/19496266/0c3e4f7a-9587-11e6-892b-ce5bbd1a2739.png )

But anyway it's good. Thank you for asking of our opinion.

[RebeccaDeField]

I think that it's clear #3 is the winner here. :)

@vlad1777d

And it's so flat. I know, that it's such minimalist design, but I wanted a little volume to black keys in Piano Roll

I see what you're saying here. If you look at some of my previous designs the piano did have a lot more depth, but I received requests to make a clean flat design simalar to what the Piano Roll looks like in the Single Window design.

I left in the border, gradients and such so that I could reach a middle ground with flat vs skeuomorphism, but I think adding a touch more depth to it while maintaining that flat look that people had requested is very possible (please see design bellow.)

---

After reading over all of the feedback, I would like to propose this design as a final compromise for this Pull Request. If we encounter any problems with the Piano Roll we can make further changes, but the only way for us to know if the design really works is to use it :)

Next to the option 3, you can see that my idea above has very minor differences.

[vlad0337187]

@RebeccaDeField , yeah, as for me, your last modification it's much better!)))
It's still flat and fits "minimalistic" style, nothing extra in it, but it looks a little bit more "rich".

White at the left (start) side of key looks a little bit strange - seems that sides, that must be more hided from light, are more light than the other side. If to try to reverse it:

and to add there extra borders to imitate black key's slopes?

@RebeccaDeField , what do you think about this (last picture)?

[RebeccaDeField]

I like your idea for a more realistic piano, but I think that it might have a bit too much depth for the people that wanted a flat design and I am concerned that the white keys might not look consistent when there are varying widths of borders.

I updated the lighting to be based on your idea, while also keeping the much requested single-window look.

[vlad0337187]

@RebeccaDeField , thank you.
I like your work, but for me it seems sometimes too flat =)

Are you sure that such "extra" borders are non-consistent with other keys? Because as for me, they visually merge with the black keys and make a little volume (if not to zoom it).

And your first extra-flat design (option 3) seemed non-consistent with other elements for me.

But anyway, your choice will be decisive because you're designer (I mean artist), so I'll must to agree with you =)

[RebeccaDeField]

I like your work, but for me it seems sometimes too flat =)

I agree that the piano was a bit too flat and I think your feedback improved the design. :)

But anyway, your choice will be decisive because you're designer (I mean artist), so I'll must to agree with you =)

In the end, this is an Open Source project, and if you feel that my new piano does not work once it has been pulled in, please feel free to make a new pull request to update the design! I have no problems with others editing or improving my work, and I do not see myself as the one with the final decision. If every design choice was entirely up to me, everything would look a bit different because I am only one individual. The theme we have now, including the piano is really a collaboration and everyone influences the final design 👍

[RebeccaDeField]

Now that we have collaborated, voted, and tweaked according to all of the feedback, I am planning on merging this PR if I receive no further objections in the next couple of hours.

[miketurn]

@RebeccaDeField
Great redesign for keyboard graphics, looks great, glad to see this was implemented in 1.2.0 RC2

[vlad0337187]

Good news.
I'm waiting for it in release =)