Budgie 11 HIG & mockups discussion (continued)

[christiankaindl]

This is a follow up/continued discussion for Budgie 11 styling/theming. Previous discussion was on the budgie-desktop repo issue #763. For more background and already discussed ideas/mockups I suggest you to check it out.

Let's make Budgie 11 look great (again)!

[ikeydoherty]

Cheers for starting the new thread! Ok so from my perspective there are 2 clear things to avoid for us (aesthetically)

• Mimicking macOS
• Mimicking KDE

Ideally we want a new Budgie (Shell) specific theming component, with at least:

• Global control on UI accents
• Global toggle for dark/light mode

The rest should be well defined, and we need a palette. Personally I'm kinda tired of blue, it's overused as the de facto "this is professional" colour. Personally I'm hoping for something "light" and "fresh". If possible, I'm open to green. Psychologically speaking we kinda crave these things, and being sat in front of the computer for long periods, well, we should make sure our users "feel" good.

I'd like to avoid information overload, favouring progressive disclosure for settings and such. As the core mantra (and cliché) we want to keep out of the users way, but also look after them. Additionally the users need to own their experience, but with sane defaults. So it should be customisable at it's core.

Transparency and blur are nice when used sparingly, and when the user interface isn't modified solely to show off these blurs, rather it should take advantage of it. I'm in favour of a "nearly flat" UI approach as opposed to complete flat (depth + shadow are critical visual cues), as well as obvious layouts. You'll notice in more modern UIs the focus is on clear separation in column layouts.

I think its safe to say we also need to account for applications to some regard, so think of the "OS basics" and the System Settings (we won't be using GNOME Control Center).

Hopefully this opens the floor to a more open discussion and frees up some constraints (i.e we're not just focusing on the shell chrome, but more of a formal HIG.

To assist me (codemonkey) in implementing mockups, please provide hexadecimal colour schemes along with the various layout critical pieces (padding, font point sizes, etc.)

[wisetux]

When I read that you were personally tired of blue, this is the color that immediately crossed my mind. And there it is in your very next line - "Green".

[ikeydoherty]

Could be nice as an accent yeah

[ikeydoherty]

I think it might be worth us exposing parts of the palette to allow several "add-on" palettes. A typical pattern we see in GNOME applications is the use of red + blue for suggested-action and destructive-action. Unfortunately those are kinda no-go areas for colour blindness, etc.

So while we could use those in the core palette, a mechanism to change to another well defined palette is a must imho. Only core concepts such as accent, suggested (primary) and destructive (deletion). I think for much of Budgie we should at least provide undo mechanisms for dangerous actions instead of relying on scary "DON'T DO THIS" red buttons though.

[Mazino-Urek]

If gnome settings not used, what will be used?
Native or kde settings?
As far as I know KDE is revamping their settings menu through QML.
As budgie is going qt, latte dock can be considered for docking. It is well maintained.

[ikeydoherty]

We're not using KDE apps. We'll have our own settings application. Latte dock is separate and shouldn't be considered part of our project scope. It's third party.

[ikeydoherty]

We're still going to provide a full transition from Budgie 10 to Budgie 11, which means we still have a configurable and powerful panels system, Raven, etc.

[JohnBlood]

@ikeydoherty If I may ask, why did you name it Raven? Were you reading Poe at the time? I do agree that the computing world (mobile, Windows, Linux. Mac) is very blue heavy (well, except for Ubuntu). Help us move towards greener fields. 😄

[ikeydoherty]

Actually John McCormack helped name that. Basic idea was around the delivery of information and intelligence. Plus it kept the avian theme going.

[bmeznarsic]

Kaka parrot to the rescue http://nzbirdsonline.org.nz/sites/all/files/Kaka%20on%20kowhai%20Wilton%20Sep%202013.jpg

[Mazino-Urek]

Is Wayland coming along with this project?

[ikeydoherty]

Yes - but lets keep this thread specific to design :D

[Mazino-Urek]

Hope this may help adjust colour contrast:
https://color.adobe.com/explore/?filter=newest

[MrMonotone]

I like the theme right now. I think the shades of blue that were chosen are nice. For whatever reason I just think of SUSE when I think green. I do not know why it turns me off the color it just does.
EDIT: ALso I feel that blue looks better with the Solus logo!

[tobcro]

Since this is a open discussion :) I really like the thought of a global dark/white theme. The accent color is also important, I would however not focus so much on a specific standard color (blue, green etc) - I probably would want to change it anyway to match my desktop background. So to be able to change the accent color - I am thinking a few presets but also the ability to add your own hexadecimal values as well - would just add a little little extra for me. Of course there is always the option to create your own theme, "the Linux way" . But I think that is silly when you only want to change the accent color...

[SLmanDR]

Reply to Ikey's "... use of red + blue ...colour blindness, etc."
But could you use those colour concepts and get a colour blind persons input and add perhaps a subtle pattern. Thus enhancing the colour blind person experience and maintaining a "standard".

[tuxattack80]

http://www.dailyinfographic.com/wp-content/uploads/2012/09/psychology-of-color.png

I say red accents and a partnership with McDonalds lol! But seriously may be something to consider when picking colors, I personally like the blue but if there is going to be a true dark and light theme id say just invert the accents. Other than that you really can't go orange because many will think Ubuntu and green is okay if done right and in the right shade (Android system icons before they went blue) don't need people think Linux Mint when using Solus. And red isn't really a neutral color and is often used for a sign of importance or warning I can see the wide spread panic amongst users that don't read messages when a lot of red buttons come popping up 🤔

[tuxattack80]

And stay away from yellow unless you want Solus to be known as the OS that makes babies cry lol!!

[haunt98]

May be a bit more retro like this
This palette I get from gruvbox

[tuxattack80]

https://goo.gl/photos/pYPEdEn7fkEootzt5 I know it's Android but it's the closet device I had at the time but just wanted to give an example of how white and black could work and in a dark theme id say just invert the colors.

[tuxattack80]

Like the retro look displayed above, seems like that could be very theme friendly, I actually think a legit theme engine in Solus would be something to consider. Not just something that stores and displays themes installed but something that would allow the user to tweak accents and background colors along with icons for system apps, notification drawer and application icons. Could be built in with budge settings or whatever settings manager is used in Budgie 11. Too bad icons built for Android can't be crossed over to Linux 🤔 Yeah pipe dreaming at the moment. But yeah I think user control would be the way to go and just have several accents to choose from like zorin without the need of paying for it.

[rroll1]

One suggestion I'd like to see would be an improved alt-tab dialog. It's entirely functional at this point, but I feel it needs to be refined a bit.

For instance, it'd be nice if the alt-tab box were to auto-size to the number of windows opened. If I only have 2 windows open, for example, there's a ton of empty space on the right-hand side.

While that is primarily about design, in regards to behavior it'd be nice if we had the option to click-to-raise: currently, when you hover your mouse over the icons, nothing happens, when I'd expect it to be more like GNOME/Cinnamon/Windows/MacOS, which is that hovering will select an icon, and then clicking brings it to focus immediately. Current behavior is:

Hit alt-tab, dialog opens
While holding alt, you can click an icon thereby selecting it
The application in question does not come forward until you let go of alt

I personally think that it'd be more expected behavior to have hovering the mouse to select the icon, then releasing alt OR clicking the icon would bring it forward immediately. (So if you clicked it you wouldn't have to release the alt key)

