Mockups/new design discussions

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

Yes, that’s it! Thanks :heart:

1 Like

Ahh, I see. No more rounded windows then :persevere: Sharp edeges it is then.

My mistake @godlyranchdressing, sorry. @wfpaisa already answered this here:

So are “we” (I say we, although I can not write a single line of code) planning to add a subtle hint of transparency?

Sorry, are you asking me if it’s possible to add transparencies?

No, I’m asking everyone involved, if this is something “we” (again) are working towards.

I vote for it only to be used for the headerbar/titlebar, but that’s only if we’re going to be using a dark headerbar. Are we? With a light headerbar the transparency is either distracting or so subtle that there’s no point in using it. In the case of a dark headerbar, the #181818 that’s being used is a little jarring (Unity 8’s titlebar didn’t have the issue since it was so much smaller, and yes, I know it’s darker than that in the United theme, but whatever). Today I did some testing:

I lightened the black a little (#252525 as opposed to the #323232 from your mockups) and made it a little transparent (0.96).

I find the transparency does a good job of softening the headerbar’s black without having to brighten it further (if that’s something we don’t want). I also made unfocused and maximized windows have a solid headerbar and so far it’s a decent way to distinguish between focused and unfocused windows, something that @CraigD points out is a problem with dark themes.

Transparency in the headerbar also carries over to GTK2 programs without issue and I think a consistent look between GTK3 and GTK2 apps should be something we prioritize.

3 Likes