Mockups/new design discussions

Desktop Theme Refresh
181

I had forgotten the “no slider” change. I think It will look like the OSD volume slider, but I’ve the same doubt @luxamman has

2 Likes
182

It must have a squircle or circle to avoid being mistaken for a progressbar

2 Likes
183

I like the breadcrumbs as a visual element, but I wouldn’t change the background of the arrows, I would maybe make the arrow color a bit darker to signal their “inactivity”.

I really like the dark underline! :smile: it brings back a bit of “depth” to the design.

About #3 I agree with this:

the application designer did not choose a separator there, so probably it’s not the right thing

It’s important to respect the choices of the application designer; even though this limits us in how we can solve certain problems…

2 Likes
184

Sure!

I don’t like the loose concept and I’d really like to revert the headerbar buttons to the way they used to be: linked headerbar buttons are not flat, while unlinked ones are. For programs like Lollypop and Rhythmbox, all flat buttons are fine but for programs like Geary and anything more productivity focused, you end up with what can be a ton of loose buttons that looks like something you should blame the developer for.

headerbar
headerbar1605×49 5.76 KB

And we unfortunately can’t insert separators which we can use to sort of fix the issue.

Anyway, with the linked/unlinked distinction back, I think a modified version of the first concept for the path-bar should be used. Something pretty similar to what @merlijn-sebrechts suggests:

Some comments for the Shell:

  • The circle can’t be made into a squircle, so we should consider that in the final design
  • I’d really like the orange back in the app drawer icon (orange orb) :persevere:
2 Likes
185

As teased a week ago, I’ve looked and find some design documents about Unity 8 and phone work that we can publish. I selected the ones relevant here, and with agreement with the design team, we made them public.

Do not forget also the list of issues on the current theme that Matthew filed: Ambiance GNOME theme bugbears and what can be done about them - #12 by mpt - Desktop - Ubuntu Community Hub
I hope this could be of any use! :slight_smile:

5 Likes
186

I can’t seem to access this one?

187

Confirm, I can’t as well

188

So, following are some color I like. I did 2 things

  1. started from the current color (first picture) and tried to make it warmer (second picture)
  2. got a even darker color than the current (3rd picture) and did the same as above (4th picture)

Probably you tried this colors already :smiley:

https://docs.google.com/drawings/d/19vjXPJLk013SqZEldLwsLHtBtfLsEQ3lGEN9EK1Rtg8/edit

(hopefully you all can see this)
I decided to keep the 2nd color for a while to test it, but please let me know what you think

Note: in this pics I also used a slightly lighter color for backdropped windows (7% ligher in place of the current 5%)

4 Likes
189

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
190

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
191

This is working for me, thanks!

192

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
193

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

2 Likes
194

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
195

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
196

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

2 Likes
197

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
198

  • 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

199

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

image
image842×446 74.9 KB

1 Like
200

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