Mockups/new design discussions

oh :slightly_frowning_face:, ok, I remove the song :wink:

2 Likes

@luxamman Nice job! Again, off the top of my head:

  • Back/forward buttons with border to fit the design (wfpaisa and godlyranchdressing)
    I really think it looks better without borders or maybe it’s just the border in your mockups that are too thick?

  • Changed the folder highlight (folder list) color to have a fluid transition to the shown files and folders (madsrh)
    Did I say that? :no_mouth: Gray and white are fine, but I’m really missing the Ubuntu branding here. Does there need to be a fluid transition?

  • More space between foldernames (folder list madsrh)
    I ment in the sidebar items / places

  • Breadcrumbs change to fit the design with a slight background color for active elements like on the dock (wfpaisa, godlyranchdressing, and madsrh)
    This one is tricky. I see what you’ve done, but like I said, I’m missing the orange. Perhaps we could try the opposite and use orange for the application in focus in the dock?

There’s something with the colors in Nautilus that makes it feel a bit dull. Perhaps try a lighter gray in the sidebar or an almost white as the files/folder background.
Isn’t the black border around the window too much? I would try thinner or gray or both.

Impressively quick response time for the feedback we provided a few hours ago :clap::grin:

1 Like

Also like it more without, the rendering is not good out of XD so I added a shadow to make it a little less look like Windows 95 times :upside_down_face:
I guess we need to see that in real to find the perfect way, for now, I deactivated the shadows.

I misunderstood this, thought that’s what you mean by this Call for participation: an ubuntu default theme lead by the community? - #170 - Desktop - Ubuntu Community Hub
Please have a look in the GoogleDoc.

Okay, I just did not give too much attention to the content till we have an overall design. But I gave it more space^^

I tried that, have to say I don’t like it, the dots are just right for me and the white gives a quiet note and is never wrong with colors from the icons.
Screenshot (15)

For testing I set them back to original colors and the window borders are reduced from 2 to 1 px.

Will update the design post in a minute!

4 Likes

Reposting that here, and removing from the other post:
Just some technical note: You can’t set a background image safely in GDM and locking screen:

  • it doesn’t work with multiple monitors (needs to write some upstream patches)
  • it’s not selectable by the user.

This were the reasons we selected this purple color + noise in 17.10.

Only the shield (that first screen that you see after locking down the session) is tweakable.

2 Likes

All you need to do to fix this is set the border-radius for child widgets to be the same as those of the parent.

1 Like

The CSS in the Shell is kind of limited. I think the safest bet would just be following suit with default GNOME and using a background image placed on top of a solid color. Something like this:

I just don’t know what pattern will both look good and look like “Ubuntu”
Maybe you can take a look at this site to get some inspiration?

How about something like this? I tried to replicate this mockup but the stackswitcher buttons which I were hoping to function the same way as the path bar buttons can’t take up the full height of the headerbar without resorting to tricks. I’d rather modify the design to work with both rather than leave the path bar buttons being inconsistent.

2 Likes

Yes, I really like the gray thing we both use in our current mockups. What I was suggesting was something that is more UI consistent and therefore gives a more cohesive user experience.

29Nov17_ActiveIndicatorDockLine
active_indicator

29Nov17_ActiveIndicatorDockDot

6 Likes

I don’t like the first one with the line, too much going on to have orientation at a glance.
The second mockup could be working for me, but I would try to have orange when active and bright grey when not active. But maybe this is too much of MacOS?

Yes, I think that the gray/orange might be a good solution.
MacOS doesn’t use colored dots, but Windows has a gray background for running applications https://www.msoutlook.info/pictures/win8-create-desktop-shortcut-unpinned.png
So we have a foot in each camp anyway :grinning:

1 Like

Yeah (I know, windows…). I will try this in the mockup.

I spend some time in Ubuntu 17.10 changing the ubuntu.css to test the main colors (could not change the window decorations/frame, just don’t find it till now) and the top-bar and dock are looking good in #252525 or rgba(37, 37, 37, 0.98) and also down to rgba(37, 37, 37, 0.95), then it starts to lose focus to transparency (until Gnome implements blur). The proposed #2e2e2e is a little too much like the old grey for me and not as stylish as the darker tone.

