Mockups/new design discussions

EDIT: I just realized that there’s an undelete option in this forum :persevere: Sorry about the noise!

@everyone :wink:
I’m really in doubt here, so please let us discuss this (again):

As mentioned in “Style white dialogs to match the dark look”, it seems inconsistent with three different kinds of dialogs. Especially the white dialog with rounded corners jumps in my eye and looks out of place.
I think it should somehow be styled to look more like part of the theme. Perhaps just add a headerbar?

dialog

@c-lobrano @merlijn-sebrechts I don’t want to reopen this issue, because it might just be me that have been thinking about this for too long. I’ve read the comment from @didrocks and I understand that there could be issues with a 100% identical look. Anyway, the dark ones doesn’t feel like a good choice to me.

If #4 wins the poll, I will never speak of this again :stuck_out_tongue_winking_eye:
When you’re presented with a dialog from an application, which of these looks best integrated with the theme to you?
modaldialog

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

0 voters

2 Likes

A short background on my choice

  • #4 will still be an improvement respect the current one, even only for the smaller bottom corner radius :smiley:
  • #3-#7 are similar to the “interactive dialog”. I don’t know if that’s the real name, but it’s the name used in the example under Gtk3-demo>Dialog and Message boxes

image

  • #6-#7: I’m not sure we can decide where to show the text “Close this terminal”. I think it’s up to the application to use it as title or content

So to me, it would be either #4 or #5, but I chose #5

1 Like

I agree with you for the exact same reason.

I’m completely opposed to #1 or #2, for the reasons I gave on the bug, and the lack of distinction of Shell vs Application dialogs (as stated on the bug report, this isn’t a question of security, but rather knowing what you are dialoging to).

4 Likes

I would be surprised if all those options can be achieved by theming the same two dialogs!

Having the entire width of the dialog taken up by the commit buttons — as in options #1, #4, #5, and #7 — makes sense on a small touchscreen, such as a phone, where you’re trying to maximize target area. But they would not work in Ubuntu nearly as well as they do in iOS:

  • In Ubuntu it’s possible for dialogs to have three or more buttons. When they do, spacing is used to separate unusual/dangerous buttons (for example, “New Folder…”, “Show Print Preview”, or “Don’t Save”) from common/safe buttons (for example, “Cancel” and “Save”). Dialog-spanning buttons don’t allow for this spacing.

  • In Ubuntu it’s possible to have other elements horizontally adjacent to a dialog’s commit buttons. For example, static text displaying a count or countdown; a menubutton containing less-used options; or a checkbox governing whether the dialog will reappear in future. Buttons in the dialog-spanning style, next to other elements in the normal style, would look lopsided.

  • In Ubuntu it’s much more common to see a button’s focus ring (as shown in these screenshots, for example). Therefore, the kookiness of a focus ring having three square corners, but one circular one, would be much more of a problem.

4 Likes

+1

@mpt you forgot to cast your vote :wink:

As you can see from the gif above, these are already used in the theme. Are you suggesting that we should change these to “regular” buttons?

1 Like

I simply separate those two layers of interaction - interact with Gnome (or the system), and interact with apps/programs. A terminal is still an app/program and so it should follow the light look.

Gnome, on the other hand is dark: so like the “power off” dialog, the app-launcher, notifications and so on, they should follow the dark look.

This has (at least for me) a simple and reproducible meaning (which is also because we cannot / should not change Gnome elements too much, like making the whole system light).

6 Likes

Yes, we definitely agree that #1 and #2 aren’t options. I’m not saying that we should make it dark or change the shell dialogs to light, I just think the current design (almost #4) looks a bit out of place with the rest of the theme.

So do you think we should go with #5 or maybe even #3 if I understand @mpt correctly? I would like to see #6 if it’s technical possible.

3 Likes

In my experience, voting on UI encourages poor design. (Because voters don’t consider all the edge cases, like accessibility for example.)

Yes. Even if no system dialogs currently have either of the two exceptions I mentioned, some app dialogs do have them. And even if it’s a good idea to distinguish app dialogs vs. system dialogs, :man_shrugging: there are many more coherent ways to do it than changing the shape and size and layout and colour of the buttons all at once! Having a difference in all those things at once is likely to make users think that they were designed by different people who weren’t communicating.

5 Likes

I agree about the voting.

I think the most important thing is that the buttons are consistent in their category and that we don’t have too much categories. All app dialogs should have the same button and all shell dialogs should have the same button, but I don’t see an issue in having big differences between app and shell dialog buttons, as long as it makes sense: all UI elements of shell are flat, for example, so it makes sense to also have shell buttons be flat. Most app elements have some depth in them, so it makes sense for all app buttons to also have some depth in them. The header bar, being something in-between, is thus semi-flat…?

