Mockups/new design discussions

Trello is good for me!

+1 for Trello

Makes good sense to agree on a colour palette and a common vision, but for now I think we’re just trying out different stuff - heck, I’m still unsure whether to go with light or dark theme :rofl:

Great feedback @godlyranchdressing! Do you know how Arc does transparency?

Great, so I’ll send the invites to the Trello board.

Yep, I get that. The hardest part is getting the ball rolling but at least we have a couple mockups to work with now. :slight_smile:

I think we should do both a light and dark theme. Adwaita has both, and I know dark themes are popular so people who prefer them can just switch to the dark variant. To make things easier the light theme could be focused on first since the dark theme will most likely just be a couple of colours to change and adjust.

Yeah, it’s simple once you get pass a little quirk.

1 Like

Only in GTK3,
it’s necessary: the (decoration, window, headerbar and list) nodes have a transparency. I take a screen capture:

Something to note: the gdm screen and lock screen (not the shield itself) can’t have images for now. Indeed, the size needs to be absolute and it doesn’t work in multi-monitor configuration. I think it’s something that needs to be fixed upstream. Unsure anybody will take that in time for our LTS though.

I would prefer we keep as many informations in the public as possible. Does Trello has real time communication? (I didn’t know it other than cards creation for identified tasks), I’m a little bit afraid that diminish the good interaction and openess people can see here. Finally, I have convinced some upstream GNOME design people to have a regular look here and tell us if things don’t go with their visions. I’m afraid won’t have time to look into (yet) another places…

What would bring Trello over the forum? It seems we have a good quick forth and back discussions in that group (quoting people and such)? If need to speak about a particular subject, you can create threads in this subgroup as needed.

EDIT: if you find that a chat system is really needed (remember that discourse update automatically a thread and show you who is talking about, so there is nothing against have thread with continous 1-line post), would https://meta.discourse.org/t/babble-a-chat-plugin/31753 suit your needs?)

I think one theme at first is important to focus on. The issue is that we won’t have a theme selector built-in for multiple reasons:

  • it’s contrary to the GNOME vision
  • GNOME is removing the Adwaita dark variant (it was implemented in a very different way than normal theme selection)
  • switching themes set the gsettings key to a particular value, which applies to all sessions, including to the vanilla session, which thus, isn’t vanilla. (see my blog post about vanilla session to explain why having per session user defined key isn’t an option over the 5000+ gsettings key we have on the desktop).

However, we can revisit that once the theme is shipped IMHO :wink:

I have to say that I’m very sure about a darker theme because the recognition value of Ubuntu with a bright version would be completely lost. Ubuntu was greyish and dark for the last couple of years and also Unity 8 would have been dark. So as long we want to still be recognizable and Ubuntu like in look and feel, we need to go for an evolution of the old design and maybe even use certain details of the old version to be recognizable. Unless, of course, the Ubuntu team no longer values it and prefers a complete redesign.

Also, an overuse of transparency will only lead to confusion with photo wallpapers and overlapping windows. Sure, I also like the overall look with transparency, but like said before, this look often works only in limited form and it is too important to me to also have a logical and easy-to-use system with a good overview. Not only a stylish look. After all, it is a system for working and not for viewing.

2 Likes

Just updated first post thanks to @andy-k with Ubuntu Touch color palette!

2 Likes

I’m still investigating the light theme idea:

And also with a bit transparency - No blur this time, just lower opacity.

I 100% agree with @luxamman that UX comes first, BUT transparency adds a modern look (Just look at how the guys at Redmond utilizes it). I’m also still trying my luck with the flat buttons for the breadcrumbs.
I have no idea if that Nautilus sidebar requires too much of a change.

@didrocks If I change a few details in the image, should I edit the original post or keep the old and just post a new?

Since images isn’t possible in GDM yet, would something like this CSS be possible? Perhaps the design-team could create a desktop wallpaper for 18.04 that it is possible to create entirely with CSS.

4 Likes

I would say, just use you prefered method. However, I think near-final mockups (we are not there yet :wink: ) should be posted on a single thread, to help developers, and edited with modifications.

Interesting, should be doable. I don’t commit though that the design team will have time to do this. Keep in mind as well that the gdm and lock-screen themes can’t be modified by the user, so we need something quite “neutral”. Only the shield can be changed.

I agree, so I think the use of transparency should be kept to a minimum. The way I imagine its use would be the way it’s done in the Arc theme. Sidebars and headerbars of unmaximized windows are slightly transparent. But it should be pointed out that transparency might not be possible to do in the GTK2 theme. Maybe @wfpaisa might know otherwise.

There’s some ease of use issues here. Most notably that it is difficult to tell what is in focus “at a glance”. Very clean though. The headerbar could do with some more differentiation, too. Maybe a simple border?

Taking from both mockups as well as the Ubuntu Touch Palette and Unity 8 I’ve come up with these: Version A (Higher Contrast), Version B (Lower Contrast). The palette I used.

I’ve put the Ubuntu Touch colour palette into a .gpl file for easier use: Ubuntu Touch Palette. Can this be put into the first post?

Adwaita has a palette that we can use as a base for deciding on other necessary colours (border, headerbar, etc.): Adwaita Palette.

2 Likes

Absolutely! I’ve also noticed that it’s hard to tell which window has focus. I don’t think that this design is the direction we should pursuit, so I’m not going to try to fix that. Let me know if you think otherwise???
I was aimed for a header-/titlebar less look - kind of like this.

@godlyranchdressing Nautilus_V22Nov17_B well, actually in both images, I REALLY miss the min, close and especially maximize buttons from the United theme. We should definitely adopt these, because you, in the blink of an eye, can tell that this isn’t OSX or Windows :+1:
http://www.omgubuntu.co.uk/wp-content/uploads/2017/05/rounded-corners.jpg

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