When jumping to a maximized window the top-bar gets a little darker and no transparency anymore to rgba(25, 25, 25, 1.0), the transition is soft and cool by setting it to 1000ms in both cases. And it feels a little like a more content focus mode. I really like it! Also fun just to play around with windows now to see the sleek transition^^ :slight_smile:

But like always this has to be tested on different screens to find the right grey (always test mockups in fullscreen!) and of course the window decorations/frame still have the wrong colors and the dock is not changing color with the top-bar and I could not test box-shadow for the top-bar in standard mode, but in maximized window it works…

2 Likes

29Nov17_ActiveIndicatorDockGrayDot

9 Likes

Speaking of greys, as a FYI, most of the greys in GNOME Shell by default are something like (in rgb): x, x, x+2, making a blueish grey.

For 17.10, we turned the grey to be more brownish (and warmer), it’s really easy to spot the difference when you switch between the 2 values! For this, I simply did: x+2, x, x.

That was my insight :slight_smile:

2 Likes

@wfpaisa@isantop Are windows with rounded edges at the bottom like this possible?

I’ve been looking at themes like Arc, POP, Adpata, Radiance, Minwaita, Gnome OSX and United and ALL of them have straight edges at the bottom. Only Elementary OS have rounded bottom edges and it’s only a few pixels. This would certainly make Ubuntu recognizable.

Sound like Ian says its possible, but I know nothing about coding, so please let me know if we have to kill this concept for good.

4 Likes

Yes, they’re certainly possible. You need to make sure that every widget with a background color set has the same radius for the bottom corners (or at least for those that align with the corners of the windows). But if you do that, everything works normally. Pop even includes support for granite .rounded style classes for applications that use that, like Dan Foré’s Harvey.

Screenshot from 2017-11-29 09-51-10

This doesn’t necessarily means it’s a good idea. It’s imposing a lot of restrictions and could very easily break some apps in corner cases (no pun intended), so it’s probably better to go with a much more subtle rounding. Extremely large radii on windows don’t improve usability.

3 Likes

Funnily enough, I spent some time in Unity 8 yesterday and the .95 alpha value used there actually seems to be the closest approximate I could get.

I’ve been testing the Shell menu colors. I used the original #181818 with the same .95 alpha, seen here:

Screenshot from 2017-11-29 12-50-57

At the very least, it’s feasible for dialog windows. There’s also always the Shell.

modal

I just did this in an attempt to mimic Unity 8’s dialog windows (which use whites and grays) and open us up to not having to stick to blacks and grays for everything, but they can be styled based off of your mockups.

6 Likes

It might be okay on shell dialogs, if we want to draw a distinction between them and GTK dialogs. However, I would like to stress again that extremely large ( > 10px or so) radii on the bottom corners of windows is a BAD IDEA and we shouldn’t look into do it. They don’t add anything to usability and will break many apps, requiring massive future maintenance overhead.

We should stop trying to address if we can do something until we clarify if we should.

3 Likes

Login Back Texture Test V29Nov17

Shattered is the best one, but I really don’t think any of them work. This just like the current Noise pattern in 17.10, at first boot I thought something was wrong with my graphics driver :wink:

Well, there are much more textures to try. I do think some of them have style - and the alternative is a pure background color since we cannot use wallpaper on the login screen… Its different from the actual login screen, but still use an Ubuntu way of styling. Also too fine and too distraction textures just don’t work at all.

Linux user :grin:

That’s something we maybe don’t need to pay attention^^

3 Likes

It would be great “overflow: hidden”
A border radius implies all child widgets with the same border-radius.
Maybe it’s possible to break the border with 2 pixels of border-radius :slight_smile: .

Hey guys!

I’m sitting with the Canonical design team currently in London, and FYI, I’ve tricked them to keep an eye on this thread (we are going to do some bug fixes in Ambiance while this new default theme evolved), please welcome @mpt, @Carla, @karlos and @ya-bo-ng!

13 Likes