Mockups/new design discussions

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

I had forgotten the “no slider” change. I think It will look like the OSD volume slider, but I’ve the same doubt @luxamman has


It must have a squircle or circle to avoid being mistaken for a progressbar


I like the breadcrumbs as a visual element, but I wouldn’t change the background of the arrows, I would maybe make the arrow color a bit darker to signal their “inactivity”.

I really like the dark underline! :smile: it brings back a bit of “depth” to the design.

About #3 I agree with this:

the application designer did not choose a separator there, so probably it’s not the right thing

It’s important to respect the choices of the application designer; even though this limits us in how we can solve certain problems…



I don’t like the loose concept and I’d really like to revert the headerbar buttons to the way they used to be: linked headerbar buttons are not flat, while unlinked ones are. For programs like Lollypop and Rhythmbox, all flat buttons are fine but for programs like Geary and anything more productivity focused, you end up with what can be a ton of loose buttons that looks like something you should blame the developer for.

And we unfortunately can’t insert separators which we can use to sort of fix the issue.

Anyway, with the linked/unlinked distinction back, I think a modified version of the first concept for the path-bar should be used. Something pretty similar to what @merlijn-sebrechts suggests:

Some comments for the Shell:

  • The circle can’t be made into a squircle, so we should consider that in the final design
  • I’d really like the orange back in the app drawer icon (orange orb) :persevere:

As teased a week ago, I’ve looked and find some design documents about Unity 8 and phone work that we can publish. I selected the ones relevant here, and with agreement with the design team, we made them public.

Do not forget also the list of issues on the current theme that Matthew filed:
I hope this could be of any use! :slight_smile:


I can’t seem to access this one?

Confirm, I can’t as well

So, following are some color I like. I did 2 things

  1. started from the current color (first picture) and tried to make it warmer (second picture)
  2. got a even darker color than the current (3rd picture) and did the same as above (4th picture)

Probably you tried this colors already :smiley:

(hopefully you all can see this)
I decided to keep the 2nd color for a while to test it, but please let me know what you think

Note: in this pics I also used a slightly lighter color for backdropped windows (7% ligher in place of the current 5%)


You know me, I like it cold and dark so I vote for the third option #232323. More seriously, I really think it looks sharp and clean.
I know the you Carlo don’t like the dark and we don’t have to agree - non of these will keep me up at night.


Indeed, seems like the permission didn’t propage. I just did a copy with the correct access (editing the oriinal post as well). Please have a try with


This is working for me, thanks!

Just some input on the grey tone selection, unsure if that applies to your will, but I just wanted to explain what we did change in the GNOME Shell gey:

  • the upstream GNOME Shell grey is blueish, in RGB terms, it’s x, x, x+2
  • I thus changed those blueish grey to a brownish one, by just swapping the +2 offset on the red, like x+2, x, x.

This ended up in a way warmer feeling overall (which seemed more “ubuntu” to me.


Thanks @didrocks, I’ll try this change with current colors and see if the result is appreciated here :slight_smile:


So, here the results. Note that I used the same color for headerbar and top panel in gnome-shell (which I suggest to do), but the latter is slightly transparent and looks a bit different.


#2B2929 (x+2, x, x)

#2B2927 (x+2, x, x-2) This is just my idea, since in the previous one I can’t really see much difference, but maybe it’s too brown-ish