Mockups/new design discussions

Not it’s possible in GTK2, but I think GTK3 it’s the future, we can use transparencies in GTK3 and In GTK without the alpha,

@madsrh, @luxamman, I recommend you transparencies up 0.96 +, ( rgba(0,0,0,0.97) ) After two months of using my own theme, I discovered that transparencies beneath 0.96 with certain backgrounds become a headache to read texts.

3 Likes

I love this concept, only without a few paddings

Alright, I’ll take another stab at the white one. Just to be sure: padding where?

That’s very true, but we would need blur for that kind of style. I had to get rid of the blur in my mockups too…

I reworked my mockups (V22Nov17) - no blur, new button design (with the idea of instead of giving the button a color, just give the color to the border), window transparency (96% in window and 100% in fullscreen) reworked window buttons (not in every mockup) and tested some colors for the window content.

I still orient myself strongly to the basic design, without changes to the elements, also because I do not know exactly how much is possible. I think @madsrh idea about header-/titlebar less look is interesting but is that possible for now?

Thanks to all, looks like we are slowly encircling the design by excluding :slight_smile:
Stefan

1 Like

I’ll need to do some testing. Chrome is a little iffy with using background images for maximized windows and I don’t want to resort to hacky stuff. Using a native icon pack is easier, but I get your point, “It looks like Windows 10” :laughing:

If I remember correctly, that’s the way Adwaita does it. What if “Sign In” remains in full colour but “Cancel” remains with the border color?

On the GDM mockup, since background-images aren’t possible on the lockscreen: what if instead we use a solid colour (purple - #5D2B50) and apply a dot pattern over it? Similar to the old Unity greeter.

Unity Greeter
Example of Proposed Way

I did this with CSS:

background: #5d2b50 url(“ubuntu-dots.png”);

I know it looks not so good, but that’s because I couldn’t find the original Unity dots.

2 Likes

Really nice @godlyranchdressing! :slightly_smiling_face:

But I don’t think url("ubuntu-dot.png"); is allowed (@didrocks will know), but we could do something like this: https://codepen.io/madsrh/pen/pdVZRz

You can do it, the noise pattern is loaded that way :wink:
It can be either a gresources or a relative url on disk (relative to the current .css file)

here

1 Like

almost everything is implemented by CSS 3, in some cases it is possible to overflow some widgets (negative margins), but it is better not to use it.

please see this:
https://ubuntucommunity.s3-us-east-2.amazonaws.com/original/1X/113b676dfe90ec52dfb6a0f49f845bc697f39123.jpg

if you know something about css, you can experiment with GTK Inspector

I like the idea of using the “task view” logo for "activities and give the Ubuntu logo to the “apps” button.

  • This will help windows converts. (“task view” shows running apps, “OS logo” shows installed apps)
  • This will help Unity refugees (Ubuntu logo on unity shows list of installed applications, not list of open applications).
  • This fits the upstream design.

In the meanwhile, we can continue talks with Gnome to find a better long-term solution.

3 Likes

One thing to keep in mind is that Unity8 was designed for the more “traditional” window layout: headerbars and client-side-decorations were not considered in the design afaik. As a result: the top bar of a window is the same color as the panel and dash because all three are “owned by the operating system”. They are not “part of the application”.

With Gnome3, headerbars and CSD, this isn’t true anymore: headerbars are “part of the application” so the style should match the application style more than the dash and dock style, like in the following two examples.

Files V22Nov17_LIGHT

V22Nov17_LIGHT_ROUND_SOLID

I think the first one is the best of the two because the headerbar is more clear, which will give users more confidence. (even with CSD, the headerbar still has distinct functionality; you can click and drag the application using the headerbar, but not using the rest of the application)

1 Like

I’d also like to draw your attention about the UX of the max/min/close buttons. The issue with ambiance is that the click area is wayy to small, making it hard to hit it. You don’t notice this until you’ve used Adwaita or other OS’s for a while.

One of the ways to solve this is with a theme like Nautilus_V22Nov17_A - higher contrast

Here, you can make the entire area around the X clickable, not just a small circle. If the user clicks in the upper right corner of the window, the window will close, even if he doesn’t click right on the x. The size of the click area should be made clear when the mouse hovers over it, however.

1 Like

Great feedback @merlijn-sebrechts.

Are you involved in the upstream Gnome discussion?

No, “we” is used very liberally here :wink:

1 Like

This combination of colours used in Files V23Nov17_DARK for the sidebar, headerbar and other elements is my favorite so far. It just looks so clean. Modern too, even without the transparency. The shade of black I used for the headerbar (#181818) seems like way too much in comparison.

I managed to recreate the Ubuntu dots (pretty closely, I think): See here.
I’ll continue looking for the original since I can swear I once saw it for download on the Ubuntu brand assets page.

4 Likes

I see you should find the reference in the unity-greeter source package (for lightdm). However, I like the pure svg option, we can imagine transitions later on, or having a dynamic GDM screen with more and more dots as we get closer to the release date :wink: But that’s not for V1, let’s dream again about dynamic wallpapers :wink:

1 Like

+1

I remember seeing the dots on the branding site too. Perhaps the design-team can provide the original ones? @popey will know who to contact. Isn’t the pure CSS thing an option?

@godlyranchdressing I’m not sure I understand how the transparency thing works? Is it something that we can add and if it isn’t supported it will just show a solid white (like HTML) or will the theme simply be broken if it’s unsupported? ( Sorry for the tech newbie questions :upside_down_face: )

1 Like

I’m not sure. I’ve tried using them in the past but it seems like complicated gradients like that aren’t available for the Shell. I actually thought gradients weren’t possible at all until Ambiance, which did it using:

background-gradient-direction: vertical;
background-gradient-start: $gradient_start_value;
background-gradient-end: $gradient_end_value;

So only simple gradients are possible, it seems. There’s also the benefit of the svg option being a simple file swap.

What transparency thing? Sorry for the confused person question.

EDIT: I forgot to mention this in regards to the login screen mockup. The “Unlock” button is the only one that’s available to easily style (it’s in the “.default” class, whereas the Cancel button is just a regular button). It’s minor but just letting you know as well as others.

1 Like

I wasn’t sure how to illustrate this, so I made a video :video_camera:

These controls are a bit bigger and when hovered, you can see the clickable area. Maybe the min,max and close icons are a bit too far a part (the square is the same width as the titlebar height). And maybe the hover color shouldn’t be orange.

https://youtu.be/reIYDywqAKA

2 Likes

Hi madsrh, there is a problem with big corners, in the head is possible but in the footer the overflow content. you see:
border-corners

it’s possible use padding, but widgets do not reach the edge:
window padding

2 Likes