Mockups/new design discussions

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

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