Mockups/new design discussions

If we still want to use the Ubuntu logo as the app launcher icon, here’s a quick mockup of a few of the different possibilities. I tried to go with @luxamman idea of smaller icons and more padding.

  • I like the one with the darker background; it differentiates itself not just by the icon, but also by the color of the dock itself. An app icon will never do this, so this makes it more clear that it’s not just an app.

  • Just a white Ubuntu logo on the dock is very similar to how windows 10 does it, so it’s something people are used to. So I think this one is the best:

  • I don’t like the ones with the line.

I’d also like to add that I don’t think this will cause confusion, regardless of what we choose. “OS icon” in the bottom left for “application menu” is a very common thing…


I agree, the one with the darker background looks better for me.


Yes, +1. One of the two white logos on darker background works for me.
I’ve filled a bug on github. @luxamman do you agree?

1 Like

yes, looks very nice!

1 Like

The dock will need to be more transparent if we want the app-view button’s darker background to be more noticeable. The difference is there right now but it’s close to invisible. Though, if we make the dock more transparent then the inner box-shadow will be more obvious and not look very good so should we remove that? I haven’t found a way (it might not be possible) to have the box-shadow appear only when the dash becomes opaque.

And I know everyone voted on the white, but I actually prefer the people holding hands in orange on white. With it in white and without a background it sort of looks incomplete, and the shape of the icon makes it seem slightly off-center. If we want it in monochrome I suggest we do it like Unity 7’s logo.

Screenshot from 2018-01-13 13-23-36


Hey guys, so I know we talked about this but I don’t think we came to a decision. I’ve been experimenting and have been wondering if to just merge in some of these changes so we can judge and comment on what we like/don’t like/hate. I don’t think we’ll ever come to a decision unless we see everything in action.

Don’t be afraid to be honest.

Gray for selected sidebar row (taken from Suru):

Mixture of blue, gray and orange. The blue will be used for selected text, orange will be used for selected elements (stackswitcher button, selected menuitem, etc.). Gray will be used for selected rows (treeview and menuitems in context menus included):

Blue for everything (the stackswitcher looks horrible with blue imo):

Or, we can keep things as they are:

And maybe pull in some more gray (or more blue) to soften things up like selected rows if we need to.

1 Like

I’m missing the “all orange” option :wink:

I’m not afraid to experiment and we should test things in the wild, but in the brief time I’ve spend with the current colors, the blue still feels out of place for me. Like this comment:

As @luxamman mentioned, on the colorwheel the opposite/complementary color to #e95420 isn’t the Unity8 blue. So maybe there’s yet another option here?

+1 for dialing back the orange a bit on selected rows

I still prefer the current orange-based version. The other option looks good and soft, but it doesn’t make me think at Ubuntu.

nice idea, or do you think that aubergine color has any change here? :slight_smile:

I don’t know how I/we all missed this, but apparently the wrong palette was being used the entire time? I’ll update the communitheme to match the ones from here, though the difference might be negligible.

“Correct blue” (and orange) if it makes a difference:

Straight up replace the blue with the aubergine:

I think we started from there and made some changes on the way. As for aubergine, why not, It may work :slight_smile:

After testing and working and having a lot of apps open, I still would prefer the white one - just because it is less looking like an app icon and it is less distracting an more elegant IMHO.

About the colors:

The all blue is not working for me at all, aubergine (@c-lobrano) will maybe have a hard time on the dark backgrounds.

The grey is okay for hover, but not for selected stuff. Looks like an unfocused window and less Ubuntu.
But I was also jumping back to 16.04 and had a look at selection colors and they used a bright variation of the Ubuntu orange - also in 17.10 Ubuntu session.
This could be a less attention-seeking variation - what do you all think?
The contrast ratio should be fine, more eye-pleasing (but differs of course from the actual status but also follows more the Suru style in contrast ratio) and so the pure and strong colors are restricted to accents and attention elements.

I’m fine with the (corrected, thanks @godlyranchdressing) clours we have now, with a lighter selection orange the system maybe seems a little more defined - with less strong contrast in working areas and colorful set focus points.


Maybe we need to try out some stuff for a while…


Would you mind creating a branch with this proposal:

I’d like to see how that looks on my desktop :slight_smile:


Hey there,

again the breadcrumbs - I was investigating that again and again (also the mockups by @madsrh) … now I like to hear your opinion. The fonts should be like they are now on the theme. I also tried to narrow these down in the sense of feasibility.

First the breadcrumbs as a visual element:

We had that kind before, good thing about it is, that it is visually separated from other elements which is especially good for non pro’s. The backgrounds are static - no visual change on hover or click, even on the little arrows. Only the orange line and a grey hover line for feedback. Fonts get bolder/less transparent on click and the little arrows also get less transparent when clickable. This is a kind of compromise for me but also maybe one of the ways to make it an element - like the address bar in browsers.

Next the loos ones:
We also had that one, the second is just with a separator like @madsrh got it in the mockups. This is like other distributions makes it, but it is definitely less starter friendly but fits the design more.

Last, like we have it now, but with a shorter and dark underline:
This is building more an element out of it, the dark line is not as much present as the bright one in the actual theme. I would prefer the dark line. I hope the shorter line is possible.

Tell me what you think!
So much about breadcrumbs, it will come even more :slight_smile:


I personnaly like the loos one as well as the last one.

As you told, it fits more with the design. The dark underline is maybe a good way to signal (if shorter) that the orange selection can be move back and forth between elements, and so, click on them.

1 Like

nice mockups! :slight_smile:

Following my ideas:

#1 looks like there are too many shades of black to manage.
#2 fits well in the theme, but it does not suggest enough the function of the widget (it’s a sequence of buttons, labels, …?). Maybe because the components are not linked together at all.
#3 @merlijn-sebrechts (if I remember right) said something similar, but the application designer did not choose a separator there, so probably it’s not the right thing
#4 as @didrocks, I also like this one very much! The darker line looks like a rail over which the orange one can flow moving from a folder to the next/previous, explaining very well the function of the widget. Moreover it keeps all the components of the breadcrumb well together

Am I the only one that still feels this black headerbar too cold? :smile: (I’d like to suggest a little variation)

+1 for the last one with the dark line :+1:

One thing to note is that the arrows (next to the home icon and the downloads label) isn’t actually clickable here, so I would lower opacity to something almost as dark as the line you have. The user has to go more than a few layers deep, before they become active, and so most of the time they are simply clutter to me.

I’ve been looking at more of the #111111 Unity8 stuff lately, which makes this feel warm and fuzzy :sunglasses: But please do suggest something!!!

1 Like

I was playing with it yesterday, I’ll show the result. In the meanwhile, I remember that we discussed to make volume slider thinner, but could not actually find the discussion. Does anyone remember where it was?

1 Like

Maybe take hints from the slider here (white background) or here (dark bg)

1 Like

The main question for me is: when making it a thin blue line without a slider (squircle or circle like now) will it look like something you can actually click and adjust, or will it look like something only displaying the volume?

1 Like