Mockups/new design discussions

You know me, I like it cold and dark so I vote for the third option #232323. More seriously, I really think it looks sharp and clean.
I know the you Carlo don’t like the dark and we don’t have to agree - non of these will keep me up at night.

3 Likes

Indeed, seems like the permission didn’t propage. I just did a copy with the correct access (editing the oriinal post as well). Please have a try with https://docs.google.com/presentation/d/1sDY1dT31v7vTmYQmJNMkwG9PNjLj3RAwwrlKm2aV3z0

2 Likes

This is working for me, thanks!

Just some input on the grey tone selection, unsure if that applies to your will, but I just wanted to explain what we did change in the GNOME Shell gey:

  • the upstream GNOME Shell grey is blueish, in RGB terms, it’s x, x, x+2
  • I thus changed those blueish grey to a brownish one, by just swapping the +2 offset on the red, like x+2, x, x.

This ended up in a way warmer feeling overall (which seemed more “ubuntu” to me.

2 Likes

Thanks @didrocks, I’ll try this change with current colors and see if the result is appreciated here :slight_smile:

2 Likes

So, here the results. Note that I used the same color for headerbar and top panel in gnome-shell (which I suggest to do), but the latter is slightly transparent and looks a bit different.

Current
image

#2B2929 (x+2, x, x)
image

#2B2927 (x+2, x, x-2) This is just my idea, since in the previous one I can’t really see much difference, but maybe it’s too brown-ish
image

8 Likes

I like the simple x+2, really not as cold as the current one.
IMHO, the (x+2, x, x-2) to be a little bit too brownish or anything? Maybe we can just try with x+1 as well (and (x+1, x, x-1))?

2 Likes

Also the second one #2B2929 (x+2, x, x) :+1:

2 Likes

Hey there!
The next milestone is approaching and so I will again throw some thought into the ring.

  • Change the terminal back to the Ubuntu style (black/red background - Issue created)
  • Volume slider arrows out of vertical center (Issue created)
  • Slider handle transparency on non focus windows (Issue created)
  • Right-click menu - would like to see more vertical space for each row and a smaller text size (Issue created)

Have you thought about:

  • Change the pure orange for selections to a softer orange like in actual Ubuntu (16.04) to make the orange less dominating and the contrast flatter?
    18.04 - 17.10 - 16.04
    orange
  • Checkboxes and radioboxes - we have two designs now - the one in “Files” an the one for example in “Tweaks”
    radio
    I would prefer the right one as default, this follows the overall design with defined color focus points.
  • Dark button click color in f.e. “Files” settings:
    VirtualBox_Ubuntu1804_23_01_2018_15_15_22
    When clicked, the buttons turn darker - but this is very hard to see, especially on bad monitors. The dark background and the click-color are too close in contrast. (Issue created)
  • Seems the green switches have an inner-shadow now - do we want that? Would be the only interaction element with a kind of shadow. This is in the mockups from the Ubuntu team, but I don’t think this need to be the only element with a shadow. Looks also a little clumsy.
    VirtualBox_Ubuntu1804_23_01_2018_15_03_49
  • Breadcrumbs? What became of my suggestion and what about it? Actual it still is a grey underline.
  • Connected Buttons? Where are we heading? Have you tested possible designs?
  • The Dock is still not where it should be. Can we keep the inner-shadow only on the top of the Dock? What about a smaller app-launcher button, but with a shadow on the top instead of a straight background? More transparency on the app-launcher button background?

I know these lists are not handy to work and discuss, I also created some Issues in github to discuss the single points.
Stefan

1 Like
  • Change the pure orange for selections to a softer orange like in actual Ubuntu (16.04) to make the orange less dominating and the contrast flatter?

    I do like the current orange tone better

  • Checkboxes and radioboxes - we have two designs now - the one in “Files” an the one for example in “Tweaks”

    Also prefer the right one

  • Seems the green switches have an inner-shadow now - do we want that?

    Not really the only widget with shadow, pressed/toggle button has it as well. Is it really the Ubuntu mockup? It looks like the one we have now :smile:

  • Breadcrumbs? What became of my suggestion and what about it? Actual it still is a grey underline.

    mockup with dark bottom line is ready in one of my branches. I’m not totally happy with the highlight on the arrows, but I can push it so we have something to see and discuss.

  • The Dock is still not where it should be.
    This is for sure the biggest problem so far

Also this from a previous comment

The bar at the top is no longer transparent but totally black, I find it less beautiful (except if the wallpaper is dark and in this case it does not change much)

This is true, but I lost track of why we did that

And here they are :smiley: (top one is the current version)

1 Like

Looking good! My personal choice would be between #2B2929 and #2A2928. What about #2A2929 (maybe too subtile)?

Also, let’s wait for the other to answer :wink:
If so, I think this kind of pattern for grey should be used everywhere.

1 Like

I can hardly see any difference (at least on this screen, maybe later on my notebook :smiley:) in x+1 or x-1.
#2B2929 looks actually better for me too.

Looking good! My personal choice would be between (x+2, x[quote=“c-lobrano, post:198, topic:1898”]
The bar at the top is no longer transparent but totally black, I find it less beautiful (except if the wallpaper is dark and in this case it does not change much)

This is true, but I lost track of why we did that
[/quote]

On that one, I think we should really follow upstream with the transparent / dark switch when an app is next to it. It’s a GNOME feature and behavior that we shouldn’t deviate from IMHO.

(will comment on the other points later on, but want to wait on other’s feedback first ;))

3 Likes

I really like the solid orange color too! If @luxamman feels that this steals too much focus, we could make use of the orange line here: like this old mockup

Side note: Window$ and O$X both use gray.

+1 for green

A lighter headerbar would make the contrast better, but I really like the dark hearderbar. Looks like the click-color is #c1c1c1, could we try to make it darker?
Also in the screenshot above, the deactivated buttons look kind of loose. Perhaps a darker border or a very lightgray bg?

buttons_again

+1 for no shadow. They still look too big to me. Compared to other themes, the same applies to radio and checkboxes. Could we try making them a bit smaller? @godlyranchdressing

I also like 2B2927, I’m not much into the too-black version :slight_smile:

Speaking of the buttons, I’ve not following all the discussion, but they’re the only thing that doesn’t convince me much so far. Or better, i’m not much in love with the bottom border. They look like they’re too much out of context.

I really like the buttons and the bottom border! Very Suru… :slight_smile:

1 Like

I’m in complete agreement with the suggestions that @madsrh has :wink:

1 Like

Thanks,

I also created issues for:

  • Checkboxes and radio buttons design change
  • Click button color darker
  • Switches smaller without inner shadow

+1 for lighter grey


About the dock - maybe we can solve some problems by changing the dock itself since it is a fork. @didrocks will know and maybe he can help us with it.

  • The overall inner-shadow is not working for example with the square elements - so I would like to see the inner-shadow on the top only. Just for the separation of the top bar. Sometimes -10px works, maybe we can add a fixed element to the dock? This way it would look more like a glass-element but I still don’t want to lose the shadow on the top…
  • The dark square is not very nice looking, the hiding mechanism is also working very strict:
    VirtualBox_Ubuntu1804_24_01_2018_12_24_23
    Is there a possibility to soften this hiding mechanism a little? This is tricky, but maybe there is a solution to make something like a shadow but instead of a color, it add’s transparency to hide the icons. Ideas?

And again the points like months ago for @didrocks - I still would love to change the dock a little:

  • Making icons smaller, less clumsy and more elegant. Also giving more space for the indicator points. The position would not be centered, but a little to the right.
  • Indicator points are centered between the icon and the screen border, also a little bigger. In the actual system, they are never centered and sometimes overlapping the border.
  • Giving the icon on the top a little more space to the top - the actual dock has more space between icons than between the top icon and the top bar.

Since the dock is a fork, this changes could bring an additional design bonus to fit the system and just look better. The icons are just tooo big IMHO…


Thanks to all!

3 Likes

On the dock. I read here that you discussed it a little bit about not being able to theme it while I was on holidays. Do you mind describing a little bit more the issue?
There is an option which we keep to false “org.gnome.shell.extensions.dash-to-dock apply-custom-theme”. I looked at the code, this only adds “dashtodock” class to the dock itself to differientate from the dash one, which could be used in the general Shell theme.

So, I would be in favor to do most of the changes in the themes (in term of maintainability), and if someone should be done in the theme and couldn’t, we talk to upstream about adding the correct class to support it. :slight_smile:
Am I missing anything?

That’s maybe the issue you were seeing: dashtodock has its own css file shipped in the theme (this is how “shrink” and others properties are different: they just change the class name and apply the new style thus). This css files is applied last for the theme, and it seems it overrides the general theme thus.
I would propose to remove this css file in our fork and just implement that in the general theme, wdyt? (/!\ it means I need to upload this modified dash to dock in the ppa and keep it up to date or find a clever way to change this on the per session stuff…).
It means that we will port all properties from stylesheet.css to the general theme, which is a better place for this particular use case IMHO (and let also other theme creators style it).

I’m not sure to get what you mean here. I don’t see any inner shadow between elements?

The dark square (I guess when you select an element) can surely be styled once the restriction above is lifted.
hiding mechanism: that’s indeed a little bit more tricky. However, it looks better on my ubuntu session than apparently for you, note the transparency + shadow. See the bottom and top icons:
dash-overflow

The default is shrinked (from your screenshot, it’s not enabled apparently), so giving less space to icons. We can change default icon size (I always set them to 32px personnally). However, IIRC, the 48px default was selected based on user testing.
Indicator position, size and spacing should be able to be changed via css.

Same, should be doable with a :first-child css class.

So, it seems that overall, all requests can be changed without any code modifications, just ensuring the css file doesn’t override the shell theme, am I right?

As a first approach, we can directly patch the css file /usr/share/gnome-shell/extensions/ubuntu-dock@ubuntu.com/stylesheet.css if you want to ensure this is doable :wink:

1 Like