Mockups/new design discussions

Speaking of greys, as a FYI, most of the greys in GNOME Shell by default are something like (in rgb): x, x, x+2, making a blueish grey.

For 17.10, we turned the grey to be more brownish (and warmer), it’s really easy to spot the difference when you switch between the 2 values! For this, I simply did: x+2, x, x.

That was my insight :slight_smile:

2 Likes

@wfpaisa@isantop Are windows with rounded edges at the bottom like this possible?

I’ve been looking at themes like Arc, POP, Adpata, Radiance, Minwaita, Gnome OSX and United and ALL of them have straight edges at the bottom. Only Elementary OS have rounded bottom edges and it’s only a few pixels. This would certainly make Ubuntu recognizable.

Sound like Ian says its possible, but I know nothing about coding, so please let me know if we have to kill this concept for good.

4 Likes

Yes, they’re certainly possible. You need to make sure that every widget with a background color set has the same radius for the bottom corners (or at least for those that align with the corners of the windows). But if you do that, everything works normally. Pop even includes support for granite .rounded style classes for applications that use that, like Dan Foré’s Harvey.

Screenshot from 2017-11-29 09-51-10

This doesn’t necessarily means it’s a good idea. It’s imposing a lot of restrictions and could very easily break some apps in corner cases (no pun intended), so it’s probably better to go with a much more subtle rounding. Extremely large radii on windows don’t improve usability.

3 Likes

Funnily enough, I spent some time in Unity 8 yesterday and the .95 alpha value used there actually seems to be the closest approximate I could get.

I’ve been testing the Shell menu colors. I used the original #181818 with the same .95 alpha, seen here:

Screenshot from 2017-11-29 12-50-57

At the very least, it’s feasible for dialog windows. There’s also always the Shell.

modal

I just did this in an attempt to mimic Unity 8’s dialog windows (which use whites and grays) and open us up to not having to stick to blacks and grays for everything, but they can be styled based off of your mockups.

6 Likes

It might be okay on shell dialogs, if we want to draw a distinction between them and GTK dialogs. However, I would like to stress again that extremely large ( > 10px or so) radii on the bottom corners of windows is a BAD IDEA and we shouldn’t look into do it. They don’t add anything to usability and will break many apps, requiring massive future maintenance overhead.

We should stop trying to address if we can do something until we clarify if we should.

3 Likes

Login Back Texture Test V29Nov17

Shattered is the best one, but I really don’t think any of them work. This just like the current Noise pattern in 17.10, at first boot I thought something was wrong with my graphics driver :wink:

Well, there are much more textures to try. I do think some of them have style - and the alternative is a pure background color since we cannot use wallpaper on the login screen… Its different from the actual login screen, but still use an Ubuntu way of styling. Also too fine and too distraction textures just don’t work at all.

Linux user :grin:

That’s something we maybe don’t need to pay attention^^

3 Likes

It would be great “overflow: hidden”
A border radius implies all child widgets with the same border-radius.
Maybe it’s possible to break the border with 2 pixels of border-radius :slight_smile: .

Hey guys!

I’m sitting with the Canonical design team currently in London, and FYI, I’ve tricked them to keep an eye on this thread (we are going to do some bug fixes in Ambiance while this new default theme evolved), please welcome @mpt, @Carla, @karlos and @ya-bo-ng!

13 Likes

Just wanted to tell as a FYI that I’m off until the end of year. Other Ubuntu contributors from the desktop team will keep an eye from time to time if you need anything.
Have a good break guys, but keep coming with plenty of great ideas! Let’s see what Christmas present I and the whole community will get from your awesome work next year! Cheers

10 Likes

So while the different lockscreen mockups look great, I noticed today that they don’t all translate over so well to multi-monitor setups. I think the safest bet for something that looks good on all setups would just be a repeating texture pattern the way Adwaita does it.

@didrocks Enjoy the time off. All the best. :slight_smile:

2 Likes

Main Desktop V04Dec17

I think the dots aren’t noticable enough as indicators as @merlijn-sebrechts says. I actually quite liked the gradient effect used in this mockup.

Running and focused programs use as a gradient (or just a semi-transparent white background color) as a highlight while running programs just have the dots:

running and focused

We also have to note that the dock size is configurable so it should be something that won’t be too hard to notice across smaller dock sizes.

Terminal, Calc and Elements

The rounded corners used in the calculator unfortunately aren’t feasible because of issues similar to rounding program windows. I like the colors used for the dark theme, but I think the widgets look a bit too material design? How about the look Suru was going for?

