Author Topic: Small facelift  (Read 8422 times)

stevefal

  • Contributor
  • Hero Member
  • *****
  • Posts: 528
Small facelift
« on: September 24, 2013, 03:52:55 AM »
I'd like to propose a small facelift to the main layout, taking into account the new fonts and other improvement opportunities.

Steve Falcon

ItsMeLenny

  • Hero Member
  • *****
  • Posts: 923
  • 550D
Re: Small facelift
« Reply #1 on: September 24, 2013, 04:08:57 AM »
It would be interesting in addition if ML's menu reflected the selected canon "screen color".

kazeone

  • Member
  • ***
  • Posts: 119
  • 650D
Re: Small facelift
« Reply #2 on: September 24, 2013, 08:22:54 AM »
I cant wait when ML will start working on a touch friendly interface since it seems like all the new DSLR will have the touch screen ability. :) For now I like what your suggesting here.

pravdomil

  • Member
  • ***
  • Posts: 166
Re: Small facelift
« Reply #3 on: September 24, 2013, 12:47:10 PM »
nice UI, but I want to solve how to show both helps (.help, .help2) and warnings at same time
sometimes I have to turn on LV or switch something on/off to hide warnings and show .help2 which is in many cases important to see
any ideas?

arrinkiiii

  • Hero Member
  • *****
  • Posts: 1101
  • ML ADDICTED 7D
Re: Small facelift
« Reply #4 on: September 24, 2013, 01:20:38 PM »
Love the scroll indicators  :D

a1ex

  • Administrator
  • Hero Member
  • *****
  • Posts: 12323
  • Emergencies only
Re: Small facelift
« Reply #5 on: September 25, 2013, 10:04:58 AM »
Applied most of the tweaks.

To get the exact color for selection bar, one has to convert it into YUV (and I'm not sure if it's Rec.709 or Rec.601 or camera-specific). Who'd like to do the math for me?

Minor: if I use the exact color for OFF icons as for the OFF text, the icons would appear much brighter because of larger area. So I've brightened them a bit, but not that much.

sometimes I have to turn on LV or switch something on/off to hide warnings and show .help2 which is in many cases important to see
When exactly?

I didn't apply the new title font yet. When I'll do that, I'd like to remove Canon font rendering engine completely (so we should have a single way of doing these things). This also requires the icons to be in a separate RBF font (icons.rbf?)

Nightly builds are being recompiled, so you'll be able to try the new look in a few minutes.

Did I miss anything?

wolf

  • Senior
  • ****
  • Posts: 263
Re: Small facelift
« Reply #6 on: September 25, 2013, 01:12:40 PM »
Are there different resolutions of the displays depending on the model?
550D:

a1ex

  • Administrator
  • Hero Member
  • *****
  • Posts: 12323
  • Emergencies only
Re: Small facelift
« Reply #7 on: September 25, 2013, 01:14:48 PM »
Did you copy the font files?

wolf

  • Senior
  • ****
  • Posts: 263
Re: Small facelift
« Reply #8 on: September 25, 2013, 01:21:56 PM »
No, I'll try...

wolf

  • Senior
  • ****
  • Posts: 263
Re: Small facelift
« Reply #9 on: September 25, 2013, 01:26:49 PM »
Thanks, looks very nice. :-)

Doyle4

  • Hero Member
  • *****
  • Posts: 690
  • Canon 5DRAWii & 600Dual-Iso
Re: Small facelift
« Reply #10 on: September 25, 2013, 04:37:18 PM »
Are the font files downloaded with the nightly build? cant seem to see them,

Ignore that, all good and new layout is real nice n clean looking guys.

wolf

  • Senior
  • ****
  • Posts: 263
Re: Small facelift
« Reply #11 on: September 25, 2013, 08:28:49 PM »
Yes:
/ML/fonts/

jose_ugs

  • Member
  • ***
  • Posts: 243
  • 5DM3
Re: Small facelift
« Reply #12 on: September 25, 2013, 10:25:53 PM »
Okay, now things looks much slicker!!! :) Good job!

stevefal

  • Contributor
  • Hero Member
  • *****
  • Posts: 528
Re: Small facelift
« Reply #13 on: September 26, 2013, 12:40:34 AM »
Sorry for the delay..

1) I like how things are looking.

2) I found these for conversion. Not sure if they will help:

Code: [Select]
Y = R * 0.299 + G * 0.587 + B * 0.114
U = R * -0.169 + G * -0.332 + B * 0.500 + 128;
V = R* 0.500 + G * -0.419 + B * -0.0813 + 128;

2) The colors aren't working very well yet. I understand that the highlight bar conversion is inaccurate, but other colors are off too. I guess this is a palette issue. After settling the layout stuff, I'd like to take another pass at all the colors. It would be nice if any ML colors could be specified in YUV (or RGB), so tuning isn't so mysterious (to me).

