Mockups/new design discussions

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:

suru blue

Straight up replace the blue with the aubergine:

straight purple

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.

Thanks!

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

@godlyranchdressing

Would you mind creating a branch with this proposal: https://community.ubuntu.com/t/call-for-participation-an-ubuntu-default-theme-lead-by-the-community/1545/280?u=merlijn-sebrechts

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

3 Likes

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:
opt1
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.
opt1 - Kopie
opt1 - Kopie (2)


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.
opt1 - Kopie (3)


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

3 Likes

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

https://community.ubuntu.com/t/design-mockups-updates-designer-only/2053/50

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

2 Likes

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

2 Likes

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…

2 Likes

Sure!

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.

headerbar

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:
2 Likes

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: https://community.ubuntu.com/t/ambiance-gnome-theme-bugbears-and-what-can-be-done-about-them/1637/12
I hope this could be of any use! :slight_smile:

5 Likes

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:

https://docs.google.com/drawings/d/19vjXPJLk013SqZEldLwsLHtBtfLsEQ3lGEN9EK1Rtg8/edit

(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%)

4 Likes

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.

3 Likes