[PretzelJones]

Is there a plan to edit the Solus and Budgie logos as well? They currently have an "Arc" theme with the grey and blue (intentional?).

[SLmanDR]

Sea greens, blues and greys to fit the nautical logo theme seems appropriate. Anyone own a Pantone swatch kit on the island? Go forth! Compare and record.

[kucho]

I would love to see a theme with these styles: flat with transparent elements or flat and morder style

[yaymalaga]

I agree with @mrkucho, the second theme(https://www.gnome-look.org/p/1187179/) is just amazing.

It looks like a modern arc theme mixed with adapta, so this way budgie 11 style would still be very familiar and modernized. The green color is also perfect (named teal), as it is so material.

[cunidev]

A simple wireframe idea for the "do not disturb" switch design (no icons of course, can be adapted to most design guidelines) vs. the current simple, somewhat Apple-like "do not disturb" Raven switch in the current budgie-rd build. Cheers!

[STiAT]

@cunidev could you elaborate what would be the diffeerence between silent and do not disturb? I could think on a few possibilities...

• "silent" show in systray & raven, but not showing a popup.
• "silent" show only in raven, but don't indicate in systray, no popup as well.
• "dnd" dismiss all notifications, so no popup, nothing in tray, nothing in raven.
• "dnd" show in raven, no popup, no indicator
  etc.

[zoomer296]

@axelmeunier It'll probably be used under the built-in theme option, and disabled any other time. Making an accent color changer that's compatible with other themes would be a bit tricky.

I reckon it be possible to make some sort of thing where themes could ask Budgie for the accent color, but it would require each theme to support it.

But if we manage to pull it off and themes start supporting it, it's possible other desktops will add the feature as well. Solus and Budgie could put their mark on GNU/Linux history.

Edit: Actually, now that I think about it, it'd be far easier to let Budgie modify the theme's files. Add a line like "accent-switcher-thingy: [hex number]" that Budgie looks for.

Edit 2: Never mind all that. Themes are far too complicated for that, and I'm tired. The only possible solution would be some kind of thing using a transparent mask that goes over a spot with the accent color on it. For some reason, my mind was thinking of config files instead of the butt load of files that themes are made of.

[axelmeunier]

@zoomer296 yes of course, my comment was only re the built-in theme. I don't know what the devs have in mind about it anyway - which is why I'm asking.

[axelmeunier]

@zoomer296 haha saw your comments.
Let me rephrase my earlier comment - which was never about changing the accent color in any theme but only in the built-in theme.

The proposed 5-accent-color scheme for the future budgie desktop does not make sense without an appropriate built-in window theme. Generally speaking, window themes are not made to work with several accent colors, like in "everything is the same except the accent color". For many reasons : because the personality of the theme lies in particular combination of colors (ex. mac themes with blue and green for toggles) ; or because the accent color matches elegantly the background color (think elementary OS) ; or because colors come after the brand (Ubuntu, Pop!_OS) ; or simply because the way the accent colors are used would not work well with several colors (for example if the color is used for the text itself as in this theme then contrast is super important for readability). Etc.

However a few themes could be appropriate : for example this one https://github.com/vinceliuice/stylish-gtk-theme. It is made especially to work with several accent colors.

[zoomer296]

@axelmeunier Yeah, I get what you're saying. I was just a little tired and my Concerta hadn't kicked in yet.

[craig-toyoracer]

@villekivela I also like the Raven panel in both light and dark versions.
The wider Raven gives those nice applets room and hopefully a working calendar applet too.

As for the Accent color selector. Would this not be integrated into Budgie Settings - Style
and the profile would be user specific. Also possible to custom change colors with Hex number addition in - /usr//budgie/colors. something or other.

[zoomer296]

@craig-toyoracer I imagine it would either be integrated into Budgie settings or a quick settings menu. It's probably only on Raven for demonstration purposes.

[villekivela]

I tried to incorporate some of the theming components @ikeydoherty mentioned in the start of the thread:

• Global control on UI accents
• Global toggle for dark/light mode (should the GTK theme have a dark mode too?)
• Users need to own their experience, but with sane defaults. So it should be customisable at it's core.

About the global control for the accent colors. As @zoomer296 said this should be on Budgie settings application. I just threw it somewhere to demonstrate the accent color and dark/light theme switching. The 5 different colors are just examples and the user should be able to choose their preferred accent color freely. Also it would be nice if the suggested-action color of GTK theme would match with Budgies accent color but I don't know if this is technically feasible.

The mocked up GTK theme is not an actual theme. I tried to keep it as close to Adwaita as possible to help the maintainability. For me the current flat themes start to look bit boring so I added some shadows and slight gradients to the theme.

[zoomer296]

Can someone drag Ikey to this thread so we can get his opinion?

[ikeydoherty]

Ikey is very busy working on Solus 4 atm so his opinion probably doesn't mean yet until he has time to catch up on everything :D

[zoomer296]

@ikeydoherty No problem. I just wanted to make sure we don't design something beyond our scope.

Form over function is how we got the Xenon/Zephyr Xbox 360. They designed the look of it, and then proceeded to cram in the innards.

The first units started to RROD within a week.

[zoomer296]

Plane icons for Manjaro with breeze inherits work nicely. Unfortunately, some icons are unthemed, so I had to supplement them with Papirus. I'll find a few more that will fit with the prior two better.

[bmorashad]

Just my view,
blur, transparency, colors, widgets or be it anything shoud not be used for the sake of it's beauty or to show off (simply should not play with the design, i.e KDE ;)
if does it would look like a cake face or a childhood word document with fancy fonts..

1. Raven should be clean, onpoint and sholud'nt be overloaded
2. should get rid of labels, use symbols instead(use hover pop-ups to describe the action)
3. The theme or look should be much more detailed, complete & should get advantage of depth+shadow+animation,
   This is what almost every theme lacks in linux.. One of the good things about Windows(I don't like the look though) & macOs, carefully designed. (though adapta is much better)
4. & finally get rid of mimicking mac or windows or anyother..

[zoomer296]

@boredbmora I don't care for expressive blur or transparency either.

However, I'd like to point out that between Mac and Windows, there's little that you can do while retaining user-friendly interface that doesn't mimic either one or the other.

Windows has an application menu like budgie, Windows and Mac OS have application docks, Windows and Mac OS have slide-out panels like raven, and both Windows and Mac OS have system trays.

Even with the most radically different desktops, the application menu is the biggest change.

[luispabon]

As a random user following this thread, I do care about eye candy. I spend 10 hours a day in front of my laptop and a pleasant looking environment just makes it that much easier.

[zoomer296]

@luispabon speaking of eye candy, I found a grub theme that will work. I also made a modified version with a lighter desktop background and a selection box.

It's KDE Neon's default GRUB theme, "breeze".

[bmorashad]

@zoomer296 well said, exactly..
I do understand that, but that's not what I meant...I think slide-out-panel , Dock etc comes under components or elements(those are standard ways when it comes to designing an OS if u don't have a better alternative or if you are not into something like Google's Fuchsia os)...I'm talking about how those should be designed or the way to design those,
i.e Window's metro UI(fluent design)
Android's material design
i don't know the macOs one ;)
(jst give a look at windows action buttons & macOS action buttons)
I'm not expecting to completely get rid of other UI designs as it's damn impractical
& also undstnd maybe it might be hard for them to come up with a whole new design or guideline for budgie11 because of lack of resources, I hope u get my point.

[zoomer296]

Update on the GRUB theme: I've slightly tweaked it, giving it a slightly lighter background and a selection box.

Edit: Huh, it seems I've already mentioned it, almost word-for-word. Anyway, here's the file.

Be aware that I've been using "Bug" as a working name. There's a story behind it, but it needs a better name.
bug-grub-theme.tar.gz

[ghost]

No docks please...I very much like the use of space with the icon only Task Manager...it makes things nice and uncluttered.

[zoomer296]

@tatpap I definitely think that docks should be optional, however, Budgie's dock mode needs an upgrade. The only way to ensure proper accent picker support is to do it ourselves.

We should add the option of rounded corners, and fix the appearance of dock mode when using just the app switcher

[zoomer296]

The proposed GNOME lock and login UI is pretty neat. I figure we can take some inspiration from it.

[MatthewScholefield]

@zoomer296 Maybe we could take a little inspiration, but IMO the motion blur, pastel colors, and button placement all feel a little funny to me in that gif.

[AakashPandey]

Would love to see some blur with white-ish theme and the ability to pick the accent from wallpaper !

[zoomer296]

@MatthewScholefield I feel that may have something to do with me reducing the resolution down to almost nothing. It was too big for GitHub.

[MatthewScholefield]

@zoomer296 Can you link the original?

[zoomer296]

High quality gif of lockscreen: http://i.imgur.com/3esCQLi.jpg

[zoomer296]

@MatthewScholefield
I didn't notice your last comment. Here is the source: https://wiki.gnome.org/Design/OS/LockUnlockLogin

[zoomer296]

May I also suggest KDE Connect desktop integration similar to what GSConnect gives GNOME.

[tristan957]

^That belongs in a different discussion

[bmorashad]

@zoomer296 solus-project/budgie-desktop#1439 I don't think we'd have to wait for budgie11, their already discussing to implement it :)
@tristan957 yepp ;)

[Snuggle]

I really like @zoomer296's linked lockscreen, though the animations seem a bit overboard. The design does look very nice, though.

It doesn't look like the most functional interface to use on a desktop, however. A lot of the design looks like it's intended for touch screens. Round buttons and large blobs for fingers to press with inaccuracy.

I'd like to avoid information overload, favouring progressive disclosure for settings and such. As the core mantra (and cliché) we want to keep out of the users way, but also look after them.

I really feel like this is the achilles' heel of KDE Plasma at the moment. It's by far one of the most customisable desktop enviroments, but the user gets swamped with hundreds of buttons and menus and it can be a real jungle of bushes to navigate through as a new user.

Personally I'm kinda tired of blue, it's overused as the de facto "this is professional" colour. Personally I'm hoping for something "light" and "fresh". If possible, I'm open to green.

Blue is definitely overused and I'd like to see something else bought to the table, but I personally hate green. Although red, purples, pinks, oranges etc. I can't really see being used as a primary "base" colour. Hm. Green, though... Eh. I can see it working but I'm imagining Manjaro and plants.

Transparency and blur are nice when used sparingly, and when the user interface isn't modified solely to show off these blurs, rather it should take advantage of it.

Completely agree. I'd like to add that I'm a massive fan of the two paired together. You find that when just transparency is used, it clashes with the background and makes a very inconsistent reading experience if you have a complex background. Example below.

Transparency without any blurring can be hard to read on complicated backgrounds.

If you look at anyone who has a "pleasing" transparency experience, they almost always use blur to preserve the readability of text. Apple and have figured this out for quite a while and KDE are starting to implement this, it seems, in Plasma 5.13.

KDE Plasma 5.13's demo of blurred transparency is a lot more readable than just plain transparency. It does look like it needs some tweaking though.

Apple has been using blurred transparency in a lot of their design. From their dock, to their launchpad to even the context menus. Everything gets a little splash and it has a pleasing, modern aesthetic.

I personally feel like transparency only looks good with some blurring to prevent the harsh chaotic clash between the background & text. The Kwin team have been doing a lot of work recently to implement transparent-blurring without taxing hardware much/at all.

Heck. I'd bet that part of the reason that people like the Deepin desktop environment so much is because of the blurred transparency which looks pleasing yet completely readable. (Though deepin might use it a bit too heavily 😋)

Example's of deepin's use of blurred transparency on their dock & launcher.