I’m not really proposing anything, I’m just saying that I think it’s ok to have big differences between categories, as long as it’s consistently applied to everything in the category and as long as there aren’t too much categories.?

1 Like

Since we don’t have enough topics to discuss :smile: and since most of us weren’t happy with the new transparencies in gnome-shell, here’s a link to some example about top bar transparency and shadow. You can discuss on the link as well, but to keep this as open as possible, let’s keep the discussion here

https://paper.dropbox.com/doc/Top-bar-transparency-and-shadow-2-VXfHqRr5PIYtzdEb5jUtE?_tk=share_copylink

(note: I used dropbox paper just because it has a very nice presentation view, that helps comparison)

6 Likes

This is great work and presenting those options really helps!

However, It’s a little bit hard to tell via this link as you zoned the screenshot and not take a full screen. (At least, I have harder time to realize the entire desktop with it ;)).

I would be, though, in favor of: box-shadow 1px, 2px blur, spread 1 or 2px (don’t need to be too noticeable).

For the Dark panel version, I really think it should be solid, without opacity, and so I like your proposal of box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.3) here.

What do other people think?

I understand, but I preferred a side by side comparison

I can’t check now, but current version should be of box-shadow should be 1px 2px 1px rgba(0,0,0,0.3) :+1:

So I’m the only one who loves the high transparency :smiley:

2 Likes

Here is a recap of what are the objects of discussion with light and dark screenshots.

It is totally possible that the winner of this poll might not be the one shipping with 18.10

The switchers are three different parts of the shell but I merged them as one thing in this poll because they behave almost exactly the same:

  • Popups
    DARK
    Screenshot from 2018-05-07 19-25-26
    LIGHT
    whitepopups

  • OSD (volume, screen brightness, keyboard backlight brightness)
    DARK
    Screenshot from 2018-05-07 20-10-43
    LIGHT
    lightOSD

  • App switcher (alt+tab)
    DARK
    image
    LIGHT
    image

  • Video input switcher (super + D for when you have multiple monitors and/or projectors)
    image

  • Workspace switcher (ctrl+alt+arrow up/down)
    image

  • Dialogues (audio device selection after inserting a headphone, authentication dialog [password for installing etc], logout dialog, install X extension dialog)
    LIGHT
    Screenshot from 2018-05-08 01-35-28
    image
    Screenshot from 2018-05-08 01-36-53
    DARK
    darkdialog

  • Notifications
    LIGHT
    Screenshot from 2018-05-07 19-25-07
    Screenshot from 2018-05-08 01-37-45
    DARK
    38157904-d9d55164-348b-11e8-983c-8b9f5ade7635

So please vote in this public poll:

  • Everything dark
  • Dark popups, dark app/workspace/video-input switcher, dark OSD, dark dialogues, light notifications
  • Dark popups, dark app/workspace/video-input switcher, dark OSD, light dialogues, light notifications
  • Dark popups, dark app/workspace/video-input switcher, light OSD, light dialogues, light notifications
  • Dark popups, light app/workspace/video-input switcher, light OSD, light dialogues, light notifications
  • Everything light

0 voters

4 Likes

New iteration on GNOME shell panel and dock. At this link you’ll find some mockups with solution proposed:

  • a desperate last attempt to keep transparency :smiley:
  • some darker top panel
  • some lighter top panel

I think you can even comment on the link, but better do it on this thread.
Note: on the link, double click on the pictures or they will be too small to see anything

4 Likes

I think the panel should become opaque when the window is maximized. How about we leave transparency on the dock instead?

dash

dash2

3 Likes

I agree. If we have to keep the full solid top panel we should at least keep the transparency on the dock. The full solid dock looks very unsatisfying :smile:

3 Likes

I remember this difference between dock and panel was the first we decided to remove.
I am not convinced this will solve current design, IMO it makes the screen a bit irregular and does not give us back the nice light from the wallpaper.

I think this one (without the orange) looks really good, but if you want something else @frederik-f has some nice suggestions in the issue here. Also, I don’t think we have to do something just because popular themes does it :wink:

image

+1
I know the reasons, but transparency does add a modern feel to it.
@godlyranchdressing just look at the United theme :stuck_out_tongue_winking_eye:

I’ve tried to communicate this a few times, but just to be clear:
I’m -500 for polls in the future! I made a “what do you expect to see: A, B, C,…” to get an impression of what people felt belonged to the application. Maybe I didn’t make it clear that we wouldn’t implement the design that got the most votes - lesson learned! :expressionless:

+1 It looked better before.

2 Likes

Hem, that’s what the 17.10 and 18.04 quickly crafted theme did :wink:

Agreed, especially with Intellihide.

Alright, I’ll prepare some mockups so we (mostly myself :D) can have a better view

2 Likes