Mockups/new design discussions

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

I vote for it only to be used for the headerbar/titlebar, too. (0.96) it’s the ideal value of transparency for me. windows get a modern look with some transparency.

Some windows have an ID and we can modify them, for example “Nautilus”, then we can use transparency in headerbar and list widgets.

1 Like

I think (having been there), that we should limit the amount of per-application hacks at the maximum. We used it in the past and it makes slightely different applications not looking consistent. So starting from the great common denominator is maybe more beneficial? And then, we refine case-by-case once we get the general ideas in.
Does it make sense?

2 Likes

Perfect sense. I would support transparent sidebars if we could guarantee a consistent look at least across the stock apps, but the same workaround to get transparency in Nautilus doesn’t apply to every other app. Also, not every app uses unique classes/IDs that would let us use hacks without consequence.

1 Like

You are right, it is better not to change them.


But I feel that also, we can improve some apps with a few lines of css, maybe it’s because not every application looks great with default styles.

  • Nautilus: a little transparency in file list and remove the separator between list and notebook.
  • Firefox used it only white variations (it don’t have ID).

I want people to feel like a new Ubuntu.

I am optimistic that we will achieve the best and most usable theme to avoid customizing each application. :slight_smile:

2 Likes

@luxamman, I really the desktop login of V27Nov17, it really feels like Ubuntu!

Also, about the terminal. As a red/green colorblind person, I really like the default terminal color scheme of ambiance, it makes the colors easy to distinguish for me. I don’t know who created that but they really put some effort in that! Adwaita’s default color scheme on a light background is unusable for me. In general, dark terminal color schemes are better imo.

Might be interesting to see if someone has done some research on terminal color schemes and accessibility, there’s like a whole community dedicated solely to terminal color schemes…

2 Likes

Thank’s @merlijn-sebrechts :slight_smile:

Sure we can think about the color’s in the terminal (I guess they are part of the theme as well) to find a solution for all of us to work. Even if it is just the change of a color, so as not to get too close to red/green. An interesting aspect that I would not have come to!

Personally, I also like the dark terminal much more. The slight red in the background is also a hint that this system is using Ubuntu. The white background in Gnome combined with the bright green is also for me a problem, the contrast is so little, you always have to focus on the words that just make the eye tired and is hard to read.

1 Like

The tab concept seen in Files 26Nov17_Tabs might not be possible (without relying on external assets, anyway). How about something like this?

tabs_3

I think if we’re removing the headerbar button borders then it should only be for buttons that aren’t linked to something else. This is useful for maintaining relationships between buttons but also (and mostly) to avoid situations like the following:

(remove linked button borders)
linked-entry-flat

(keep linked button borders)
linked-entry

2 Likes

you are doing an awesome work, there are something with corners and transparencies, I made a video about the windows behavior. maybe it helps you to take a decision about this.

2 Likes

You are doing an awesome work too :wink: Can you post it elsewhere or send it via WeTransfer? I’m getting:

This video contains material from [Merlin] PIAS, which has blocked it in your country for copyright reasons.

1 Like