I really like the palette and shape of this dialog window, it looks brilliant and neat. Even if rounded corners (for all 4 corners) it’s not feasible, I’d like to see something similar at the end.

2 Likes

Yes, that is of course true. For now, it is just a test to see how it will look and I think this is something to get used to. Easier is to have the white layer because this is how the Dock works at the moment. But either way, it is important for me to shrink the app icons to a normal level, to give the dots more space, and to maybe shrink the Dock a little. We’re not heading for tablets and phones^^

Also a good point, they are quite the same than in a lot of other systems - the main reason for me was because we have the round orange dot as a repeating and recognizable element.

I will have a long look at this design, I guess we can use it as input. Some elements are already formed like in our design and like in this design we maybe should think about having more colors than just orange :slight_smile:

The actual design propose is very dark in some situations (maximized window) so the next days I will try to make it more suitable for the general public. For now, I like the overall direction, it seems we do need to get brighter and a little more conservative to be eye-friendly and good readable without looking to nerdish or gloomy. So we don’t have to work on two designs for now.

In the end, Ubuntu is for all people :smile:
Greetings!

Just to reiterate, having 4 rounded corners is something that’s technically possible, but doesn’t make for a good user experience. At least with the large radii proposed so far. A more subtle rounding (4-6px) would probably be okay, but the padding requirements with the hugely rounded corners don’t work on a user-experience level.

3 Likes

oops, I actually meant “*I like the palette and shapeS of this dialog window”. I wasn’t focused on the rounded corners only, but on the other widgets as well. I understood the reason behind “better not 4 too rounded corners” :slight_smile:

Does this mean that we’ll be keeping box-shadows or scrapping them? Because if we’re keeping borders, I’d like to revisit the raised button effect seen in this mockup. Without the top highlight and some alterations it could fit in well with Suru elements.

raised_buttons

button { background: #e5e5e5; border-color: #e0e0e0; border-bottom-color: #d0d0d0; border-width: 1px 1px 2px 1px; }

4 Likes

I think It’s the best solution, I prefer (box-shadows) but this is the problem with Firefox

1 Like

I’m testing out light dialog windows for the shell. I made the volume slider use light colors for some time but I changed it back since it seemed incoherent. I tried making the buttons look like normal buttons as seen here, but since modal dialog buttons are centered aligned it just looked kind of strange.

Testing will be annoying since looking glass is a little limited (or maybe I’m using it wrong) in that you can only really inspect elements that are always on screen like the top panel and dash. There are some dialog windows that I know will need some changes but these will basically need to be made blindly since you can’t force a prompt AFAIK. i.e “.audio-device-selection-dialog”.

This is all in an experiments branch until it seems doable. (I wish there was a way to get rid of the vignette)


9 Likes

Hey there,

I still have no visible change on the top-panel and so on (why is that still?), but for now, I have some thoughts:

  • Transparency on window decorations maybe too much
  • Window min/max is good, the close button X seems not to be centered and try to give them more clickable space without making them bigger. I would suggest shrinking the orange circle a little, but still be clickable outside the circle - if possible. Also bright hover.
  • Hover on buttons on a dark background should not be dark, but bright. The dark is just not visible
  • Also breadcrumbs in “Files” are still too dark
  • Vertical separator line between in the window decorations needs also to be bright
  • The green font in the terminal is hard to read - not enough contrast between the grey and green
  • The button design is already quite nice, maybe we can manage to make it look a little more like a shadow then like a 3D button? This is so Win95^^
  • Sometimes (like in settings) there is a grey area behind the adjustment/buttons, we should make it bright to not make the text and buttons disappear
  • The text on the desktop is grey?
  • When a window is not in focus and there is a switch (the new green ones), the word “ON” appears.
  • Window decorations not in focus maybe need also to get more bright for better visible separation

Also, I hope we have more time after the Christmas stress, there is still so much to do :slight_smile:
Really want to start adjusting the dock^^

@merlijn-sebrechts why did you delete the icons PPA post?

Power Off - the red background is a little frightening, like something bad will happen when clicked. Also about the window background - maybe we have to test if we should stick with the dark color to fit the design, or if the light background fits in.

Thanks to all, I’m glad that we could set everything up before Christmas :slight_smile:

And @godlyranchdressing thanks for trying on my “Finding Ubuntu” concept^^

Keep up the good work!
Stefan

2 Likes