Mockups/new design discussions

Sorry yes it’s the “Application menu” - right next to “Activities”. There is a tweak or extension to move it right next to the windows controls, what in my opinion is much more logical - especial on bigger screens. A other solution would be to just implement it into the right click menu on the Dock icons and deactivate it in the top-bar, because this is also a good place where to expect them.

Yes that’s true, but the dots are too small when the icons seem right. Also it may help to give the dots a little more space - this would include move the icons a little out of the center. I will try it with the mockups.

When you maximize a window in Ubuntu 17.10 there seems to be a shadow on the window from the top-bar. So, is it maybe possible to give the shadow element a z-index to have the shadow behind the windows when not maximized (or fake it somehow)? And when that is possible, maybe we can fake a shadow on the Dock from the top (like a inner shadow) to separate the top-bar from the Dock?

And will the trash have a comeback as an icon on the Dock?

thanks!

No worry! So, I would say the same than for the Activites section: we don’t want for now to diverge from GNOME Shell design and move it somewhere else. I’m trying to get some upstream design people to come/read here your suggestions (and you can go on #gnome-design on gimp.net IRC to chat with them). Anyway, let’s focus to get a first version of the theme on the theming part itself: icons, shadows, color scheme, transparency, more than on behaviors. That will give us a good visibility and small stepping stones where we want to be at. Then, we can revisit and discuss for incremental improvments. :slight_smile:
We can makes some changes (if upstream agrees) on dash to dock, like duplicating the location of the menu and adding it there (just not removing them).

That’s actually not what’s happening (changing z-order isn’t supported in GNOME Shell AFAIK). The title bar is style on maximized panel to look like there is this shadow, same with unamixized style of application title and headerbar. We can play with this :slight_smile:
Styling the Dock is possible, I’ll let the devs who volunteered to answer and give it a try :wink:

The trash on the Dock, I think some people opened a bug report on Dash to Dock to get it implemented and they had nothing against. Unsure the work started on it. The issue is about matching the file manager to show the corresponding “active” application (not Files for instance, when you are on the trash, but the trash icon). I would say the same than for the rest: let’s not focus on this in particular right now, but we can take it into account :slight_smile:

Ack on the other changes, good luck! :wink:

There’s separate “.transparent” and “.opaque” classes for the dock, but only the transparency value seems to be affected depending on whether or not a window maximized. I tried adding a box-shadow rule to the “.opaque” class but it was ignored. If you want a shadow to separate the dash from the top-bar it’ll have to be there regardless of window state.

On the Application Menu’s behavior, you might be interested in this discussion from a couple of months ago.

So for now we’ll focus just on designing the theme :slight_smile:
Maybe just a few tweaks here and there^^ Would be nice to also work on behaviors and improvements when the time is right.

@didrocks and @godlyranchdressing thanks for the input! I guess we can find a way to make things like the top-bar shadow work if we need it. It’s just a detail, but details paint the whole picture.

I will upload the first design proposals soon in the “Design Mockups (Updates)” topic, with the Suru icons, a less wide dock with more space for the dots and some elements with the icons design in mind and so on. But work in progress, also the fonts may seem not rendered well sometimes. And have a look at the icons in the right corner, seems they are maybe too fine drawn (like on a 13" Full-HD laptop screen).

Because the icons have rounded corners windows, buttons and some elements have also rounded corners. I also try to use certain colors to specify functions and get the users focus where needed and of course because the icons are also colorful (but not too much, of course). The dark bar and windows always form a quiet frame, so as not to distract from the content and the functions. Maybe we’ll get a kind of “Playful elegance” :grin:

Questions for now:

  • The icons have a slight (sharp) gradient in the background. Is that possible for elements (buttons, window background…) too?
  • The log in screen: Is it possible to blur the wallpaper like in the design proposal?

Thanks, Stefan

Hi guys, I prefer light versions, but my eyes wear out fast, I want just share some designs for dark version. maybe you like them. :slight_smile:

Gui

Nautilus with a transparency (0.97) on header and list files

Other windows

Yes, gradients are possible.

Blur isn’t possible in either GTK3 or the Shell. The most you can do is put an image over a color (and possibly an image over an image), the current Ambiance theme uses a noise pattern over a purple background. You can do the same thing to the overview to give the background less focus.

Hi @wfpaisa, you should post your mockups in the design mockups thread. I think this thread is only for the discussion of the mockups.

And for my thoughts on the mockups:

  1. I really like both, especially the use of the dark headerbar in them.

  2. Even though blur isn’t supported (seen in @madsrh’s Files concept), the transparency is a nice touch because it lightens up the design a little and makes it more “modern”, but for readability issues I think the transparency should be lessened since blur isn’t available.

  3. The headerbar buttons in @luxamman’s Window test proposal V21Nov17 are more recognizable as buttons. I like the flat buttons in @madsrh’s concept, but the path bar buttons (“Home, Documents”) need some more styling so they don’t blend in with the other buttons.

  4. @wfpaisa the blue is really nice and easy on the eyes, I think a similar shade should be used for the dark theme.

I suggest some rules and a colour palette should be set so future mockups that are done would be more in-line with the vision for the design. We need to be on the same page. That might require much back and forth so I think we should use something like Slack/Trello/Telegram if that’s okay with everyone. We won’t abandon the forum, just take some of the more chatty things elsewhere.

1 Like

sorry, I don’t know where to publish them, @ian-weisser told me to publish them here.

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