3) Can you move the two help lines up 2 pixels?

4) The forward icons are not left justified with the text for me, need to move left 6 pixels.

5) The forward icons should be full white like the text.

6) I think we should get rid of the "tab" treatment in the menu bar. With increasing number of icons, they are getting so close together than there's little room anymore. Also the black tab background can be hard to see depending on final contrast (yes the outline helped, but that's another issue). So I'd rather tune the three colors (background, active icon, inactive icon) so that the UI is clear and clean. Without removing code, can you make the tab color the same as the background for now, so we can try tuning colors with that out of the equation?

7) I know you like to relax line spacing when you can, but I feel that in the 11-row case, the crowding between the bottom of the list and the bottom bar is a worse issue. To my eye, the padding above and below the list (as when the scroll indicators are showing) provides needed relief for the eye, and makes the whole layout, including the list, look less dense, even when the lines are tighter by 1 pixel. Uniformity of placement is good and I feel that the line spacing should be the same everywhere. These small things mean a lot towards achieving elegance. Perhaps you can tighten the spacing by 1 pixel as I suggested, and then after I have a chance to tune everything to the best of my ability, if you think there is a problem, we can revisit?

8 ) Regarding Canon fonts etc, are you suggesting that we put all the menu icons in an rbf font? Makes sense. Can you think of a programmatic way to port them? Otherwise I could recreate them manually, but ugh. Tell me either way.

9) I see a "G" menu in your screenshot. What is that, and is it part of the build?
Steve Falcon

kazeone

  • Member
  • ***
  • Posts: 119
  • 650D
Re: Small facelift
« Reply #14 on: September 26, 2013, 01:05:31 AM »
9) I see a "G" menu in your screenshot. What is that, and is it part of the build?

G is the game menu, so when you load a game module onto ML that menu becomes visible. :)

stevefal

  • Contributor
  • Hero Member
  • *****
  • Posts: 528
Re: Small facelift
« Reply #15 on: September 26, 2013, 01:55:41 AM »
Quote
G is the game menu

Thanks. Here's an idea:

Steve Falcon

Rewind

  • Senior
  • ****
  • Posts: 356
Re: Small facelift
« Reply #16 on: September 26, 2013, 01:13:33 PM »
These colors should have more contrast.
It is not possible to distinguish them in bright light conditions.

dmilligan

  • Developer
  • Hero Member
  • *****
  • Posts: 3218
  • 60Da / 1100D / EOSM
Re: Small facelift
« Reply #17 on: September 26, 2013, 11:14:21 PM »
I don't like the bar borders removed, I think it looks better with them than without. I prefer the aesthetics of the borders over the tiny 4 pixel savings. ML looks more refined with them if you ask me.

stevefal

  • Contributor
  • Hero Member
  • *****
  • Posts: 528
Re: Small facelift
« Reply #18 on: September 27, 2013, 01:48:59 AM »
Quote
I think it looks better with them than without.

I encourage folks to reserve judgement until the build reflects an intentional design. The current state is out of sorts due to discrepancies in color specs (and some layout).

In either case, in order to balance the sentiment with mine, I prefer the aesthetic of no borders. Every line is two more visual transitions, which, at a certain level, is noise. And given constraints and the current font set, the 4 pixels happens to be significant in this case. That said, I'm not happy with the current look yet, so I intend to put more effort into it, developer(s) willing.

In general I think that the need to dress up visuals in order to make things look good is indication of some other problem. So I hope to get to simple unadorned design that also looks good.
Steve Falcon

dmilligan

  • Developer
  • Hero Member
  • *****
  • Posts: 3218
  • 60Da / 1100D / EOSM
Re: Small facelift
« Reply #19 on: September 27, 2013, 04:43:17 AM »
In general I think that the need to dress up visuals in order to make things look good is indication of some other problem.

I don't. That's my professional opinion (as a software engineer who does a lot of design and coding of user interfaces). All we're talking about here is a simple border, I'm not suggesting gradients or drop shadows. It really helps to have clear demarkation of separate visual elements. Just look at the Canon display, there are borders around all of the different boxes. The upper-left lighter border helps give a since of depth and makes the boxes stand out while only using one extra pixel.  Borders are not "noise" they help you do more with less. It's harder to see which icon at the top is selected now because the black is so close to the dark gray icons background. Put a lighter colored border (like there used to be) around it and it stands out much more, and it just looks better.

stevefal

  • Contributor
  • Hero Member
  • *****
  • Posts: 528
Re: Small facelift
« Reply #20 on: September 27, 2013, 10:15:58 AM »
Appreciate the input. Thanks.

Steve Falcon